JavaScriptでソースが埋め込まれていると、Html5のオーディオがサファリで再生されない

Question

私はRailsアプリでプレイリストを作成していますが、Safariでオーディオを再生する際に問題が発生しています。 html5オーディオ要素のソースがハードコーディングされている場合、Safariでは正常に再生されますが、javascriptを使用して入力されると再生されません。 ChromeとIEではうまく動作しますが、Safariではうまく動作しません。ここで

は、Rubyは、プレイリストのエントリにある：

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

、ここでは、最初のトラックのソースがプリロードaudio要素、次のとおりです。ここで

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

ではJavaScriptです：

$(".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(); 

}）;

私はSafariでオーディオ要素を検査するとき、それは適切なソースで、まさにそれが必要のようになります。

<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の仕様をチェックアウト：

注：エレメントはすでにビデオやオーディオの要素に挿入されたときに動的にソース要素とその属性を変更しても効果はありません。再生しているものを変更するには、メディア要素のsrc属性を直接使用してください。おそらくcanPlayType（）メソッドを使用して、利用可能なリソースの中から選択します。一般に、文書が解析された後に手動でソース要素を操作することは、不必要に複雑なアプローチです。

あなたは（理論上は）オーディオファイルの種類が再生可能であることを知っているので、あなただけの

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

私はSafariで、正常に動作するように見えるというテストを行うことができます。

Answer 2

type => "audio/mpeg" 

これで解決します。提案 - オーディオ要素のidを与えて、タグ名の代わりにjQueryで使用してください。