0

HTML5 と JavaScript を使用してプレイリストを作成する方法に関する素晴らしいチュートリアルをブログ投稿HTML5 オーディオとビデオおよびプレイリストの作成方法 で見つけました。指示に従いましたが、正しい結果が得られませんでした。

このコードは、3 つのオーディオ ファイルすべてを順番に再生し、最後の曲が終了すると停止する必要がありますが、実際には、最初のファイルを自動再生し、最初のファイルが完了すると停止します。私は何を間違えましたか？

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

2 に答える 2

4

1) JavaScript コードは jQuery (これらの$(...)ステートメント) を使用しているため、インポートする必要があります。

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

2) HTML 要素 (本当のaudio「プレーヤー」) がありません:

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

3)コードは 2 曲しか再生しません。THREE をプレイするには:

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

4)コードは 3 つの曲を何度も再生します。停止するには:

audio[0].addEventListener('ended',function(e){
    current++;
    if(current < len){
      link = playlist.find('a')[current];   
      run($(link),audio[0]);
    }
});
于 2013-01-01T15:16:01.810 に答える