JavaScript를 통해 소스가 채워질 때 Html5 오디오가 사파리에서 재생되지 않습니다.

Question

Rails 앱에서 재생 목록을 만들고 Safari에서 오디오를 재생하는 데 문제가 있습니다. html5 오디오 요소의 소스가 하드 코딩 된 경우 Safari에서는 정상적으로 재생되지만 자바 스크립트를 통해 채워지면 재생되지 않습니다. Chrome과 IE에서는 정상적으로 작동하지만 Safari에서는 정상적으로 작동하지 않습니다. 여기

재생 목록 항목에 대한 루비입니다 :

.playlist_column 
    -@music_posts.each do |post| 
    .entry{:id => post.id, :data => {:post_id => post.id, :source => post.mp3.url}} 

을 여기에 첫 번째 트랙의 소스와 함께 미리로드 된 오디오 요소입니다 : 여기

.playlist_player 
    %audio{:controls => "controls", :id => @music_posts.first.id} 
    %source{:src => @music_posts.first.mp3.url, :type => "audio/mp3"} 

자바 스크립트입니다 :

$(".entry").click(function(){ 
    var current_entry = $(this); 
    var this_track = current_entry.data("source"); 
    var audio = $("audio").get(0); 
    var audio_source = $("audio source"); 

    audio_source.attr("src", this_track); 
    audio.load(); 
    audio.play(); 

}); 나는 사파리에서 오디오 요소를 검사 할 때

, 그것은 적절한 소스, 정확히이해야 다음과 같습니다

<audio controls="controls" id="7"> 
    <source src="http://s3.amazonaws.com/blog/posts/5/song/07%20-%20Young%20Blood.mp3?1328052011" type="audio/mp3"> 
</audio> 

그러나이 재생되지 않습니다 내가, 어떤 아이디어 오류가 표시되지 않는 건가요? 미리 감사드립니다.

Answer 1

체크 아웃 src attribute on an existing source element의 HTML 사양 :

참고 : 요소가 이미 영향을주지 않습니다 비디오 또는 오디오 요소에 삽입 될 때 동적으로 소스 요소와 속성을 수정합니다. 재생중인 내용을 변경하려면 media 요소의 src 속성을 직접 사용하십시오. 사용 가능한 자원 중에서 선택할 수있는 canPlayType() 메소드를 사용하고있을 수 있습니다. 일반적으로, 문서가 파싱 된 후 소스 요소를 수동으로 조작하는 것은 불필요하게 복잡한 접근법입니다.

당신은 (이론적으로) 오디오 파일 형식을 재생할 것을 알고 있기 때문에, 당신은 단지

var audio = $("audio").get(0); 
audio.src = this_track; 
audio.load(); 
audio.play(); 

난 그냥 사파리에서 제대로 작동하려면 나타납니다 테스트 할 수 있습니다.

Answer 2

type => "audio/mpeg" 

해결해야합니다. 제안 - 오디오 요소에 id를주고 태그 이름 대신 jQuery에서 사용하십시오.