HTML5 크로스 브라우저 재생 목록

Question

이 질문의 도움을 받아 Use of reference to calling object (this) using HTML5 audio and jQuery 내가 원하는 재생 목록을 얻었으므로 Crome 및 Safari에서 완벽하게 작동하지만 모든 브라우저에서 지원되지 않기 때문에 다른 브라우저에서는 재생되지 않습니다 mp3 파일. (테스트 된 IE와 FireFox, 재생되지 않는 오디오, 내 iPod으로 Safari 테스트 및 문제 없음) 그러나 mp3를 지원할 때 IE가 오디오를 재생하지 않는 것은 이상합니다.

jsFiddle

이것은 내가 위의 링크 된 질문을 편집 해낸 것입니다. 버튼에 다른 스타일을 제공하기 위해 jQuery를 통합하여 Youtube Play/Pause 버튼과 유사하게 보입니다. 여기 더 나은 예 : Playlist

나는이

this.next = function(){ 
    count++; 
     if(count == 2){count = 0;} 
    $('#uhh').attr('src', 'http://daokun.webs.com/play'+count+'.mp3'); 
    $('#uhh2').attr('src', 'http://daokun.webs.com/play'+count+'.ogg'); 
}; 

같은 오디오에서의 src 링크를 변경 jQuery를 사용하려고 그리고이에 <audio> 태그를 변경 :

<audio id="aud" autoplay autobuffer> 
    <source id="uhh2" src="http://daokun.webs.com/play0.ogg" type="audio/ogg" /> 
    <source id="uhh" src="http://daokun.webs.com/play0.mp3" type="audio/mpeg" /> 
</audio> 

것은 그것을 만드는 방법 crossbrowser하지만 노래가 변경된 후에는 <source> 태그의 src가 변경되지 않습니다. variabels을

this.next = function(){ 
count++; 
    if(count == 2){count = 0;} 
    uhh = 'http://daokun.webs.com/play'+count+'.mp3'; 
    uhh2 = 'http://daokun.webs.com/play'+count+'.ogg'; 
}; 

그리고 추가 :

나는이 같은 다음 기능을 편집하려고

var uhh = $('#uhh').attr('src'), 
    uhh2 = $('#uhh2').attr('src'); 

이 aswell 아직 아무것도 시도.

var uhh = document.getElementById('aud').firstChild, 
    uhh2 = document.getElementById('aud').lastChild; 

내가이로 편집 그래서 작동하지 않았다 :

var uhh = document.getElementById('uhh'), 
    uhh2 = document.getElementById('uhh2'); 

다음 기능에 : 두 <source> s의

this.next = function(){ 
    count++; 
     if(count == 2){count = 0;} 
    uhh.src = 'http://daokun.webs.com/play'+count+'.mp3'; 
    uhh2.src = 'http://daokun.webs.com/play'+count+'.mp3'; 
}; 

할당 아이디 (으음 및 uhh2)하지만 아무것도.

<source> 두 개의 src 링크가 변경된다는 소스 코드를 Chrome에서 확인했지만 문제는 리소스 탭을 확인하여 mp3 파일이 페이지에로드되지 않는다는 것입니다. <audio> 태그를 사용하는 동안 새 mp3 파일 만 페이지에로드되어 재생됩니다.

그래서 내가 잘못하고있는 것은 무엇입니까? 또는 작동하지 않는 상황이 발생 했습니까?

Answer 1

당신이 여기에서 많이하고있는 것처럼 보입니다. 나는 당신이 그것에 노력을 기울이는 것을 좋아합니다. 내가하지 않는 유일한 방법은 '이벤트 캡처'입니다.

$("#aud").addEventListener('ended', function(){ 
    this.currentTime=0; 
    this.next = function(){ 
    count++; 
    if(count == 2){count = 0;} 
    $('#uhh').attr('src', 'http://daokun.webs.com/play'+count+'.mp3'); 
    $('#uhh2').attr('src', 'http://daokun.webs.com/play'+count+'.ogg'); 
    }; 
}, false); 

그런 다음 추가 당신은 그와 이벤트의 '끝'을 포착 할 수 있어야한다 오디오 태그

<audio id="aud" autoplay autobuffer controls preload"> 

에 '프리로드를 제어합니다'. 나는 아직 가장 정통한 HTML5 전문가가 아니며, 지금은 약간의 시간을 보냈다.

어쨌든 위 예제와 같이 노래의 '끝'을 캡처 할 수 있도록 원하는 것을 얻을 수 있습니다.

HTML 5 Audio Loops