用于多个音频文件的howler.js

Question

它适用于单个文件：

<button id="btn">Play</button>
<script>
 var btn = new Howl({urls: ['http://www.javascriptoo.com/application/html/btn.wav']})
document.getElementById('btn').onclick=function(){btn.play()}
</script>

但我需要播放多个文件：

<button id="btn2">Play</button>
<button id="btn3">Play</button>
<button id="btn23">Play</button>

解决这个问题有什么简单的方法吗？

Answer 1

要么将不同的声音组合成音频精灵(推荐的方法)：

var btns = new Howl({
  urls: ['http://www.javascriptoo.com/application/html/btn.wav'],
  sprite: {
    btn1: [0, 1000],
    btn2: [2000, 3000],
    btn3: [4000, 5000]
  }
});

或者，您可以为每个按钮设置一个新的Howl：

var btn1 = new Howl({
  urls: ['http://www.javascriptoo.com/application/html/btn1.wav']
});
document.getElementById('btn1').onclick = function(){
  btn1.play();
};

var btn2 = new Howl({
  urls: ['http://www.javascriptoo.com/application/html/btn2.wav']
});
document.getElementById('btn2').onclick = function(){
  btn2.play();
};

var btn3 = new Howl({
  urls: ['http://www.javascriptoo.com/application/html/btn3.wav']
});
document.getElementById('btn3').onclick = function(){
  btn3.play();
};