html5 audio player

Build an HTML5 Audio Player

Before HTML5 arrived on the scene, there was no standard for playing audio files on a web page. Therefore, the only way to play audio files was to use a plug-in such as flash. Now, the HTML5 <audio> element specifies a standard way to embed audio in a web page. Moreover, playback may be controlled using JavaScript. Together, they provide the framework for building our own audio player. In today’s article, we’ll build a player control that can play and pause an audio track, as well as set the track volume.

html5 audio player

Using the <AUDIO> Tag

Let’s begin by taking a look at a typical <audio> element declaration:

<audio id=”audio_player” controls=”controls”>
<source src=”track.ogg” type=”audio/ogg” />
<source src=”track.mp3″ type=”audio/mpeg” />
Your browser does not support the audio element.</audio>

Before HTML5 arrived on the scene, there was no standard for playing audio files on a web page. Therefore, the only way to play audio files was to use a plug-in such as flash. Now, the HTML5 <audio> element specifies a standard way to embed audio in a web page. Moreover, playback may be controlled using JavaScript. Together, they provide the framework for building our own audio player. In today’s article, we’ll build a player control that can play and pause an audio track, as well as set the track volume.

Using the <AUDIO> Tag
Let’s begin by taking a look at a typical <audio> element declaration:
<pre><audio controls=”controls” id=”audio_player”>
<source src=”track.ogg” type=”audio/ogg” />
<source src=”track.mp3″ type=”audio/mpeg” />
Your browser does not support the audio element.
</audio></pre>
Continue reading