How to add HTML5 audio to your website


HTML5 has a lot of cool new features which include the ability to embed audio and video without special plug-ins.

Streaming audio quickly and effortlessly is one of the features I started using right away on a paid subscription website I run.  One of the first problems I had embedding audio using HTML5 was the incompatible audio formats from browser to browser.  Instead of explaining which formats work with which browsers lets just say you have to use all 3 formats and leave it at that.  How do you use all 3 formats when you only want one sample to play at a time?  Easy, you put all 3 as options and the browser will try the first one and if not compatible will bump down to the next until it finds one that it can play.  The formats you will be using will be mp3, ogg, and wav.  I suggest using a program like Adobe Audition, ProTools, or even a simple free audio converter downloaded off cnet- download.com.

Step by Step:

1.  Convert your audio sample into all 3 formats: wav, mp3, and ogg.

2.  Upload the audio files to your server.  For ease of use put them into a file titled “audio”.

3.  Enter this HTML5 code into your website where you would like the audio to show up:

<audio id=”YOUR_AUDIO_ID_HERE” controls=”controls” preload=”auto” loop=”loop”><br />
<source src=”/audio/YOUR_FILE_NAME_HERE.ogg”><br />
<source src=”/audio/YOUR_FILE_NAME_HERE.wav”><br />
<source src=”/audio/YOUR_FILE_NAME_HERE.mp3″><br />
</audio><br />

(Note: If you do not want your audio to loop simply leave the loop=”loop” out of your code.)

4.  Save your HTML file and upload to your server.

5.  Visit your page and check your audio to see if it plays!

 

Here is a sample of what your audio will look like, this is a sample of a crow:

More articles you may enjoy:

Facebook Comments

comments

About Jonathan G. Nelson

Jonathan G. Nelson is the editor-in-chief and owner of NERD TREK. He is also owner/publisher at AAW Games / AdventureAWeek.com, a tabletop gaming company based in Snoqualmie, WA. Connect with Jonathan via Facebook.