HTML5 Audio Element – A Quick Introduction

Datetime:2016-08-23 03:03:23          Topic: HTML5           Share

Advertisements

It’s funny when the HTML5 specification first appeared there was a lot of focus on HTML5 video but not much on HTML5 audio. Both solve a problem that was present before, but people cared more about video. That meant there were fewer HTML5 audio plugins created, and fewer articles written on the subject. I’ll admit it’s taken me a while to get round to writing an article about it, but it’s something that was always on the to do list.

This article is going to cover how you can quickly get started using it, and some of the basic DOM references that are associated with it.

First though, the basic HTML markup:

// Basic markup - Single source with controls
<audio src="music.ogg" controls></audio>

// Basic markup - Multiple sources with controls
<audio controls>
<source src="music.ogg" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
</audio>

Above are the two simplest and easiest ways of writing the HTML5 audio tag. The second here is definitely the better options because it’s delivering the same track in multiple formats, this will help make sure that it plays no matter which browser people are using. Surprisingly like with HTML5 video browser support varies greatly for the different formats that can be added.

HTML5 Audio Supported Formats

There are 3 commonly used formats used, these are MP3, WAV and OGG . Although there are two additional formats that can also be used, in the form of AAC and OPUS . Browser support varies wildly for the different formats, so using just one can’t be a universal option.

For more about browser support for each of the formats, click on the format below and it’ll take you to the Can I Use browser support table:

That being said about browser support, just including WAV and MP3 formats should guarantee that you cover most modern browsers.

HTML5 Audio and basic DOM Reference

Now, there are far too many DOM references for me to get into in a single article, and a lot wouldn’t really fit into a getting started guide. What I do want to cover is how you can play and pause using a little JavaScript. For this example I’m going to start with the basic markup:

<audio id="audio-elem" controls>
<source src="music.ogg" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
</audio>

<button id="play">Play</audio>
<button id="pause">Pause</audio>

Using JavaScript you can get the HTML5 audio element to easily play and pause the track in only a few lines of code. First we need to create variables for each of the buttons and the element itself. This enables it to be controlled using:

var audioElem = document.getElementById('audio-elem');
var playBtn = document.getElementById('play');
var pauseBtn = document.getElementById('pause');

playBtn.addEventListener('click', function(){
audioElem.play();
});

pauseBtn.addEventListener('click', function(){
audioElem.pause();
});

HTML5 Audio – One Line Flash Fallback

One of the biggest challenges that used to face the new specification, and one that still affect it, is browser support. Unfortunately there are still a lot of people out there who are using browsers like IE8, and if they encounter these new media elements nothing will be displayed. There is a simple solution though that’s all thanks to HTML5Media.info .

This site provides a hosted one line solution. All you need to do is link to the JavaScript file and then it’ll fallback to flash in older browsers.

I hope you’ve found this brief introduction useful. It was something that I intended to write about a long time ago but never got around to. It’s definitely a feature though that could prove very useful for certain projects. So I thought I’d include an introduction to help you get started quickly.

If you’re enjoying the content on this site, join our mailing list and every time a new article is posted we’ll make sure to let you know.





About List