Javascript HTML音频-通过单击进行洗牌
我想创建一个基于HTML5和PHP的简单随机播放音频播放器。我有4个不同的声音文件(每个文件的长度为1秒) 我的目标是随机更改声音文件,但目前我需要在播放下一个文件之前重新加载页面Javascript HTML音频-通过单击进行洗牌,javascript,php,html,audio,Javascript,Php,Html,Audio,我想创建一个基于HTML5和PHP的简单随机播放音频播放器。我有4个不同的声音文件(每个文件的长度为1秒) 我的目标是随机更改声音文件,但目前我需要在播放下一个文件之前重新加载页面 <?php $audioFile1 = '<source src="path/SoundFile1.wav" type="audio/mpeg">'; $audioFile2 = '<source src="path/SoundFile2.wav" type="audio/mpeg"&
<?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数组中,然后收听
元素的事件,然后将源的src
属性更改为下一个曲目:
const shuffledpath=[
'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'
];
//您可能应该使用更具体的选择器,这是用于示例的
const player=document.querySelector('audio');
const source=document.querySelector('source');
设currentIndex=-1;
函数goNext(){
//抓取下一个路径并将其放入源的src属性中
currentIndex=(currentIndex+1)%ShuffledPath.length;
setAttribute('src',shuffledpath[currentIndex]);
//加载相应的曲目并播放
player.load();
player.play();
}
//当前曲目结束时播放以下曲目
player.addEventListener('end',goNext);
//播放第一首曲目
goNext()代码>
您可以对代码进行少量更改,然后使用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>
您是否在代码中使用jQuery?网站上已经有很多类似的问题。首先,看看和