javascript - HTML音频-单击进行随机播放

Question

This question already has answers here:

change <audio> src with javascript

(6个答案)


1年前关闭。




我想基于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>

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

最佳答案

您几乎可以更改代码并使用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>

关于javascript - HTML音频-单击进行随机播放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53768203/

上一篇：javascript - 仅以mp3格式创建HTML/Javascript音频播放器

下一篇：javascript - 为什么我的停止按钮在此javascript音频播放器上不起作用？

Answer 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>