如何使用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>

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

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>