<!doctype html>
<html lang="ko">
<head>
<title>CH7EX3 : Audio Properties And The Canvas
<script src="modernizr-1.6.min.js">
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
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);
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");
var audioElement = document.getElementById("theAudio");
audioElement.play();
setInterval(drawScreen, 33);
}
</script>
</head>
<body>
0%
</body>
</html>
<!doctype html>
<html lang="ko">
<head>
<title>CH7EX5 : A Custom Sound Player On The Canvas
<script src="modernizr-1.6.min.js">
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
var loadCount = 0;
var itemsToLoad = 2;
var buttonSheet;
var audioElement;
function eventWindowLoaded() {
audioElement = document.createElement("audio");
document.body.appendChild(audioElement);
var audioType = supportedAudioFormat(audioElement);
if (audioType == "") {
alert("no audio support");
return;
}
audioElement.setAttribute("src", "song1." + audioType);
audioElement.addEventListener("canplaythrough",itemLoaded,false);
buttonSheet = new Image();
buttonSheet.onload = itemLoaded;
buttonSheet.src = "audiocontrols.png";
}
function supportedAudioFormat(audio) {
var returnExtension = "";
if (audio.canPlayType("audio/ogg") =="probably" || audio.canPlayType("audio/ogg") == "maybe") {
returnExtension = "ogg";
} else if(audio.canPlayType("audio/wav") =="probably" || 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 itemLoaded(event) {
loadCount++;
if (loadCount >= itemsToLoad) {
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, 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
}
//play background
context.drawImage(buttonSheet, 32,0,playBackW,bH,playBackX,playBackY,playBackW,bH);
//vol Background
context.drawImage(buttonSheet, 32,32,volBackW,bH,volBackX,volBackY,volBackW,bH);
//play slider
var slideIncrement = playBackW/audioElement.duration;
var sliderX = (playBackW,bH,controlStartX+bW) + (slideIncrement*audioElement.currentTime);
context.drawImage(buttonSheet, 238,0,sliderW,bH,sliderX,controlStartY,sliderW,bH);
//Go back to start
if (audioElement.ended && !audioElement.loop) {
audioElement.currentTime = 0;
audioElement.pause();
}
//Volume slider
//Test Volume Drag
if (volumeSliderDrag) {
volumeSliderX = mouseX;
if (volumeSliderX > volumeSliderEnd) {
volumeSliderX = volumeSliderEnd;
}
if (volumeSliderX < volumeSliderStart) {
volumeSliderX = volumeSliderStart;
}
} else {
volumeSliderX = volumeSliderStart + (audioElement.volume*(volBackW -sliderW));
}
context.drawImage(buttonSheet, 238,0,sliderW,bH,volumeSliderX,volumeSliderY,sliderW,bH);
audioElement.volume = (volumeSliderX-volumeSliderStart) * volumeIncrement;
}
function eventMouseDown(event) {
//Hit Volume Slider
if ( (mouseY >= volumeSliderY) && (mouseY <=volumeSliderY+sliderH) && (mouseX >= volumeSliderX) && (mouseX <= volumeSliderX+sliderW) ) {
volumeSliderDrag = true;
}
}
function eventMouseMove(event) {
if ( event.layerX || event.layerX == 0) {
mouseX = event.layerX ;
mouseY = event.layerY;
} else if (event.offsetX || event.offsetX == 0) {
mouseX = event.offsetX;
mouseY = event.offsetY;
}
}
function eventMouseUp(event) {
//Hit Play
if ( (mouseY >= playY) && (mouseY <= playY+bH) && (mouseX >= playX) && (mouseX <= playX+bW) ) {
if (audioElement.paused) {
audioElement.play();
} else {
audioElement.pause();
}
}
//Hit loop
if ( (mouseY >=loopY) && (mouseY <= loopY+bH) && (mouseX >= loopX) && (mouseX <= loopX+bW) ) {
if (audioElement.loop) {
audioElement.loop=false;
} else {
audioElement.loop = true;
}
}
if (volumeSliderDrag) {
volumeSliderDrag = false;
}
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
var bW = 32;
var bH = 32;
var playBackW = 206;
var volBackW = 50;
var sliderW = 10;
var sliderH = 32;
var controlStartX = 25;
var controlStartY =200;
var playX = controlStartX;
var playY = controlStartY;
var playBackX = controlStartX+bW;
var playBackY = controlStartY;
var volBackX = controlStartX+bW+playBackW;
var volBackY = controlStartY;
var loopX = controlStartX+bW+playBackW+volBackW
var loopY = controlStartY;
var mouseX;
var mouseY;
theCanvas.addEventListener("mouseup",eventMouseUp, false);
theCanvas.addEventListener("mousedown",eventMouseDown, false);
theCanvas.addEventListener("mousemove",eventMouseMove, false);
audioElement.play();
audioElement.loop = false;
audioElement.volume = .5;
var volumeSliderStart = volBackX;
var volumeSliderEnd = volumeSliderStart + volBackW -sliderW;
var volumeSliderX = volumeSliderStart + (audioElement.volume*(volBackW -sliderW));
var volumeSliderY = controlStartY;
var volumeSliderDrag = false;
var volumeIncrement = 1/(volBackW -sliderW);
setInterval(drawScreen, 33);
}
</script>
</head>
<body>
</body>
</html>
<!doctype html>
<html lang="ko">
<head>
<title>CH7EX6 : Space Raiders With Unoptimized Sound
<script src="modernizr-1.6.min.js">
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function supportedAudioFormat(audio) {
var returnExtension = "";
if (audio.canPlayType("audio/ogg") =="probably" || audio.canPlayType("audio/ogg") == "maybe") {
returnExtension = "ogg";
} else if(audio.canPlayType("audio/wav") =="probably" || 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 canvasApp() {
const STATE_INIT = 10;
const STATE_LOADING = 20;
const STATE_RESET = 30;
const STATE_PLAYING = 40;
var appState = STATE_INIT;
var loadCount=0;
var itemsToLoad = 0;
var alienImage = new Image();
var missileImage = new Image();
var playerImage = new Image();
var explodeSound ;
var shootSound;
var audioType;
var mouseX;
var mouseY;
var player = {x:250,y:475};
var aliens = new Array();
var missiles = new Array();
const ALIEN_START_X = 25;
const ALIEN_START_Y = 25;
const ALIEN_ROWS = 5;
const ALIEN_COLS = 8;
const ALIEN_SPACING = 40;
if (!canvasSupport()) {
return;
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
function itemLoaded(event) {
loadCount++;
if (loadCount >= itemsToLoad) {
shootSound.removeEventListener("canplaythrough",itemLoaded, false);
explodeSound.removeEventListener("canplaythrough",itemLoaded,false);
appState = STATE_RESET;
}
}
function initApp() {
loadCount=0;
itemsToLoad = 5;
explodeSound = document.createElement("audio");
document.body.appendChild(explodeSound);
audioType = supportedAudioFormat(explodeSound);
explodeSound.setAttribute("src", "explode1." + audioType);
explodeSound.addEventListener("canplaythrough",itemLoaded,false);
shootSound = document.createElement("audio");
document.body.appendChild(shootSound);
shootSound.setAttribute("src", "shoot1." + audioType);
shootSound.addEventListener("canplaythrough",itemLoaded,false);
alienImage = new Image();
alienImage.onload = itemLoaded;
alienImage.src = "alien.png";
playerImage = new Image();
playerImage.onload = itemLoaded;
playerImage.src = "player.png";
missileImage = new Image();
missileImage.onload = itemLoaded;
missileImage.src = "missile.png";
appState = STATE_LOADING;
}
function startLevel() {
for (var r = 0; r < ALIEN_ROWS; r++) {
for( var c= 0; c < ALIEN_COLS; c++) {
aliens.push({speed:2,x:ALIEN_START_X+c*ALIEN_SPACING, y:ALIEN_START_Y+r*ALIEN_SPACING,width:alienImage.width, height:alienImage.height});
}
}
}
function resetApp() {
startLevel();
shootSound.volume=.5;
explodeSound.valume=.5;
appState = STATE_PLAYING;
}
function drawScreen () {
//Move missiles
for (var i=missiles.length-1; i>= 0;i--) {
missiles[i].y -= missiles[i].speed;
if (missiles[i].y < (0-missiles[i].height)) {
missiles.splice(i,1);
}
}
//Move Aliens
for (var i=aliens.length-1; i>= 0;i--) {
aliens[i].x += aliens[i].speed;
if (aliens[i].x > (theCanvas.width-aliens[i].width) || aliens[i].x < 0) {
aliens[i].speed *= -1;
aliens[i].y += 20;
}
if (aliens[i].y > theCanvas.height) {
aliens.splice(i,1);
}
}
//Detect Collisions
missile: for (var i=missiles.length-1; i>= 0;i--) {
var tempMissile = missiles[i]
for (var j=aliens.length-1; j>= 0;j--) {
var tempAlien =aliens[j];
if (hitTest(tempMissile,tempAlien)) {
explodeSound.play();
missiles.splice(i,1);
aliens.splice(j,1);
break missile;
}
}
if (aliens.length <=0) {
appState = STATE_RESET;
}
}
//Background
context.fillStyle = "#000000";
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
//Box
context.strokeStyle = "#EEEEEE";
context.strokeRect(5, 5, theCanvas.width-10, theCanvas.height-10);
//Draw Player
context.drawImage(playerImage,player.x,player.y);
//Draw Missiles
for (var i=missiles.length-1; i>= 0;i--) {
context.drawImage(missileImage,missiles[i].x,missiles[i].y);
}
//draw aliens
for (var i=aliens.length-1; i>= 0;i--) {
context.drawImage(alienImage,aliens[i].x,aliens[i].y);
}
//Draw Text
context.fillStyle = "#FFFFFF";
context.fillText ("Active Sounds: " + soundPool.length, 200 ,480);
}
function hitTest(image1,image2) {
r1left = image1.x;
r1top = image1.y;
r1right = image1.x + image1.width;
r1bottom = image1.y + image1.height;
r2left = image2.x;
r2top = image2.y;
r2right = image2.x + image2.width;
r2bottom = image2.y + image2.height;
retval = false;
if ( (r1left > r2right) || (r1right < r2left) || (r1bottom < r2top) || (r1top > r2bottom) ) {
retval = false;
} else {
retval = true;
}
return retval;
}
function eventMouseMove(event) {
if ( event.layerX || event.layerX == 0) { // Firefox
mouseX = event.layerX ;
mouseY = event.layerY;
} else if (event.offsetX || event.offsetX == 0) { // Opera
mouseX = event.offsetX;
mouseY = event.offsetY;
}
player.x = mouseX;
player.y = mouseY;
}
function eventMouseUp(event) {
missiles.push({speed:5, x: player.x+.5*playerImage.width, y:player.y-missileImage.height,width:missileImage.width, height:missileImage.height});
shootSound.play();
}
function run() {
switch(appState) {
case STATE_INIT:
initApp();
break;
case STATE_LOADING:
//wait for call backs
break;
case STATE_RESET:
resetApp();
break;
case STATE_PLAYING:
drawScreen();
break;
}
}
theCanvas.addEventListener("mouseup",eventMouseUp, false);
theCanvas.addEventListener("mousemove",eventMouseMove, false);
setInterval(run, 33);
}
</script>
</head>
<body>
</body>
</html>
html5canvas_ch7.zip
