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"> <head> <meta charset="UTF-8"> <title>CH7EX1: Basic HTML5 Audio</title> </head> <body> <div> <audio src="song1.ogg" controls> Your browser does not support the audio element. </audio> </div> </body> </html>
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
load()
Starts loading the sound file specified by the src property of the <audio> tag.
play()
Starts playing the sound file specified by the src property of the <audio> tag. If the file is not ready, it will be loaded.
pause()
Pauses the playing audio file.
canPlayType()
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:
duration
The total length, in seconds, of the sound represented by the audio object.
currentTime
The current playing position, in seconds, of the playing audio file.
loop
true or false: whether the audio clip should start playing at the beginning when currentTime reaches the duration.
No comments yet (leave a comment)