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

【问题标题】：Play multiple audio files using Howler.js使用 Howler.js 播放多个音频文件
【发布时间】：2020-02-25 19:24:51
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript audio howler.js

【解决方案1】：

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

<!-- 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);
})

【讨论】：

【解决方案2】：

我正在寻找一个音乐播放器，我可以在其中播放多首歌曲，并且用户可以执行播放、暂停、下一首和上一首等操作。就是这样。

import {Howl, Howler} from 'howler'

import audio1 from "../assets/Songs/song1
import audio1 from "../assets/Songs/song1
import audio1 from "../assets/Songs/song1

const songs = [audio1,audio2,audio3];
var current = 0

状态声音保持当前音乐，当用户按下下一个或上一个时，我们更新当前变量并重新启动播放器。

function Footer() {
    const [sound, setsound] = useState(new Howl({src : [songs[current]],  loop: true}))

    useEffect(() => {sound.play()}, [sound])
    
    const playNext = () => {
        sound.stop()
        current = (current+1 === songs.length ? 0 : current+1)
        console.log(current)
        var newSound = new Howl({src : [songs[current]], loop: true})
        setsound(newSound);
    }

    const playPrevious = () => {
        sound.stop()
        current = (current-1 === -1 ? songs.length-1 : current-1)
        console.log(current)
        var newSound = new Howl({src : [songs[current]], loop: true})
        setsound(newSound);
    }
    
    return (
        <div id='footer'>
            <div id='audio_controls'>
                <button className="animate__animated animate__backInDown button" onClick={() => {playPrevious()}}><img src={previous} height='40px' width='40px'/></button>
                <button className="animate__animated animate__backInDown button" onClick={() => {sound.play()}}><img src={play} height='25px' width='25px'/></button>
                <button className="animate__animated animate__backInDown button" onClick={() => {sound.pause()}}><img src={pause} height='25px' width='25px'/></button>
                <button className="animate__animated animate__backInDown button" onClick={() => {playNext()}}><img src={next} height='40px' width='40px'/></button>
            </div>
        </div>
    )
}

【讨论】：

【解决方案3】：

创建一组音乐文件 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);
})

【讨论】：