HTML5/JavaScript音頻播放列表

-1

我發現了一篇很好的教程，介紹如何在博客文章中使用HTML5和JavaScript構建播放列表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>

來源

2013-01-01 codenamejupiterx

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]); 
    } 
});

來源

2013-01-01 15:16:01

感謝胡安!!!!但有一件事我從len = track.length行刪除了-1，但它仍然只播放兩個曲目....任何消費者？ – codenamejupiterx

這是我的瀏覽器safari 5，當我升級到safari 6時，它像一個魅力一樣工作。謝謝胡安！ – codenamejupiterx

-1

使用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); 
     }); 
    } 
});

來源

2013-10-23 09:02:47

這是[你的這個其他答案的確切副本]（http://stackoverflow.com/questions/18035392/control-multiple-html5-audio-tracks-using-a-single-controller/19537548#19537548）。 – hexafraction

您的腳本中充滿了對此範圍（'Books'，'authors'，'subject'）中未定義的變量的引用以及有關DOM（'#npAction'，'＃npTitle'）的假設。如果這對他人有幫助，這需要更多的解釋。 –

HTML5/JavaScript音頻播放列表

回答

相關問題