随机，随机播放JavaScript播放列表

我知道以前有人问过这个问题，但我是JavaScript的新手，在阅读了其他答案后，我无法具体理解为什么我的方法不起作用。播放的第一首曲目是随机的，但是当歌曲结束时，同一曲目会一遍又一遍地重复，而不是选择不同的随机曲目。如果 audio.play 第一次选择随机曲目，为什么在歌曲结束时它不再选择随机曲目，而是循环播放相同的曲目？感谢帮助：

var audio_files = [
"TRACKS/1.mp3",
"TRACKS/2.mp3",
"TRACKS/3.mp3"
]
var random_file = audio_files[Math.floor(Math.random() * audio_files.length)];
var audio = new Audio(random_file);
audio.play();
audio.addEventListener('ended', function(){
audio.play();
}

打乱数组并简单地迭代它以获取每个文件会更容易。使用此解决方案，由于随机解决方案，您将不会两次获得相同的文件。

一旦你到了最后，做同样的事情，洗牌数组并再次迭代。像这样，列表将发生变化，给人的印象是以随机方式选择不同的文件（但真正只是迭代）。

这是它的伪代码

function readFiles(){        
    array = shuffle(array);
    for(var i = 0; i < array.length; ++i){
         play(array[i]);
    }
    readFiles(); //to read undefinitly
}

在这里和这里，你会发现一个很好的线程来洗牌数组。我不会再这样做了，只是按照那里的答案。

在您的情况下，您不想要循环，但您将使用计数器获取下一个文件，并在到达末尾后再次洗牌数组

function getNextFile(){
    if(currentFile >= array.length){ //reach the end
        shuffle(array);
        currentFile = 0;
    } 
    return array[currentFile+];
}

你的代码需要像这样：

var audio_files = [
"TRACKS/1.mp3",
"TRACKS/2.mp3",
"TRACKS/3.mp3"
]
function random_file(){
  return audio_files[Math.floor(Math.random() * audio_files.length)];
}
var audio = new Audio( random_file() );
audio.play();
audio.addEventListener('ended', function(){
  audio.play( random_file() );
}

如果玩家有另一种方式为现有付款人指定文件，您的列表可能会是这样的

audio.addEventListener('ended', function(){
  audio.src = random_file();
  audio.play();
}

或者，如果您的播放器没有这样的 API 方法，唯一的方法是

function listner() {
  audio = new Audio( random_file() );
  audio.play();
  audio.addEventListener('ended', listner)
}
audio.addEventListener('ended', listner)

只需使用 Node 在客户端或服务器端安装著名的 underscoreJS 模块.js然后调用示例函数;

var random_file = _.sample(audio_files);

在代码笔中打开演示

要在酷下划线模块的帮助下无限播放播放列表中的文件，您可以执行以下操作

如果您是 nodejs 开发人员，则可以使用以下命令安装模块

npm i underscore

要在nodejs中使用它，您可以执行以下操作

const _ = require("underscore")

要在前端使用它，您可以将以下脚本放在 html body 标签的结束标签之前

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.2/underscore-min.js"></script>

现在让我们开始逻辑

这是我的 html 文件

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>SHUFFLED PLAYLIST</title>
  </head>
  <body>
     <button id="playsong">play playlist</button>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.2/underscore-min.js"></script>
  </body>
  </html>

这是我的javascript文件

  let played_files = [];
  let playsong = document.querySelector("#playsong");
  let audio = new Audio();
  let audio_files = [
    "songs/song_num1.mp3",
    "songs/song_num2.mp3",
    "songs/song_num3.m4a",
    "songs/song_num4.mp3",
  ];
  function random_file() {
    let file = _.sample(audio_files);
    let allSongsPlayed = _.size(played_files) === _.size(audio_files);
    if (_.contains(played_files, file) || allSongsPlayed) {
      if (allSongsPlayed) {
        played_files = [];
      }
      return random_file();
    } else {
      played_files.push(file);
      return file;
    }
  }
  function playSong() {
    let file = random_file();
    audio.src = file;
    audio.play();
  }
  playsong.addEventListener("click", () => {
    playSong();
  });
  audio.addEventListener("ended", playSong);

相关内容

最新更新

热门标签：