如何使用HTML5音频标签创建自动播放列表?

时间:2012-03-09 15:18:54

标签: html5 html5-audio playlist

如何使用HTML5的音频标签创建自动播放列表?

我想要实现的是只有播放/暂停按钮大30x25像素的播放器,播放器在页面加载时自动播放,当歌曲结束时它将自动播放下一首歌曲。试图在播放列表中播放3-4首歌曲。

2 个答案:

答案 0 :(得分:3)

查看此帖子:using jquery + <audio> w/ php/mysql to loop playback times

var sfx = new Audio('sfx.wav');
var sounds = a.addTextTrack('metadata');

// add sounds we care about
sounds.addCue(new TextTrackCue('dog bark', 12.783, 13.612, '', '', '', true));
sounds.addCue(new TextTrackCue('kitten mew', 13.612, 15.091, '', '', '', true));

function playSound(id) {
  sfx.currentTime = sounds.getCueById(id).startTime;
  sfx.play();
}

我刚刚使用这里指定的使用提示的更好示例更新了这个:http://dev.w3.org/html5/spec/Overview.html

答案 1 :(得分:2)

我在我的网站上使用类似的代码来在我的网站上播放连续的音频播放列表:

<script type="text/javascript">
        var nextVideo = "/Link/To/Next/File.mp3";
        var audioPlayer = document.getElementById('audio_with_controls');
        audioPlayer.addEventListener('ended', PlayNext);

        function PlayNext() {
            audioPlayer.src = nextVideo;
            audioPlayer.play();
        }
</script>

您可以很容易地添加可以循环的文件数组(使用数组等)。 您还可以向用户显示播放列表,每个曲目都是一个可点击的链接,可以调用JS来更改播放器的“src”属性。

希望这有帮助!