HTML5 Audio

Code

<audio controls="controls" loop="loop">
   <source src="music/song1.ogg" />
   <source src="music/song2.mp3" />
   <p>If you are reading this, it is because your browser does not support the audio element.</p>
</audio>

Optional attributes:

  1. autoplay=[autoplay|''] - If present, the audio will start playing as soon as it is ready.
  2. controls=[controls|''] - If present, controls will be displayed (e.g. play/pause buttons)
  3. loop=[loop|''] - If present, the audio will repeat
  4. preload=[auto|metadata|none] - Specifies whether or not the audio should be loaded when the page loads. Ignored if autoplay is present.

Demo

Files used in this sample: Youvegot.wav, 13_ThatsGood.mp3, Violinsonata_No9_1.mid.

MIDI (Violinsonata_No9_1.mid - 154Kb)

<audio autoplay="autoplay" controls="controls">
   <source src="../../resources/Violinsonata_No9_1.mid" />
</audio>

MP3 (13_ThatsGood.mp3 - 118Kb)

<audio loop="loop" controls="controls">
   <source src="../../resources/13_ThatsGood.mp3" />
</audio>

WAV (Youvegot.wav)

<audio controls="controls" preload="auto">
   <source src="../../resources/OldFile404.mid" />
   <source src="../../resources/DoesNotExist.mp3" />
   <source src="../../resources/Youvegot.wav" />
   <source src="../../resources/13_ThatsGood.mp3" />
   <source src="../../resources/Violinsonata_No9_1.mid" />
</audio>

OGG (Remote source - requires network connection)

<audio controls="controls">
   <source src="http://upload.wikimedia.org/wikipedia/commons/a/a3/Epro_theremin_middle_bach.ogg" />
</audio>

WAV (Remote source - requires network connection)

<audio controls="controls">
   <source src="http://www.pacdv.com/sounds/people_sound_effects/applause-2.wav" />
</audio>

Comments

The HTML <audio> tag allows you to embed media directly into the web page.

Links Supported Codecs

You can define multiple <source> tags within an audio element to give the user agent choices of which format to use, based on supported codecs.

The BlackBerry Smartphone browser only supports the MP3 codec.

Autoplay

The autoplay element is ignored on the BlackBerry browser.

Autoplay

The autoplay element is ignored on the BlackBerry Smartphone browser.