This page demonstrates how to embed HTML5 audio with the <iframe> HTML Element.

Upon loading, a JavaScript checks if the browser supports HTML5 audio.

If not, it defaults to a Flash audio player. For debug purposes JavaScript shows an alert.

If the browser supports HTML5 audio, a Music icon is shown. To listen, click the icon.

The JavaScripts checks what audio files are supported.

If an audio format is supported according to the rules a ‘maybe’ message is generated.

Again, for debug purposes you’ll see a number of messages that display the formats with or without the maybe text.

The JavaScript determines which audiofile is used.

Safari supports audio/aac, audio/mpeg, audio/ogg (if installed) and audio/mp4.

Firefox only supports audio/ogg.

Flock and Microsoft Internet Explorer do not support HTML5 and will show the Flash audio player.

So use all browsers to see and hear the difference.

The demo uses a .m4a (aac), an ogg, and a MP3 file.

When you click the music icon again, the same messages are shown again, but this time the audio is removed.

In real life the messages are not shown.

The purpose to do it this way is to be able to show a lot of audiofiles on a page without loading them all at the same time.

It is a quick sample. It needs finetuning. A routine should be made to disable a current sound when a new sound is clicked.

Here’s the page that is displayed in the HTML Snippet. Use as many pages as you need. And study/clean up the code.

http://www.wyodor.net/_Demo/html5/audio/html5audio.html

To convert to ogg, download the software here : http://www.vorbis.com/software/