Question

我希望我的博客页面能够播放随机音乐曲目，当曲目结束时，它会跟随另一个随机选择的音乐曲目。

以下是我的尝试：

<html>
<body>
<div id="soundtrack"></div>

<script type="text/javascript">
var a = Math.random()*3;
a = Math.floor(a);

if(a==0)
{
    document.getElementById('soundtrack')
        .innerHTML="<audio autoplay><source src='s0000.mp3' type='audio/mp3'>Your browser does not support the audio element.</audio>";
}
if(a==1)
{
    alert(a);
    document.getElementById('soundtrack')
        .innerHTML="<audio autoplay><source src='s0001.mp3' type='audio/mp3'>Your browser does not support the audio element.</audio>";
}
if(a==2)
{
     document.getElementById('soundtrack')
          .innerHTML="<audio autoplay><source src='s0002.mp3' type='audio/mp3'>Your browser does not support the audio element.</audio>";
}

</script>
</body>
</html>

Answer 1

    <script type="text/javascript">
function play(){
    var a = Math.random()*3;
    a=Math.floor(a);

    if(a==0)
    {document.getElementById('soundtrack').innerHTML="<audio autoplay><source src='https://archive.org/download/lohkungz_s0001/lohkungz_s0001.mp3' type='audio/mp3'>Your browser does not support the audio element.</audio>";}
    if(a==1)
    {alert(a); document.getElementById('soundtrack').innerHTML="<audio autoplay><source src='s0001.mp3' type='audio/mp3'>Your browser does not support the audio element.</audio>";}
    if(a==2)
    {document.getElementById('soundtrack').innerHTML="<audio autoplay><source src='s0002.mp3' type='audio/mp3'>Your browser does not support the audio element.</audio>";}

    var aud = document.getElementById('soundtrack').getElementsByTagName('audio');
    aud[0].onended = function() {
        play();
    };

}    
play();
    </script>

https://www.w3schools.com/TAGs/av_event_ended.asp

Answer 2

您可以看到以下代码，它可能会对您有所帮助。它的示例代码，您可以添加正确的mp3文件并使用。

＆＃13;

musics = ['https://archive.org/download/lohkungz_s0001/lohkungz_s0001.mp3','https://archive.org/download/lohkungz_s0001/lohkungz_s0002.mp3','https://archive.org/download/lohkungz_s0001/lohkungz_s0003.mp3','https://archive.org/download/lohkungz_s0001/lohkungz_s0004.mp3'];
var aud = document.getElementById("music_palyer");
aud.onended = function() {
    console.log("The audio has ended");
	var a = Math.random()*musics.length;
	a=Math.floor(a);
	aud.src=musics[a];
	console.log(aud.src);
	aud.load();

＆＃13;

<div id="soundtrack">
<audio id="music_palyer" autoplay controls="controls"><source src='https://archive.org/download/lohkungz_s0001/lohkungz_s0001.mp3' type='audio/mp3'>Your browser does not support the audio element.</audio>
</div>

＆＃13;

Answer 3

您应该使用ended音频事件处理程序

试试这个。

＆＃13;

<html>
<body>
Random Audio Demo
<div >
<audio id="soundtrack" autoplay>
<source src='https://archive.org/download/kkkfffbird_yahoo_Beep_201607/beep.mp3' type='audio/mp3'>
Your browser does not support the audio element.</audio>

</div>

<script type="text/javascript">

var audio = document.getElementById('soundtrack'),
    music = [
        'https://archive.org/download/kkkfffbird_yahoo_Beep_201607/beep.mp3',
        'https://archive.org/download/Beep_7/beep.mp3',
        'https://archive.org/download/beep-07/beep-07.mp3'
    ];

audio.addEventListener('ended', function(e) {
    var r = Math.floor(Math.random()*3);

    audio.src = music[r];

});

</script>
</body>
</html>

＆＃13;

如何在我的博客页面上一个接一个地播放随机音乐曲目？

3 个答案: