• Choose a category
• All
• Classic-Fiction

audio.canPlayType("audio/wav") == "maybe") {

returnExtension = "wav";

} else if(audio.canPlayType("audio/mp3") == "probably" ||

audio.canPlayType("audio/mp3") == "maybe") {

returnExtension = "mp3";

}

return returnExtension;

}

function canvasSupport () {

return Modernizr.canvas;

}

function audioLoaded(event) {

canvasApp();

}

function canvasApp() {

if (!canvasSupport()) {

return;

}

function drawScreen () {

//Background

context.fillStyle = '#ffffaa';

context.fillRect(0, 0, theCanvas.width, theCanvas.height);

//Box

context.strokeStyle = '#000000';

context.strokeRect(5, 5, theCanvas.width−10, theCanvas.height−10);

// Text

context.fillStyle = "#000000";

context.fillText ("Duration:" + audioElement.duration, 20 ,20);

context.fillText ("Current time:" + audioElement.currentTime, 20 ,40);

context.fillText ("Loop: " + audioElement.loop, 20 ,60);

context.fillText ("Autoplay: " +audioElement.autoplay, 20 ,80);

context.fillText ("Muted: " + audioElement.muted, 20 ,100);

context.fillText ("Controls: " + audioElement.controls, 20 ,120);

context.fillText ("Volume: " + audioElement.volume, 20 ,140);

context.fillText ("Paused: " + audioElement.paused, 20 ,160);

context.fillText ("Ended: " + audioElement.ended, 20 ,180);

context.fillText ("Source: " + audioElement.currentSrc, 20 ,200);

context.fillText ("Can Play OGG: " + audioElement.canPlayType("audio/ogg"),

20 ,220);

context.fillText ("Can Play WAV: " + audioElement.canPlayType("audio/wav"),

20 ,240);

context.fillText ("Can Play MP3: " + audioElement.canPlayType("audio/mp3"),

20 ,260);

}

var theCanvas = document.getElementById("canvasOne");

var context = theCanvas.getContext("2d");

audioElement.play()

setInterval(drawScreen, 33);

}

Creating a Canvas Audio Player

Now that we can play an audio file directly in an HTML page using the

However, this flexibility comes at a cost. HTML5 Canvas does not natively support common GUI controls such as push buttons, toggle buttons, and sliders. So to create a decent audio player, we need to make these types of GUI user controls from scratch. We could create these controls in HTML and JavaScript, but we have already covered communication between HTML and Canvas via form controls several times in this book. You wanted to know how to make HTML5 Canvas apps when you started reading, so we won’t pull any punches in this chapter.

Creating Custom User Controls on the Canvas

For this application we are going to create four elements:

Play/pause push button

The audio file is either playing or is paused. Whichever state it is currently in, we show the other button (i.e., show pause when playing).

A sliding progress bar

This is a noninteractive slider. It displays how much of the audio track has played and how much is left to play. The movement of this bar needs to be dynamic and based on the duration and currentTime properties of the HTMLAudioElement object.

An interactive volume slider

We want to create a sliding volume control that the user can manipulate with a click-and-drag operation. This is the trickiest control we will build because Canvas has no native support for click-and-drag.

A loop toggle button

This is a bonus. Most of the default embedded HTML5 audio players do