HTML5 Game - Audio properties and the canvas

  1. HOME
  2. HTML5 Game
  3. Audio
  4. HTMLMediaElement

Description

Audio properties and the canvas

Demo

ResultView the demo in separate window 

<!doctype html>
<html lang="en">
<head>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);  
function eventWindowLoaded() {/*  ww  w  .j  a v a 2 s .  c  o m*/
  let audioElement = document.getElementById("theAudio");
  audioElement.addEventListener("progress",updateLoadingStatus,false);
  audioElement.addEventListener("canplaythrough",audioLoaded,false);
  audioElement.load();

  
}

function updateLoadingStatus() {
  let loadingStatus = document.getElementById("loadingStatus");
  let audioElement = document.getElementById("theAudio");
  let percentLoaded = parseInt(((audioElement.buffered.end(0) /audioElement.duration) * 100));
    document.getElementById("loadingStatus").innerHTML =   'loaded ' + percentLoaded + '%';

}

function audioLoaded() {
  
  canvasApp();

}



function canvasApp() {
  function  drawScreen () {
    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);
    
        
  }
  
  let theCanvas = document.getElementById("canvasOne");
  let context = theCanvas.getContext("2d");
  let audioElement = document.getElementById("theAudio");
  audioElement.play();
  
  
  
  function gameLoop() {
      window.setTimeout(gameLoop, 20);
      drawScreen()  
    }
    
  gameLoop();
  
}


</script>

</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">

<canvas id="canvasOne" width="500" height="300">
 Your browser does not support the HTML 5 Canvas. 
</canvas>
</div>


<div id="loadingStatus">
0%
</div>

<div  style="position: absolute; top: 50px; left: 600px; ">
<audio  id="theAudio" controls> 
<source src="http://java2s.com/style/demo/your.mp3" type="audio/mp3">
<source src="http://java2s.com/style/demo/your.ogg" type="audio/ogg">
<source src="http://java2s.com/style/demo/your.wav" type="audio/wav">

Your browser does not support the audio element. 
</audio>


</div>

</body>
</html>

Related Topic