How to add Audios in HTML5

HTML5 has entered our lives for good and it is changing the way we are embedding media on our web pages. Two of the new greatest features are the <audio> elements. No more do we have to resort to Flash to serve audio to our visitors. The new solutions HTML5 has to offer are really tempting but enough with the introductory words. Let’s see what <audio> do.

<audio>

The tag’s name by itself says it all. With the new <audio> element we can quickly and easily add audio to our webpages. In its simplest form, it works pretty much the same as the <img> element so we just need to use the src attribute to link to our audio file.

<audio src="audio-file.mp3">
</audio>

It is really that simple. We can even add a fallback message or another fallback solution (Flash player) in case the visitor’s browser doesn’t support the new audio element.

<audio src="audio-file.mp3">
    <p>Fallback message - Your browser does not support the audio element.</p>
</audio>

autoplay

With difference the most annoying option. Who amongst us hasn’t stumbled upon a web page that started playing music and you were looking for that one tab that had to close? If we want to be that annoying we can use the autoplay option on our audio element. Please use with caution.

<audio src="audio-file.mp3" autoplay>
</audio>

Notice that autoplay is a boolean attribute, so no need to type autoplay=”true”.

loop

Another pretty self-explanatory boolean attribute. The audio file loops for ever.

<audio src="audio-file.mp3" loop>
</audio>

preload

Preload allows the browser to start buffering our audio file without having the visitor hit the play button first. That way, when the visitor hits tha play button, he can enjoy a smooth playback without loading times. Again, we have to be cautious when we use preload because might not want to buffer data that the visitor might not use.

So preload can take three values, “auto”, “none” and “metadata”. We are extremely interested only about the first too though.

<audio src="audio-file.mp3" preload="auto">
</audio>

Keep in mind that Safari by default has the preload to “auto” so if we want to disable it, we have to use preload=”none”

controls

With the use of controls, we enable the visitor to use the native controls each browser provides for the playback of the audio file. Of course we are able to use our own control buttons with a bit of Javascript but that is a subject for another article.

<audio src="audio-file.mp3" controls>
</audio>

filetypes

Unfortunately, not everything is as easy as it looks. The problem with audio (and video) filetypes is that the HTML5 specs do not restrict the browsers to support certain filetypes so each browser supports his own filetypes and encodings for his own reasons. What we have to do is, look ahead and provide the same audio file in different filetypes and encodings for it to be compatible with each browser that supports the audio element. More on audio filetypes and encodings on the W3Schools HTML5 Audio page.

To add multiple sources we will use the <source> tag.

<audio controls>
     <source src="audio-file.ogg" type="audio/ogg" />
      <source src="audio-file.mp3" type="audio/mpeg" />
</audio>

With those two filetypes we have covered all the compatible browsers. Let’s move on to <video> now.