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