2017-04-07 227 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 。长度]' –