随机随机播放 JavaScript 播放列表答案

【问题标题】：Random, shuffle JavaScript playlist随机随机播放 JavaScript 播放列表
【发布时间】：2023-01-23 17:21:04
【问题描述】：

我知道之前有人问过这个问题，但我是 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();
}

【问题讨论】：

您只选择了一次随机文件。
对于在歌曲完成时再次选择随机文件的最简单方法有什么建议吗？
您选择随机文件时是否有周期？还是单机操作？

标签： javascript

【解决方案1】：

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

一旦你到达终点，做同样的事情，打乱数组并再次迭代。像这样，列表会发生变化，给人以随机方式选择不同文件的印象（但实际上只是简单地迭代）。

这是它的伪代码

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

Here 和here，你会发现一个很好的线程来洗牌数组。我不会再这样做了，只需按照那里的答案进行操作即可。

在您的情况下，您不需要循环，但您将使用一个计数器来获取下一个文件并在到达末尾后再次随机播放数组

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

【讨论】：

谢谢，我将此信息与 addListenerEvent('ended') 函数结合使用，对数组进行了第二次洗牌；新问题是曲目之间有轻微的停顿，我需要消除或交叉淡入淡出以制作悦耳的音乐......
@tom 它来自哪里？迭代、播放器、文件本身？根据来源，存在解决方案。
我找到了一个可行的解决方案，让下一首曲目提前半秒开始，不过我想一旦我对 JavaScript 的理解稍微好一点，我就会切换到 Web Audio API。新问题：每次我加载页面时，随机排列的数组都从数组中的#1 开始。在那之后，曲目是“随机的”，但当我加载页面时的第一首曲目始终是数组中的#1：所以数组可能是 [1, 4, 9, 12] 或 [1, 9, 12, 4 ]] 等，但 1 始终是 #1。有任何想法吗？如果更好，我将启动一个新线程来发布代码。
@tom 我猜你的 shuffle 函数是在第一次“读取”之后调用的，或者使用的循环从 1 而不是 0 开始。但如果不是这种情况，如果找不到，你可能需要打开一个新线程任何解决方案

【解决方案2】：

你的代码需要是这样的：

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)

【讨论】：

在野外，以下生成随机文件的方法已被证明：Math.floor(Math.random() * (max - min + 1)) + min;。另见stackoverflow.com/documentation/javascript/203/…。
min=0 max=(audio_files.length-1) 那么： Math.floor(Math.random() * ((audio_files.length-1)-0+1))+0 等于： Math.floor(Math.random() * audio_files.length)
在您的示例中，它将是相同的。如果最小值不为零，则不再存在。
这些方法似乎都不起作用；第一个 (audio.set_file(random_file()) 导致原始随机选择永远重复，而不选择新的随机轨道；我需要的是一种在第一轨道末尾选择新随机轨道的方法其次，再次引入var audio = new Audio，只播放一次，没有第二首曲目
你使用set_file()功能吗？我的意思是您将 set_file() 函数替换为您的 Audio 播放器文档中的函数。这是伪代码，您需要阅读有关如何设置新文件的播放器手册。并再次尝试使用新音频解决方案并仔细设置监听器。

【解决方案3】：

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

var random_file = _.sample(audio_files);

【讨论】：

它如何帮助解决无限时间内随机顺序播放的问题？
是的——我想要的是一个永远持续下去的播放列表，在每首曲目的末尾选择一个新的随机曲目，这样我就可以创造一种永远持续下去的旋律……也许太雄心勃勃了在我使用 JavaScript / 代码的第二天...
@Tom 第一件事总是要准确地知道谁的单个步骤对于创建整个画面来说是轻而易举的。
您可以继续从每次选择的音频文件列表中删除。一旦清空，从完整列表重新开始=>做这个无限循环

【解决方案4】：

Open demo in codepen

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

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

npm i underscore

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

const _ = require("underscore")

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

<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);

【讨论】：