如何使用 javascript 从 mp3 数组中随机播放音频

Question

我这里有一个按钮，如果用户按下它，它将播放背景音乐。 如果再次按下，它将暂停音乐。

这适用于单个 mp3 文件，但我想添加更多歌曲以进行变化。

我不想让它成为一个复杂的音乐播放器。 只需一个按钮即可播放/暂停音乐，当bg1完成后，播放数组中的下一个。

另外，我希望是否可以随机选择要播放的音乐？

请看一下我的代码到目前为止的样子：

 var myAudio = document.getElementById("myAudio"); var isPlaying = false; function togglePlay() { isPlaying? myAudio.pause(): myAudio.play(); }; myAudio.onplaying = function() { isPlaying = true; }; myAudio.onpause = function() { isPlaying = false; };

 <audio id="myAudio" src="bg1.mp3" preload="auto" loop></audio> <a href="#" onclick="togglePlay()">Play Music</a>

这是我的数组试用脚本，但我自己无法完成

let musicPlayer=[

`bg1.mp3`,
`bg2.mp3`,
`bg3.mp3`,
`bg4.mp3`

];

function playMusic(){

    let index=Math.floor(Math.random()*musicPlayer.length);
    
    let div=document.querySelector('#music');

最后，我打算制作一个包含大约 70 个 mp3 文件的数组，这可能会导致加载时间过长。 可以制作成直到轮到它才加载。 有点像音频文件的lazy loading ？

我真的很感激。 提前非常感谢！

Answer 1

我会按照以下方式解决它。

 const audio = document.querySelector('#audio'); const audioButton = document.querySelector('#audioButton'); const audioUrls = [ "https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" ]; const randomAudio = () => { const index = Math.floor(Math.random() * audioUrls.length); const audioUrl = audioUrls[index]; return audioUrl; } audioButton.addEventListener("click", () => { audio.addEventListener("ended", () => { const audioUrl = randomAudio(); const temp = new Audio(); temp.addEventListener("loadeddata", () => { audio.src = audioUrl; }); temp.src = audioUrl; }) const audioUrl = randomAudio(); audio.addEventListener("loadeddata", () => { audio.play(); }); audio.src = audioUrl; })

 <audio id="audio" src="" preload="auto" loop></audio> <a id="audioButton" href="#">Play Music</a>