我制作了一个播放音频文件的播放器。我希望播放器在完成一首歌曲后播放一首歌曲。寻求帮助以解决此问题
Posted
技术标签:
【中文标题】我制作了一个播放音频文件的播放器。我希望播放器在完成一首歌曲后播放一首歌曲。寻求帮助以解决此问题【英文标题】：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>
如何控制播放器播放下一首歌曲？
【问题讨论】：
恕我直言，您几乎不能称其为“音频播放器”。查看 HTML5audio 元素。
你所做的只是将浏览器重定向到文件，内置的音频播放器正在播放它。最好的方法是使用 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(); );我能知道，代码是如何工作的吗？
我已经在下面发布了答案。
【参考方案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 属性可能不需要。
我知道可能有更有效的方法可以做到这一点，但我尽量保持简单，以便提问者理解代码。
【讨论】：
以上是关于我制作了一个播放音频文件的播放器。我希望播放器在完成一首歌曲后播放一首歌曲。寻求帮助以解决此问题的主要内容，如果未能解决你的问题，请参考以下文章