How to Embed Audio Files in an HTML5 Document

By David Karlins, Doug Sahlin

When you want to add audio to a web page, all you need to do is encode the original audio file, which with any luck will be the original recording, into each of the web-friendly formats and embed all of them in the HTML5 document as follows:

  1. Create an HTML5 document in Dreamweaver or your favorite HTML editor.

  2. Switch to your HTML editor’s Code view.

  3. Position your cursor in the body of the document.

    That would be anywhere after the <body> tag.

  4. Enter the following code:

    <audio src =”/audio/mymusic.mp3”, autoplay=”true”>
    <audio src =”/audio/mymusic.aac”, autoplay=”true”>
    <audio src =”/audio/mymusic.ogg”, autoplay=”true”>
    Sorry, your browser does not support the <audio> tag

    The first three lines of code will play the file format supported by the user’s browser. If the user accesses the page with an older browser, the warning in the fourth line of code is displayed.

  5. Save the document and test it in each browser used by your target audience.

    If you use Dreamweaver CS6, you can use Adobe Browser Labs to test the document in each browser that supports HTML5. You access Adobe Browser Labs by choosing File→Preview in Browser→Adobe Browser Lab.

The previous steps are all well and good for background music, but to embed an audio file with controls in an HTML5 document, position your cursor where you want the player to appear in Step 3, and change the code in Step 4 to the following:

<audio countrols=”controls”>
<source src=”/audio/mymusic.mp3” type=”audio/mp3” />
<source src=”/audio/mymusic.aac” type=”audio/aac” />
<source src=”/audio/mymusic.ogg” type=”audio/ogg” />
Sorry, your browser does not support the <audio> tag

This code enables audio playback in an HTML5-friendly browser. If the site visitor uses a browser that doesn’t support HTML5, the fourth line of code is displayed.