HTML5/자바 스크립트 오디오 재생 목록

-1

블로그 게시물 HTML5 Audio and Video and how to make a playlist에서 HTML5와 자바 스크립트를 사용하여 재생 목록을 만드는 방법에 대한 훌륭한 자습서를 찾았습니다. 지시를 따랐지 만 정확한 결과를 얻지 못했습니다.HTML5/자바 스크립트 오디오 재생 목록

이 코드는 세 개의 오디오 파일을 모두 순서대로 재생해야하며 마지막 노래가 끝날 때 중지해야하지만 첫 번째 파일이 자동 재생되면 첫 번째 파일이 완료되면 중지됩니다. 나는 무엇을 잘못 했는가?

<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) 자바 스크립트 코드가 수입해야하므로, 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을 제거한 것은 하나지만 여전히 두 트랙 만 재생합니다 .... sugesgtions? – codenamejupiterx

사파리 6으로 업그레이드했을 때 내 브라우저 사파리 5였습니다. 매력처럼 작동했습니다. Juan에게 감사드립니다 !!!! – codenamejupiterx

-1

을 나는 다음과 같은 컨트롤을 사용하여이를 달성 할 jQuery를 사용하여. 자바 스크립트에서

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

을 그리고 :

는 다음과 같은 매개 변수를 사용하여 오디오 제어 태그를 추가

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

스크립트는 DOM ('#npAction','#npTitle')에 대한 가정뿐만 아니라이 범위 ('Books','authors','subject')에 정의되지 않은 변수에 대한 참조로 가득합니다. 다른 사람들에게 도움이된다면 훨씬 더 많은 설명이 필요합니다. –

HTML5/자바 스크립트 오디오 재생 목록

답변

관련 문제