Javascript 使用Howler.js播放多个音频文件

我需要使用尽可能少的代码播放多个音频文件

在下面的代码中，每当我想播放另一种声音时，我都需要重复使用相同的代码

<!-- html buttons -->
<button class="btn" id="playBtn">play</button></br>
<button class="btn" id="playBtn2">play2</button>

<!-- adding audio files using the same code twice with two variables sound and sound 2-->
<script>
var sound = new Howl({
  src: ['https://www.oxfordlearnersdictionaries.com/media/english/uk_pron/f/f_1/f_1_g/f_1_gb_1_abbr.mp3']
});

playBtn.addEventListener('click', function() {
sound.play();
});

</script>


<script>
var sound2 = new Howl({
  src: ['https://www.oxfordlearnersdictionaries.com/media/english/us_pron/l/lov/love_/love__us_1.mp3']
});

playBtn2.addEventListener('click', function() {
sound2.play();
});

</script>

玩

剧本2
新嚎叫({
src:['https://www.oxfordlearnersdictionaries.com/media/english/uk_pron/f/f_1/f_1_g/f_1_gb_1_abbr.mp3']
});
playBtn.addEventListener（'click'，function（）{
声音。播放（）；
});
var sound2=新嚎叫({
src:['https://www.oxfordlearnersdictionaries.com/media/english/us_pron/l/lov/love_/love__us_1.mp3']
});
playBtn2.addEventListener（'click'，function（）{
声音2.播放（）；
});

是否可以添加更多音频文件，但使用更少的代码。

---

谢谢：）

创建一组音乐文件URL和声音：

let myUrls = ["url1", "url2", "url3"];
let sounds = new Array(myUrls.length);

迭代该数组以创建元素：

myUrls.forEach((url, i) => {
    sounds[i] = new Howl({
        src: [url]
    })

    let elem = document.createElement("button");
    elem.class = "btn";
    elem.id = `playBtn${i}`;
    elem.addEventListener('click', () => sounds[i].play());
    elem.innerText = `Play Sound ${i}`

    // Don't forget to add them to your target node!

    document.body.append(elem);

})

---

希望这能让您走上正轨。

您可以创建所需的声音数组并动态创建按钮

<!-- html container for buttons-->
<div id="btn-container"></div>

<script>
var files = ['https://www.oxfordlearnersdictionaries.com/media/english/uk_pron/f/f_1/f_1_g/f_1_gb_1_abbr.mp3', 'https://www.oxfordlearnersdictionaries.com/media/english/us_pron/l/lov/love_/love__us_1.mp3']; // add more urls here and buttons appear dynamically

var sounds = files.map(audio => new Howl({src:[audio]}));
var html = sounds.map((sound) => {
    let btn = document.createElement("button");
    btn.class = "btn";
    btn.addEventListener('click', () => sound.play());
    document.querySelector('#btn-container').append(elem);
})

var文件=['https://www.oxfordlearnersdictionaries.com/media/english/uk_pron/f/f_1/f_1_g/f_1_gb_1_abbr.mp3', 'https://www.oxfordlearnersdictionaries.com/media/english/us_pron/l/lov/love_/love__us_1.mp3']; // 在此处添加更多URL并动态显示按钮
var sounds=files.map（audio=>newhowl（{src:[audio]}））；
var html=sounds.map（（声音）=>{
设btn=document.createElement（“按钮”）；
btn.class=“btn”；
btn.addEventListener（'click'，（）=>sound.play（））；
document.querySelector（“#btn container”）.append（elem）；
})