2012-02-23 2 views
19

다른 솔루션을 하나만 발견했지만 불완전하여 여기 도움이 필요합니다.jquery 및 HTML5 오디오 태그가있는 오디오 소스를 전환하십시오.

나는 오디오가 설정 한 :

<audio id="player" controls="controls"> 
      <source id="ogg_src" src="lib/audio/barger01.ogg" type="audio/ogg" /> 
      <source id="mp3_src" src="lib/audio/barger01.mp3" type="audio/mp3" /> 
      Your browser does not support the audio element. 
    </audio> 

나는 트랙 변경 링크를 동적으로 생성 된 테이블이 :

<div id="audio_list"> 
    <a href="#" class="track" data-location="http://www.newoggtrack.ogg">sample</a> 
</div> 

을 내가 어떻게 할 수있는 단서가 없다이 jQuery를 가지고 함께 트랙을 변경하려면

$('.track').click(function(){ 

    load_track = $(this).attr('data-location');//gets me the url of the new track 

    change_track(load_track);// function to change the track of the loaded audio player without page refresh preferred... 

}); 

이 기능을 발견했지만 올바른 방법으로 사용하지 않습니다.

function change_track(sourceUrl) { 

     audio.empty(); 
     $("#ogg_src").attr("src", sourceUrl).appendTo(audio); 
     /****************/ 
     audio[0].pause(); 
     audio[0].load();//suspends and restores all audio element 
     /****************/ 
    } 

audio = $("<audio>").attr("id", "player") 
         .attr("preload", "auto"); 
+2

무엇이 문제입니까? 시도하고 전환하면 어떻게됩니까? 오류가 있습니까? 그리고'function change()'가있는 코드는 직접 복사하여 붙여 넣을 수 있습니까? 아니면 여러분이 꺼낸 코드 조각입니까? – Ktash

+0

변경 기능은 내가 찾은 것이지만 작동하지 않습니다. 이제 오류가 발생합니다. –

+1

오류 게시. 무엇이 잘못되었는지 사람들이 당신을 도울 것이라고 어떻게 기대합니까? – bububaba

답변

59

귀하의 변경 기능은 다음과 같이해야합니다 :

function change(sourceUrl) { 
    var audio = $("#player");  
    $("#ogg_src").attr("src", sourceUrl); 
    /****************/ 
    audio[0].pause(); 
    audio[0].load();//suspends and restores all audio element 

    //audio[0].play(); changed based on Sprachprofi's comment below 
    audio[0].oncanplaythrough = audio[0].play(); 
    /****************/ 
} 

문제점이 audio.empty()와 오디오 VAR했다. 비어있는 오디오 태그를 추가하려고 시도했지만 오디오 태그를 다시 브라우저에 쓰지 않았습니다.

+0

도움 주셔서 감사합니다. 그것은 내가하고있는 일을 정리하고 매력처럼 작동합니다. 나는 현상금을 올바르게 수여했으면한다. –

+0

내 문제가 해결되었습니다. load() 메서드를 사용해야하는 것 같습니다. 그렇지 않으면 DOM을 업데이트하더라도 HTML 플레이어가 실제로 사운드를로드하지 않습니다. 감사! – Shahar

+1

audio = $ ("# player") –

5

'change'가 이미 jQuery 유니버스의 함수이기 때문에 함수의 이름을 바꿀 수도 있습니다.