我制作了一个播放音频文件的播放器。我希望播放器在完成一首歌曲后播放一首歌曲。寻求帮助以解决此问题答案

【问题标题】：I've make a player that plays the audio files. I want the player to play a song after it finishes one.. Seeking for help in solving this我制作了一个播放音频文件的播放器。我希望播放器在完成一首歌曲后播放一首歌曲。寻求帮助以解决此问题
【发布时间】：2013-12-03 09:56:01
【问题描述】：

这是链接到第一首歌曲的部分。

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

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

【问题讨论】：

恕我直言，您几乎不能称其为“音频播放器”。查看 HTML5 audio 元素。
你所做的只是将浏览器重定向到文件，内置的音频播放器正在播放它。最好的方法是使用 HTML5 audio 元素，我相信当歌曲完成时会有一个 Javascript 回调。
演示：jsfiddle.net/mUB78/1
var song = ['mysong', 'song2', 'song3'];变量索引 = 0; function nextSong(){ alert('Triggered'); $('#player').attr('src', 歌曲[index++]); } $("#player").bind('end', nextSong); $(document).ready(function(){ nextSong(); });我能知道，代码是如何工作的吗？
我已经在下面发布了答案。

标签： html audio-player

【解决方案1】：

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

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

这是音频播放器元素。这是实际播放音频的部分。它由浏览器呈现，因此可能会因浏览器和/或操作系统而异。在 Chrome 中它看起来像这样：
因为我添加了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 (source) 设置为歌曲数组中的条目，然后将索引加一以便下次它会显示列表中的下一首歌曲。

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

在这里，它将音频播放器上的ended 事件“绑定”到下一首歌曲功能。这意味着当它完成播放（一首歌曲的结尾）时，它会运行 nextSong 函数，该函数将源更改为下一首歌曲，并再次开始播放。

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

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

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

【讨论】：