HTML5/JavaScript 音频播放列表

Question

我在博文 HTML5 Audio and Video and how to make a playlist 中找到了关于如何使用 HTML5 和 JavaScript 构建播放列表的精彩教程。我按照说明进行操作，但没有得到正确的结果。

此代码应该按顺序播放所有三个音频文件并在最后一首歌曲结束时停止，但它实际上所做的是自动播放第一个文件然后在第一个文件完成时停止。我做错了什么？

<html>
    <body>
        <ul id="playlist">
            <li class="active">
                <a href="http://www.codenamejupiterx.com/song/soundtest.mp3">
                   soundtest
                </a>
            </li>
            <li>
                <a href="http://www.codenamejupiterx.com/song/soundtest2.mp3">
                    soundtest2
                </a>
            </li>
            <li>
                <a href="http://www.codenamejupiterx.com/song/soundtest3.mp3">
                    soundtest3
                </a>
            </li>
        </ul>

        <script>
            var audio;
            var playlist;
            var tracks;
            var current;

            init();
            function init(){
                current = 0;
                audio = $('#audio');
                playlist = $('#playlist');
                tracks = playlist.find('li a');
                len = tracks.length - 1;
                audio[0].volume = .10;
                audio[0].play();
                playlist.find('a').click(function(e){
                    e.preventDefault();
                    link = $(this);
                    current = link.parent().index();
                    run(link, audio[0]);
                });
                audio[0].addEventListener('ended',function(e){
                    current++;
                    if(current == len){
                        current = 0;
                        link = playlist.find('a')[0];
                    }
                    else{
                        link = playlist.find('a')[current];
                    }
                    run($(link),audio[0]);
                });
            }

            function run(link, player){
                player.src = link.attr('href');
                par = link.parent();
                par.addClass('active').siblings().removeClass('active');
                audio[0].load();
                audio[0].play();
            }
        </script>
    </body>
</html>

Answer 1

1) JavaScript 代码使用的是 jQuery（那些 $(...) 语句），所以必须导入：

<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  </head>
<body>
...

2) 缺少audio HTML 元素（真正的“播放器”）：

<body>
  <audio id="audio" preload="auto" tabindex="0" controls="" >
    <source src="http://www.codenamejupiterx.com/song/soundtest.mp3">
  </audio>
...

3) 代码只播放两首歌曲。玩三个：

...
len = tracks.length; //"-1" removed
...

4) 代码反复播放三首歌曲。停止它：

audio[0].addEventListener('ended',function(e){
    current++;
    if(current < len){
      link = playlist.find('a')[current];   
      run($(link),audio[0]);
    }
});

Answer 2

使用 jQuery，我确实通过使用以下控件实现了这一点。

使用以下参数添加音频控制标签：

<audio id="audio1" controls="controls" autoplay="autoplay">    </audio>

在 JavaScript 中：

jQuery(function($) {
    var supportsAudio = !!document.createElement('audio').canPlayType;
    if (supportsAudio) {

        url = URL.baseUrl + Books + authors + "/" + subject + "/data.json";
        $.getJSON(url, function(data){
            console.log("ddd"+JSON.stringify(data));

            var index = 0,
            trackCount = data.URL.length,
                npAction = $('#npAction'),
                npTitle = $('#npTitle'),
                audioid = $('#audio1').bind('play', function() {
                }).bind('ended', function() {

                if((index + 1) < trackCount) {
                    index++;
                    loadTrack(index);
                    audioid.play();
                }
                else {
                    audioid.pause();
                    index = 0;
                    loadTrack(index);
                }
            }).get(0),
                loadTrack = function(id) {
                    index = id;
                    audioid.src = data.URL[index].ayah;
                };
            loadTrack(index);
        });
    }
});