Html5 аудио не воспроизводится в сафари, если источник заполнен с помощью JavaScript - PullRequest
Новая
       0

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

2 голосов
/ 14 февраля 2012

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

Вот код 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 controls="controls" id="7">
  <source src="http://s3.amazonaws.com/blog/posts/5/song/07%20-%20Young%20Blood.mp3?1328052011" type="audio/mp3">
</audio>

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

Ответы [ 2 ]

1 голос
/ 14 февраля 2012

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

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

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

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

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

0 голосов
/ 14 февраля 2012 
type => "audio/mpeg"

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

...