Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<title>Howler.js example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/1.1.25/howler.min.js"></script>
</head>
<body>
  <p>This example loads, decode and play sounds using the HowlerJS library</p>
        <button id="explosion" disabled=true>BOOM !</button>
        <button id="basic_explosion" disabled=true>Basic Explosion</button>
        <button id="winner" disabled=true>Winner!</button>
    
</body>
</html>
 
function soundLoaded() {
  
  // enable buttons, the sounds are loaded
    
   var button1 = document.getElementById("explosion");
   button1.disabled = false;
   button1.addEventListener("click", function() {
     sound.play('blast');
   });
        
   var button2 = document.getElementById("basic_explosion");
   button2.disabled = false;
   button2.addEventListener("click", function() {
     sound.play('laser');
   });
  
   var button3 = document.getElementById("winner");
   button3.disabled = false;
   button3.addEventListener("click", function() {
     sound.play('winner');
   });
}
// Load and decode sounds
var sound = new Howl({
  urls: ['http://goldfirestudios.com/proj/howlerjs/sounds.mp3', 'http://goldfirestudios.com/proj/howlerjs/sounds.ogg'],
  sprite: {
    blast: [0, 2000],
    laser: [3000, 700],
    winner: [5000, 9000]
  }, 
  onload: function() { 
     console.log("Sound loaded");
     soundLoaded();
  }
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
MichelBuffapro
0viewers