Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Handling Multimedia with HTML5 – Part 1

Sunday, March 16th, 2014 by Servage


You can’t physically manipulate audio with HTML5 Canvas as directly as you can video, but many canvas applications can use that extra dimension of sound. Audio is represented by the HTML AudioElement object manipulated through JavaScript and by the <audio> tag in HTML5. There is no Canvas API for audio nor, really, is one necessary.

However, there are many ways that you might want to use audio with HTML5 Canvas.

As you will see, the HTMLAudioElement has some limitations and can be frustrating. However, with developments like the Web Audio API on the horizon, the outlook for using audio with the HTML5 Canvas looks brighter every day.

The Basic <audio> Tag

The basic usage of the <audio> tag in HTML5 is very similar to that of the <video> tag. The only required property is src, which needs to point to an existing audio file to play in the browser. Of course, it’s always nice to show some audio controls on the page, and this can be accomplished using the controls Boolean, just as we did with <video>.

The code in the below example will load and play song1.ogg in a web browser that supports .ogg file playback.

Basic HTML5 audio

<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<title>CH7EX1: Basic HTML5 Audio</title>
<audio src="song1.ogg" controls>
Your browser does not support the audio element.



Audio Formats

Similar to video formats, which we learned already, not every web browser supports every audio format. In fact, audio support appears to be in worse shape than video. As you will soon discover in this chapter, audio is one place where HTML5 needs some serious work. However, we will show you some strategies and workarounds for making audio easier to use in your applications.

Audio Tag Properties, Functions, and Events

Similar to the <video> tag, the <audio> tag in HTML5 is based on the HTMLAudioEle

ment DOM object, which is derived from HTMLMediaElement.

Audio Functions


Starts loading the sound file specified by the src property of the <audio> tag.


Starts playing the sound file specified by the src property of the <audio> tag. If the file is not ready, it will be loaded.


Pauses the playing audio file.


Accepts a MIME type as a parameter, and returns the value maybe or probably if the browser can play that type of audio file. It returns “” (an empty string) if it cannot.

Important Audio Properties

There are many properties defined for the audio element in HTML5. We are going to focus on the following because they are the most useful for the applications we will build:


The total length, in seconds, of the sound represented by the audio object.


The current playing position, in seconds, of the playing audio file.


true or false: whether the audio clip should start playing at the beginning when currentTime reaches the duration.


Handling Multimedia with HTML5 - Part 1, 4.5 out of 5 based on 2 ratings
Categories: Guides & Tutorials


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.