从我的播放列表中播放随机音乐 onclick image

play a random music from my playlist onclick image

我有这个代码,当我点击图片时播放一首音乐(声音在下面的代码中不起作用,但它在我的网站上有效)并在我再次点击时暂停音乐。

我的疑问是,每次有人进入我的网站并点击图片时,如何从我的 var sounds 播放列表中加载随机音乐?

提前致谢。

<script>
    var sounds = [
 "http://www.vtxfactory.com/sounds/royksopp.mp3",
 "http://www.vtxfactory.com/sounds/9thwonder.mp3",
 "http://www.vtxfactory.com/sounds/thisbeat.mp3",
 "http://www.vtxfactory.com/sounds/mosdef.mp3",
 "http://www.vtxfactory.com/sounds/oizo.mp3",
 "http://www.vtxfactory.com/sounds/dilla.mp3",];
 
 function StartOrStop(audioFile) {
        
  var audie = document.getElementById("myAudio");
        if (!audie.src || audie.src !== audioFile) audie.src = audioFile;
        console.log(audie.paused);
        if (audie.paused == false) {
            console.log('pause');
            audie.pause();
        } else {
            console.log('play');
            audie.play();
        }
    }
</script>
<img src="http://vtxfactory.com/images/vtxfactorylogobw.png" onclick="StartOrStop('http://www.vtxfactory.com/sounds/oizo.mp3')" class="spin" align="left" onmouseover="this.src='http://vtxfactory.com/images/vtxfactorylogocolor.png'" onmouseout="this.src='http://vtxfactory.com/images/vtxfactorylogobw.png'" onmousedown="this.src='http://vtxfactory.com/images/vtxfactorylogocolor.png'" onmouseup="this.src='http://vtxfactory.com/images/vtxfactorylogobw.png'" width="165px" height="190px" >
<audio id="myAudio"></audio>

您可以创建一个 getter 函数来实现它。

function getRandom ( arr ) {
  var rand = Math.floor(Math.random() * (arr.length - 1)) + 0;
  return arr[rand];
}

audie.src = getRandom(sounds);
audie.play();

从函数 StartOrStop 中删除参数并将其添加为您的音频源

audie.src = sounds[Math.floor(Math.random()*sounds.length)];

这个有效

<script>
    var sounds = [
        "http://www.vtxfactory.com/sounds/royksopp.mp3",
        "http://www.vtxfactory.com/sounds/9thwonder.mp3",
        "http://www.vtxfactory.com/sounds/thisbeat.mp3",
        "http://www.vtxfactory.com/sounds/mosdef.mp3",
        "http://www.vtxfactory.com/sounds/oizo.mp3",
        "http://www.vtxfactory.com/sounds/dilla.mp3"
    ];

    function StartOrStop(audioFile) {
        var audie = document.getElementById("myAudio");
        if (audie.paused) {
            audie.src = sounds[Math.floor(Math.random() * sounds.length)];
            audie.play();
        } else {
            audie.pause();
        }
    }
</script>

<img src="http://vtxfactory.com/images/vtxfactorylogobw.png" onclick="StartOrStop()" class="spin" align="left" onmouseover="this.src = 'http://vtxfactory.com/images/vtxfactorylogocolor.png'" onmouseout="this.src = 'http://vtxfactory.com/images/vtxfactorylogobw.png'" onmousedown="this.src = 'http://vtxfactory.com/images/vtxfactorylogocolor.png'" onmouseup="this.src = 'http://vtxfactory.com/images/vtxfactorylogobw.png'" width="165px" height="190px" >
<audio id="myAudio"></audio>