Working with Audio - HTML5 Canvas - page 349

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, 250 ,20);
context.fillText ("Loop: " + audioElement.loop, 20 ,40);
context.fillText ("Autoplay: " +audioElement.autoplay, 250 ,40);
context.fillText ("Muted: " + audioElement.muted, 20 ,60);
context.fillText ("Controls: " + audioElement.controls, 250 ,60);
context.fillText ("Volume: " + audioElement.volume, 20 ,80);
context.fillText ("Paused: " + audioElement.paused, 250 ,80);
context.fillText ("Ended: " + audioElement.ended, 20 ,100);
context.fillText ("Can Play OGG: " + audioElement.canPlayType("audio/ogg"),
250 ,100);
context.fillText ("Can Play WAV: " + audioElement.canPlayType("audio/wav"),
20 ,120);
context.fillText ("Can Play MP3: " + audioElement.canPlayType("audio/mp3"),
250 ,120);
context.fillText ("Source: " + audioElement.currentSrc, 20 ,140);
context.fillText ("volumeSliderDrag: " + volumeSliderDrag, 20 ,160);
//Draw Controls
//play or pause
if (audioElement.paused) {
context.drawImage(buttonSheet, 0,0,bW,bH,playX,playY,bW,bH);//show play
} else {
context.drawImage(buttonSheet, 0,32,bW,bH,playX,playY,bW,bH); //show pause
}
//loop
if (audioElement.loop) {
context.drawImage(buttonSheet, 114,32,bW,bH,loopX,loopY,bW,bH);//show loop
} else {
context.drawImage(buttonSheet, 82,32,bW,bH,loopX,loopY,bW,bH); //show no loop
}