HTML 音频 - 通过单击 [重复] 随机播放

Posted 2023-02-25

【中文标题】HTML 音频 - 通过单击 [重复] 随机播放

【英文标题】：HTML audio - shuffle by clicking [duplicate]

【发布时间】：2018-12-13 18:38:47

【问题描述】：

我想创建一个基于 html 5 和 php 的简单随机播放器。我有 4 个不同的声音文件（每个文件的长度为 1 秒）。

我的目标是随机更改声音文件，但目前我需要在播放下一个文件之前重新加载页面。

    <?php
$audioFile1 = '<source src="path/SoundFile1.wav" type="audio/mpeg">';
$audioFile2 = '<source src="path/SoundFile2.wav" type="audio/mpeg">';
$audioFile3 = '<source src="path/SoundFile3.wav" type="audio/mpeg">';
$audioFile4 = '<source src="path/SoundFile4.wav" type="audio/mpeg">';
$audioFiles = array( $audioFile1, $audioFile2, $audioFile3, $audioFile4 );
shuffle( $audioFiles );
?>

<audio controls class="iru-tiny-player" data-title="Shuffle">
    <?php print $audioFiles[0]; ?>
</audio>

有没有办法在结束当前文件后随机播放下一个文件？

【问题讨论】：

你在代码中使用 jQuery 吗？

网站上已经有很多类似的问题了。先看看***.com/a/10792564/1675954 和***.com/a/15587181/1675954

【参考方案1】：

您几乎可以更改代码并使用 js。

<?php
    $audioFile1 = 'path/SoundFile1.wav';
    $audioFile2 = 'path/SoundFile2.wav';
    $audioFile3 = 'path/SoundFile3.wav';
    $audioFile4 = 'path/SoundFile4.wav';
    $audioFiles = array($audioFile1, $audioFile2, $audioFile3, $audioFile4);
    shuffle($audioFiles);
?>

<audio id="audio" controls class="iru-tiny-player" data-title="Shuffle" src="<?php print $audioFiles[0] ?>" type="audio/mpeg"></audio>

<script type="text/javascript">
    document.getElementById('audio').addEventListener("ended",function() 
        var fileArr = ['<?= $audioFile2 ?>', '<?= $audioFile2 ?>', '<?= $audioFile4 ?>'];
        var min=0;
        var max= (fileArr.length -1);
        var random = Math.floor(Math.random() * (+max - +min) + +min);
        this.src = fileArr[random];
        this.play();
    );
</script>

【参考方案2】：

我会将打乱的路径打印到一个JS数组中，然后监听<audio>元素的ended事件，然后将源的src属性更改为下一个轨道：

const shuffledPaths = [
  'https://freewavesamples.com/files/Alesis-Sanctuary-QCard-Tines-Aahs-C4.wav',
  'https://freewavesamples.com/files/Roland-JV-2080-Pick-Bass-C2.wav',
  'https://freewavesamples.com/files/Bass-Drum-2.wav'
];

// You should probably use more specific selectors, this is for the sample
const player = document.querySelector('audio');
const source = document.querySelector('source');

let currentIndex = -1;

function goNext() 
  // Grab the next path and put it in the source's src attribute
  currentIndex = (currentIndex + 1) % shuffledPaths.length;
  source.setAttribute('src', shuffledPaths[currentIndex]);

  // Load the corresponding track and play it
  player.load();
  player.play();


// Play the following track when the current one ended
player.addEventListener('ended', goNext);

// Play the first track
goNext();

<audio controls class="iru-tiny-player" data-title="Shuffle">
  <source type="audio/mpeg">
</audio>

请注意，我让它循环播放，但如果喜欢的话，很容易使用currentIndex 让它在最后停止。