我这里有一个按钮，如果用户按下它，将播放背景音乐。如果再次按下，它将暂停音乐。
这工作很好的单一mp3文件，但我想增加更多的歌曲的变化。
我不想让它成为一个复杂的音乐播放器。只需一个按钮，播放/暂停音乐，当bg1完成时，播放阵列中的下一个。
还有，我希望播放的音乐可以是随机选择的？
请看一下我的代码到目前为止是什么样子的:
null
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>null
这是我的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文件的阵列，这可能会导致长的加载时间。它能不能被制造成在轮到它之前不会装货。有点儿像音频文件的
我会非常感激的。提前多谢！
我会用下面的方法来解决它。
null
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>