Working with Audio - HTML5 Canvas - page 329

var audioElement = document.getElementById("theAudio");
audioElement.addEventListener("progress",updateLoadingStatus,false);
audioElement.addEventListener("canplaythrough",audioLoaded,false);
audioElement.load();
}
function canvasSupport () {
return Modernizr.canvas;
}
function updateLoadingStatus() {
var loadingStatus = document.getElementById("loadingStatus");
var audioElement = document.getElementById("theAudio");
var percentLoaded = parseInt(((audioElement.buffered.end(0) /
audioElement.duration) * 100));
document.getElementById("loadingStatus").innerHTML = 'loaded '
+ percentLoaded + '%';
}
function audioLoaded() {
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);