How to Add Audio Elements to an HTML5 Page

Perhaps no feature of HTML5 was more anticipated than the media elements, and at long last, you can build HTML5 web pages that feature audio elements without needing an external plugin.

The <audio> tag allows you to embed an audio file directly into the browser, using code like this:

  <audio src = "DoYou.ogg" controls>
    <a href = "DoYou.ogg">DoYou.ogg</a>
  </audio>

If the browser you're using doesn't support the <audio> tag, the code between <audio> and </audio> will be presented instead, so you can provide an ordinary link to let the user download the audio. Or you can embed a Flash player for older browsers.

The <audio> tag supports several standard attributes:

• autoplay: The audio file plays immediately when the browser loads the page. However, it's considered rude to play audio without the user's explicit permission.

  
  



• controls: The browser presents a simple control interface including play/pause, volume control, and some sort of position indicator. It's good to give the user some sort of control either through the built-in control mechanism or JavaScript code.

  
  



• preload: The audio file begins to load in memory as soon as the page is loaded, but it doesn't play until the user activates the player. This can prevent the buffering that might occur if the audio is not preloaded.

  
  



• src: Indicates the address of the file. Note that the <source> tag is preferred, as it allows for multiple options.

  
  

The <audio> tag is supported in some way by all major browsers, including Internet Explorer 9 (IE9). However, the actual audio file formats are not codified in the standard, so different browsers (naturally) support different formats. Most browsers support the open source Ogg standard, but a few (notably Safari and IE9) prefer Mp3. If you supply a version of each, it's likely that any late-model browser will support your audio. Use the <source> tag to include multiple audio sources:

  <audio>
    <source src = "DoYou.ogg">
    <source src = "DoYou.mp3">
  </audio>

The browser will try each source in order until it finds one it can use.

Note that the audio element can be controlled through JavaScript code. The following code (invoked in body.onload) adds a song element to the page without displaying the audio element:

  var song;
  function init(){
    song = document.createElement('audio');
    song.setAttribute('src', 'DoYou.ogg');
  } // end init

The code creates an element called song and preloads an Ogg file into that song. The following HTML code creates a play button:

  <button type = "button"
          onclick = "song.play()">
    play
  </button>

Of course, this button can be styled in any way you want to create your own interface. Once you have an audio element identified in your page, you can apply the following JavaScript functions to it:

• play: As you might guess, this plays the file. Surprisingly, there is no stop command. You'll either need to pause or set the volume to zero.

  
  



• pause: This pauses the sound. The next play command begins at this spot.

  
  



• setAttribute: This function allows you to modify any of the attributes you would normally set on the HTML <audio> tag. This is mainly used to attach a src to the audio element.

  
  

You can also access a number of useful properties:

• currentTime: This indicates where (in seconds) the song is currently playing. You can read it to find the current position, or set it to cue to a particular part of your song.

  
  



• volume: The volume goes from 0 (silent) to 100 (maximum). You can set or retrieve this attribute through JavaScript code.

  
  

dummies

Source:http://www.dummies.com/how-to/content/how-to-add-audio-elements-to-an-html5-page.html