HTML5 / JavaScript音频播放列表

Question

I have found a nice tutorial on how to build a playlist using HTML5 and JavaScript in blog post HTML5 Audio and Video and how to make a playlist . 我在博客文章HTML5音频和视频中找到了关于如何使用HTML5和JavaScript构建播放列表以及如何制作播放列表的不错的教程。 I followed the instructions, but I did not get the correct outcome. 我遵循了说明，但是没有得到正确的结果。

This code SHOULD play all three audio files in order and stop when the last song has ended, but it what it actually does is autoplay the first file then stops when the first file is completed. 该代码应按顺序播放所有三个音频文件，并在最后一首歌曲结束时停止播放，但实际上它是自动播放第一个文件，然后在第一个文件完成后停止播放。 What did I do wrong? 我做错了什么？

<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 code is using jQuery (those $(...) statements), so it must be imported: 1） JavaScript代码使用jQuery（那些$(...)语句），因此必须将其导入：

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

2) The audio HTML element (the real "player") is missed: 2）缺少audio HTML元素（真正的“播放器”）：

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

3) The code play only TWO songs. 3）该代码仅播放两首歌曲。 To play THREE: 玩三：

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

4) The code play again and again the three songs. 4）代码一次又一次播放三首歌曲。 To stop it: 要停止它：

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

Answer 2

Using jQuery I do have achieved this by using the following control. 使用jQuery，我确实通过使用以下控件实现了这一点。

Add the audio Control tag with following parameters: 添加带有以下参数的音频控制标签：

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

And in JavaScript: 在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);
        });
    }
});

HTML5 / JavaScript音频播放列表

问题描述

2 个解决方案

解决方案1
5 已采纳 2013-01-01 15:16:01

解决方案2
-1 2013-10-23 09:02:47

HTML5 / JavaScript音频播放列表

问题描述

2 个解决方案

解决方案1 5 已采纳 2013-01-01 15:16:01

解决方案2 -1 2013-10-23 09:02:47

解决方案1
5 已采纳 2013-01-01 15:16:01

解决方案2
-1 2013-10-23 09:02:47