howler.js 用于多个音频文件答案

【问题标题】：howler.js for multiple audio fileshowler.js 用于多个音频文件
【发布时间】：2015-10-04 07:56:48
【问题描述】：

它适用于单个文件：

<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>

有什么简单的方法可以解决吗？

【问题讨论】：

标签： howler.js

【解决方案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();
};

【讨论】：