如何使用javascript中的數組獲取隨機播放的歌曲？

Question

頁面加載，rand變量使歌曲隨機化。 我希望再次使用播放按鈕暫停歌曲，然后再次致電rand varibale，以便再次將歌曲隨機化。 因此，當我按下播放按鈕時，它將播放另一首歌曲。 playagain按鈕正在暫停歌曲，但是rand變量不會再次隨機化。 有辦法解決嗎？

HTML：

<audio id="mytrack" controls>
    <source src="Song1.wav" type = "audio/wav"/>
</audio>

<audio id="gd" controls>
    <source src="Song2.mp3" type = "audio/mp3"/>
</audio>

<button type="button" id="playButton"></button>
<button type="button" id="playagain"></button>

JavaScript的：

var mytrackJS = document.getElementById('mytrack');
var playButtonJS = document.getElementById('playButton');
var playagainJS = document.getElementById('playagain');
var gdJS = document.getElementById('gd');

var audioPlaying = [mytrackJS, gdJS];
var rand = audioPlaying[Math.floor(Math.random() * audioPlaying.length)];

playButtonJS.addEventListener('click', playOrPause, false);
playagainJS.addEventListener('click', random, false);

function random() {

     var rand = [Math.floor(Math.random() * audioPlaying.length)];
    playOrPause();
}

function playOrPause() {
    if (!rand.paused && !rand.ended){
        rand.pause();
        playButtonJS.style.backgroundImage = 'url(playbutton.svg)';
    }
    else{
        rand.play();
        playButtonJS.style.backgroundImage = 'url(pausebutton.png)';
    }
}

Answer 1

您似乎沒有正確聲明變量audioPlaying。 您也不需要在rand語句周圍使用audioPlaying []。 嘗試以下方法：

var audioPlaying = [mytrackJS, gdJS];
var rand = Math.floor(Math.random() * audioPlaying.length);

Answer 2

由於您一次初始化rand變量，因此它的值將始終保持不變。

要查看預期結果，請將其移至playOrPause函數。

function playOrPause() {
  var rand = audioPlaying[Math.floor(Math.random() * audioPlaying.length)];
  if (!rand.paused && !rand.ended){
    rand.pause();
    playButtonJS.style.backgroundImage = 'url(playbutton.svg)';
  } else{
    rand.play();
    playButtonJS.style.backgroundImage = 'url(pausebutton.png)';
  }
}

Answer 3

我不確定這是否是您要尋找的東西，但是我只是在更改單個audio的src屬性，而不是在兩個不同的audio元素之間進行選擇。 這樣，您可以擁有一個文件名數組，並使用array[Math.random()*array.length]從文件名中隨機選擇