Аудио Html5 не будет воспроизводиться в сафари, если источник заполняется через JavaScript

Я создаю список воспроизведения в своем приложении Rails, и у меня возникают проблемы с воспроизведением звука в Safari. Если источник аудиоэлемента html5 жестко закодирован, он отлично воспроизводится в сафари, но когда он заполняется с помощью 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}}

а вот аудиоэлемент, предварительно загруженный с исходным кодом первой дорожки:

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

});

Когда я проверяю элемент audio в сафари, он выглядит точно так, как должен, с правильным источником:

<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>

Но он не воспроизводится, и я не вижу никаких ошибок, каких-либо идей? Заранее спасибо.


javascript html5-audio ruby-on-rails-3.1
person dcaccavano    schedule 14.02.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Ознакомьтесь со спецификацией HTML для атрибут src существующего исходного элемента:

Примечание. Динамическое изменение исходного элемента и его атрибута, когда элемент уже вставлен в видео- или аудиоэлемент, не будет иметь никакого эффекта. Чтобы изменить то, что воспроизводится, просто используйте атрибут src непосредственно в медиа-элементе, возможно, используя метод canPlayType() для выбора среди доступных ресурсов. Как правило, манипулирование исходными элементами вручную после того, как документ был проанализирован, является излишне сложным подходом.

Поскольку вы (теоретически) знаете, что тип аудиофайла можно воспроизвести, вы можете просто сделать

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

Я только что проверил это в Safari, и, похоже, он работает правильно.

person Brendan Kenny    schedule 14.02.2012
comment
Спасибо! Это помогло. Поскольку я все еще развиваю свои навыки программирования, я ценю помощь. Непосредственная установка источника сработала в Safari, хотя Chrome и IE в обратном порядке работали хорошо. - person dcaccavano; 14.02.2012

arrow_upward
0
arrow_downward 

type => "audio/mpeg"

Это должно исправить это. Предложение - укажите идентификатор для аудиоэлементов и используйте его в jQuery вместо имени тега.

person Diode    schedule 14.02.2012