Question

我在文件夹中有很多MP3文件。

当我进入页面时，我想要播放该播放列表中的一首歌。这首歌结束后，我想要一个新歌（不是同一个）等等。

<script type="text/javascript">
var song = ["../audio/1.mp3" , "../audio/2.mp3", "../audio/3.mp3", "../audio/4.mp3", "../audio/5.mp3" ];
var soundFile = song[Math.floor(Math.random()*song.length)];
document.write("<embed id='sound' src='" + soundFile + "' loop='true' type='audio/mpeg' controller='false' height='0' width='0'>");
</script>

出了什么问题，因为它总是播放同一首歌。

Answer 1

使用已定义的嵌入元素并设置src属性。

<embed id='sound' loop='true' type='audio/mpeg' controller='false' height='0' width='0'>

<script type="text/javascript">
  var songs = ["../audio/1.mp3" , "../audio/2.mp3", "../audio/3.mp3", "../audio/4.mp3", "../audio/5.mp3" ];
  var remainingSongs = songs;
  var el = document.getElementById("sound");

  var pickSong = function(){
    // No songs left?
    if(!remainingSongs.length) {
      remainingSongs = songs;
    }

    // Pick song
    var index = Math.floor(Math.random() * (remainingSongs.length - 1));

    var soundFile = remainingSongs[index];

    // Remove song from array
    remainingSongs.splice(index, 1);

    el.setAttribute("src", soundFile);
  }

  pickSong();
  el.addEventListener("ended", pickSong, false);
</script>

Answer 2

您有一个错误的错误。我认为应该是：

var soundFile = song[(Math.floor((Math.random())*(song.length-1)))];

但是否则这应该有效。可能是错误代码和奇怪的浏览器缓存的组合？

另外，请检查用于提供文件的Web服务器并清除其缓存。

另外请确保您的音频文件实际上不同。

此外，随机的机会可能会欺骗你。试一试。

这适用于OSX上的Chrome Canary：

<!DOCTYPE html>
<html>
<head>
    <script>
    var song = ['./foo.m4a', 'bar.m4a', 'bam.m4a'];
    var soundFile = song[(Math.floor((Math.random())*(song.length-1)))];
    document.write('<embed id="sound" src="' + soundFile + '" loop="true" type="audio/mpeg" controller="false" height="0" width="0">');
    </script>
</head>
<body></body>
</html>

Answer 3

问题是embed元素的循环属性不知道您的音频源数组。它只是在同一个源文件上循环。

幸运的是，有一个非常简单的解决方案。下面将使用Audio构造函数创建一个Audio元素，并在完成上一个播放后继续从song数组中设置“随机”音频源。我们可以通过收听ended事件来做到这一点。

<script type="text/javascript">
  var song = ["../audio/1.mp3" , "../audio/2.mp3", "../audio/3.mp3", "../audio/4.mp3", "../audio/5.mp3" ];
  var audio = new Audio();
  var setSound = function() {
    var soundFile = escape(song[Math.floor(Math.random()*song.length)]);
    audio.setAttribute('src', soundFile);
    audio.play();
  };

  // set initial source
  setSound();
  // set a new source, when current sound is done playing
  audio.addEventListener('ended', setSound, false);
</script>

随机播放列表的无限循环

3 个答案: