Online Book Reader

Home Category

HTML5 Canvas [118]

By Root 6440 0
song will start automatically, replay when it reaches the end, and display the default browser audio controls. Here is the code to embed song1:

NOTE

Just as we did with video, we have placed the audio type with the broadest support for iOS devices first in the list. This is because handheld devices do not do well with multiple embedded sources.

We created .ogg, .wav, and .mp3 versions of the song using Audacity. Example 7-2 gives the full code.

Example 7-2. Basic HTML5 audio revisited

CH7EX2: Basic HTML5 Audio Revisited

Your browser does not support the audio element.

NOTE

song1 was created 10 years ago using Sonic Foundry’s Acid music-looping software. Acid is an amazing tool for creating soundtracks because it can help even the musically inept (read: us) create songs that sound perfect for games and applications. Acid is now sold by Sony for Windows only. Songs can be created on the Mac in a similar way using GarageBand.

Audio Tag Properties, Functions, and Events

Similar to the

Audio Functions


load()

Starts loading the sound file specified by the src property of the

play()

Starts playing the sound file specified by the src property of the

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.

autoplay

true or false: whether the audio should start playing automatically when it has loaded.

muted

true or false. Setting this to true silences the audio object regardless of volume settings

controls

true or false. Displays controls for an audio object in an HTML page. Controls will not display on the canvas unless they are created in HTML (for example, with a

overlay).

volume

The volume level of the audio object; the value must be between 0 and 1.

paused

true or false: whether the audio object is paused. Set with a call to the pause() function.

ended

true or false. Set when an audio object has played through its entire duration.

currentSrc

URL to the source file for the audio object.

preload

Specifies whether the media file should be loaded before the page is displayed. At the time of this writing, this property has not been implemented across all browsers.

NOTE

To see which properties and events of the HTMLMediaObject are supported in which browsers, visit http://www.w3.org/2010/05/video/mediaevents.html.

Important Audio Events


Many events are defined for the HTML5 audio element. We are going to focus on the following events because they have proven to work when building audio applications:

progress

Raised when the browser is retrieving data while loading the file. (This still has spotty support in browsers, so be careful with it.)

canplaythrough

Raised when the browser calculates that the media element could be played from beginning to end if started

®Online Book Reader