2017-04-07 228 views
0

頁面加載和rand變量隨機化歌曲。我想要playagain按鈕來暫停歌曲並再次調用rand varibale,以便它再次隨機播放歌曲。所以當我按下播放按鈕時,它會播放不同的歌曲。 playagain按鈕正在暫停歌曲,但rand變量不會再次隨機化。有沒有辦法解決這個問題?如何獲得隨機歌曲在JavaScript中使用數組播放?

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)'; 
    } 
} 
+0

首先,'playagainJS.addEventListener('clcik',random,false);',這應該是'點擊「而不是」clcik「。另外,爲什麼你從HTML元素列表中選擇一個隨機元素? – Palle

+0

謝謝我解決了錯字。我試圖讓它隨機挑選一首歌曲然後播放它。然後當playagain按鈕被點擊時,它會暫停歌曲並隨機選擇另一首歌曲。 – Deps

回答

0

它看起來並不像你正確聲明變量audioPlaying。您也不需要將您的聲明用於rand的audioPlaying []。試試這個:

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

哦,剛剛看到這個謝謝。 ive改變了它,但它仍然不起作用 – Deps

+0

剛剛添加了一個快速更新。關於'rand'變量。讓我知道現在如何工作 –

+0

好的謝謝。它現在隨機播放歌曲。 theres一些問題與播放和暫停不工作,但我認爲我應該能夠解決這個問題。謝謝 – Deps

0

既然你初始化蘭特變量一次,它的價值是要始終保持不變。

要查看預期結果,請將其移動到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)'; 
    } 
} 
+0

我做到了這一點,但它仍然不能正常工作 – Deps

+0

請問您能否詳細說明,哪些工作不正常? – lazyvab

+0

「不工作」是一個相當無用的陳述。你需要非常明確地定義什麼是失敗和如何。 – csmckelvey

0

我不知道這是否是你要找的東西,但不是兩個不同audio元素之間進行選擇,我只想改變一個一個的src屬性。這樣你可以有一個文件名的數組,並隨機選擇那些使用array[Math.random()*array.length]

+0

你解釋我將如何改變'src'屬性 – Deps

+0

'document.getElementById('mytrack')。src = array [Math.random()* array 。長度]' –