in

CSS AURAL MEDIA | Learn How to Attach Sounds to Web Documents

In this tutorial we will be discussing about CSS AURAL MEDIA and how developers can add sounds when developing web pages. In our previous tutorial we looked at CSS PAGED MEDIA and how you can make use of @paged rules when adding pagination to web documents. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: CSS PAGED MEDIA | Introduction To CSS @page Rules

CSS AURAL MEDIA

CSS2 allows developers to insert sounds into web documents which can be rendered using sound synthesizers. aural rendering is very important in cases where the users are visually impaired or during training , presentation etc. When structuring the aural rendering it is expected you make use of good sound quality before, during and after the speech.

The example below shows how we can use CSS properties to vary the quality of speech sounds such as the frequency, voice type etc

<html>
   <head>
      <title>AURAL MEDIA ILLUSTRATION</title>
      <style type = "text/css">
         h1, h2, h3, h4 {
            voice-family: paul;
            stress: 30;
            richness: 60;
            cue-before: url("audio link");
         }
         
      </style>
   </head>

   <body>
   
      <h1>Develoferd.com</h1>
      <h2>Develoferd.com</h2>
      <h3>Develoferd.com</h3>
      <h4>Develoferd.com</h4>
      
      
   </body>
</html> 

RESULT

AURAL MEDIA ILLUSTRATION

Develoferd.com

Develoferd.com

Develoferd.com

Develoferd.com

This directs the speech translator to speak the headers in voice using a clean rich sound.

Below are the list of properties related to aural media:

  • azimuth – this is used to set where the sound should come from horizontally
  • cue – use to specify a cue before or after speaking a content
  • cue-before – use to specify a sound to be played before speaking an element content
  • cue-after – use to specify a sound to be played after speaking an element content
  • pause- use to specify a pause
  • pause-before – use to specify a pause before speaking a content
  • pause-after – use to specify a pause after speaking a content
  • stress – use to set the height of local peaks
  • volume-family – use to specify the voice family
  • volume – use to set the volume of the aural media

The azimuth property

This property sets where the sound could come from horizontally and takes in values such as left side, left, far left, center, right, right side, far right. Example shown below

<style type = "text/css">
   <!--
      h1   { azimuth: 50deg }
      td.a { azimuth: far-left }         
      #15  { azimuth: behind far-left }   
      p.comment { azimuth: behind }        
   -->
</style>

Cue property

This property is used to set before and after cue. Example shown below

<style type = "text/css">
   <!--
      h1 {cue-after: url("iplay.au"); cue-before: url("iplay.au") }
      h1 {cue: url("iplay.au") }
   -->
</style>

Cue-before property

The cue-before is used to specify a cue before or after speaking a content . example shown below

<style type = "text/css">
   <!--
      a {cue-before: url("iplay.au");}
      h1 {cue-before: url("iplay.au"); }
   -->
</style>

Cue-after property

The cue-after property is used to specify a cue after or after speaking a content . example shown below

<style type = "text/css">
   <!--
      a {cue-after: url("iplay.au");}
      h1 {cue-after: url("ipopplay.au"); }
   -->
</style>

pause property

The pause property is use to specify a pause before and after a speaking a content. Example shown below

<style type = "text/css">
   <!--
    /*this shows pause before and after as 70ms*/
      h1 { pause : 70ms }  
	
      /*this shows pause before as 90ms and after as 80ms*/
      h2{ pause : 90ms 80ms }  
	
     
   -->
</style>

pause-before property

The pause-before is use to specify a pause before speaking a content . Example shown below

<style type = "text/css">
   <!--
    /*this displays pause before as 70ms*/
      h1 { pause-before : 70ms }   
   -->
</style>

pause-after property

The pause-after is use to specify a pause after speaking a content . Example shown below

<style type = "text/css">
   <!--
    /*this displays pause after as 70ms*/
      h1 { pause-after : 70ms }   
   -->
</style>

The volume-family property

This property is used to specify the volume family and it can take values such as

  • generic voice – e.g voice families such as male, female and child
  • specific voice – e.g specific instances comedian, trinoid

Example shown below

<style type = "text/css">
   <!--
      h1 { voice-family: announcer, female }
      p.voicefemale { voice-family: mary, female }
      p.voicemale  { voice-family: romeo, male }
   -->
</style>

The volume property

This refers to the median volume or loudness of the voice. it takes in values such as

  • x-soft- this means extra soft which means 0
  • silent- no sound at all
  • number- can take in any number such from 0-100
  • soft – this is same as volume 25
  • loud- this is same as volume 75
  • medium – this is same as volume 50
  • x-loud – this is same as volume 100

CONCLUSION

A good understanding of CSS AURAL MEDIA will help every developer structure web pages for aural functions and for interpretation by sound synthesizers. Lets move on to the next topic on CSS PRINTING

What do you think?

CSS paged media

CSS PAGED MEDIA | Introduction To CSS @page Rules

css printing

CSS PRINTING | Change the Appearance Of Web Page When Printed