HTML5 Game - Dynamically Creating an Audio Element in JavaScript, Playing a sound with no tag

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

Description

Dynamically Creating an Audio Element in JavaScript, Playing a sound with no tag

Demo

ResultView the demo in separate window 

<!doctype html>
<html lang="en">
<head>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);  

let audioElement;//from   w  w  w.ja va 2 s . c o m
function eventWindowLoaded() {
  audioElement = document.createElement("audio");
  document.body.appendChild(audioElement);
  let audioType = supportedAudioFormat(audioElement);
  if (audioType == "") {
    alert("no audio support");
    return;
  }
  audioElement.addEventListener("canplaythrough",audioLoaded,false);
  audioElement.setAttribute("src", "http://java2s.com/style/demo/your." + audioType);
}
function supportedAudioFormat(audio) {
  let returnExtension = "";
  if(audio.canPlayType("audio/mp3") == "probably" || audio.canPlayType("audio/mp3") == "maybe") {
    returnExtension = "mp3";
  }else 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";
  } 
  return returnExtension;
}
function audioLoaded(event) {
  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');
  //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>
</body>
</html>

Related Topic