Manipulating HTML5’s native audio with JavaScript

HTML5’s native audio element will be a great way to avoid having to rely on third party plug-ins like QuickTime and Flash. The latest web browsers like Chrome 10+ and Firefox 3.6+ are already there with imbedded javascript libraries which provide methods and properties for manipulating the <audio> element. In this post, we’ll examine a few of the most important methods and discover ways to use Javascript to run audio files.

NOTE:  Although this post focuses on the Audio object, these methods and properties are the same for Video.

Audio Methods

.load();

Loads and re-loads the audio element for playback.

audioElement.load();

.play();

Starts playing the audio file.

audioElement.play();

.pause();

Pauses playback of the audio file.

audioElement.pause();

.canPlayType(type);

Checks with browser to see if type of audio file is supported.

audioElement.canPlayType('audio/ogg; codecs="vorbis"');

Audio Properties

.currentTime

Sets or returns the playback position in the audio file. Value is in seconds.

audioElement.currentTime = seconds;

.duration

Returns the length of the audio file in seconds.

var seconds = audioElement.duration;

.src

The url where the audio file exists.

audioElement.src = 'audio.ogg';

.volume

Sets or returns the volume of the audio file.

audioElement.volume = value;

NOTE: This is not an exhaustive list of methods and properties.

Putting It Together

Developers can use javascript to create audio elements on the fly and customize the user interface for interacting with these elements. Let’s take a look.

First, create a standard .htm document and copy in the below <script> section.

<script type="text/javascript" language="javascript" >

var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'audio.ogg');

function PlayAudio()
{

	audioElement.load;
	audioElement.play();

}

function PauseAudio()
{
	audioElement.pause();
}

</script>

Now let’s review the javascript above line by line.

var audioElement = document.createElement('audio');

The first thing the page does when it loads is create the <audio> element and assign it to the audioElement variable. By assigning this object to the variable, the script’s functions can use it to reference and manipulate the object (element) during the page session.

audioElement.setAttribute('src', 'audio.ogg');

Next the ‘src’ attribute is assigned, telling the page where to find the audio file.

function PlayAudio()
{
	audioElement.load;
	audioElement.play();
}

The PlayAudio() function loads and then plays the audio file. First the .load() method is called, and then once the audio file has finished loading, the .play() method is called to start the file.

function PauseAudio()
{
	audioElement.pause();
}

The simple PauseAudio() function pauses the playback. If the PlayAudio() function is called again, the audio file will reload and begin playing the file from the start. However, you could use the .currentTime property to have the file begin playback at the time the PauseAudio() function was executed. Download the demo to view an example of how this can be done.

Support

What developers must keep in mind with the <audio> element is that it is not yet widely supported by browsers. In addition, various browsers only support certain kinds of audio file types. Check out my previous post for details about using HTML5’s <audio> element natively and how it is supported.

NOTE: The accompanying demo will only work in Chrome 10+ and FireFox 3.6+.

By getting creative with the audio’s javascript methods and properties, you can avoid relying on the clunky controls provided by web browsers and inject pizazz into your pages! In a future post, I’ll examine how to use the .canPlayType() method to determine what audio file is supported by the user’s web browser.

Happy Coding!