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


Loads and re-loads the audio element for playback.



Starts playing the audio file.;


Pauses playback of the audio file.



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

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

Audio Properties


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

audioElement.currentTime = seconds;


Returns the length of the audio file in seconds.

var seconds = audioElement.duration;


The url where the audio file exists.

audioElement.src = 'audio.ogg';


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()



function PauseAudio()


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()

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()

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.


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: Logo

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s