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.

Advertisements

2 thoughts on “Manipulating HTML5′s native audio with JavaScript

  1. I think this is one of the most significant information for me.
    And i am glad reading your article. But should remark on some general things, The site style is wonderful, the
    articles is really excellent : D. Good job, cheers

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s