Question

这是连接第一首歌的部分。

    <html>
    <a href="pelay.html"> Play Song </a>
    </html>

这是链接的位置，并在点击链接后自动播放音频。

    <html>
    <body>
    <meta http-equiv="refresh" content="0; url=file:///C:/Users/Mau%20Mao/Music/music/Change.mp3" />
    </body>
    </html>

如何控制播放器播放下一首歌？

Answer 1

因为我被要求解释我在评论中发布的fiddle [更新]：

<audio id="player" controls="true" autoplay="true"></audio>

这是音频播放器元素。这是实际播放音频的部分。它由浏览器呈现，因此根据浏览器和/或操作系统可能会有所不同。在Chrome中，它看起来像这样： Audio Player 1
因为我添加了controls属性，所以您可以看到它。如果您要删除控件属性，您将能够听到音频，但无法控制任何音频。 autoplay告诉浏览器在加载后立即开始播放音频。

var songs = ['song1.mp3', 'song2.mp3', 'song3.mp3'];

这定义了一个名为songs的新数组，其中包含三首歌曲的URL。只需将, 'song4.mp3'附加到最后一个值即可添加更多内容。

var index = 0;

这定义了一个新变量，它将包含我们所在歌曲的编号。这意味着当数字等于0时，它将播放第一个条目，第二个条目为1，依此类推（数组从0开始）。

function nextSong(){
    alert('Triggered');
    $('#player').attr('src', songs[index++]);
}

这创建了一个名为nextSong的新函数，该函数在运行时会将音频播放器的URL更改为数组中的下一首歌曲。它如何做到这一点是它从ID中选择了播放器，并使用索引号将属性（attr）src（源）设置为songs数组中的条目，然后将索引增加一这样下一次它就会显示列表中的下一首歌。

$("#player").bind('ended', nextSong);

在这里，它将音频播放器上的ended事件“绑定”到下一首歌曲功能。这意味着当它完成播放（歌曲的结尾）时，它会运行nextSong功能，该功能会改变下一首歌曲的来源，然后重新开始播放。

$(document).ready(function(){
    nextSong();
});

所有这一切，是在加载页面时，它运行nextSong函数一次以手动启动它，但由于音频播放器上的autoplay属性，可能不需要。

我知道可能有更有效的方法，但我尽量保持简单，以便提问者理解代码。

我制作了播放音频文件的播放器。我希望玩家在完成一首歌之后播放一首歌。寻求帮助解决这个问题

1 个答案: