Элемент <audio> вообще не работает в Safari
Я пытаюсь добавить музыку в приложение виртуального тура, которое пишу на JS и jQuery, и пока мой код, показанный ниже, прекрасно работает в Chrome, FF, IE9 и Opera. Но в Safari 5.1.7, которая является новейшей для Windows-машины, она просто не работает ... Благодаря моему исследованию проблемы я знаю, что Safari не воспроизводит музыку автоматически, и ее нужно запустить вручную, но когда я нажимаю кнопку воспроизведения, ничего не происходит. И, между прочим, инспектор кода в Safari показывает, что мой аудио-тег присутствует в источниках музыки, поэтому я не думаю, что он имеет какое-либо отношение к DOM. Есть идеи по моей проблеме?
HTML:
<div id="musicBtns">
<p>Music:</p>
<p id="musicPlayBtn">Play</p>
<p>/</p>
<p id="musicPauseBtn">Pause</p>
</div>
Мой музыкальный объект в JS:
var Music =
{
musicBtns: $('#musicBtns'),
playBtn: $('#musicPlayBtn'),
pauseBtn: $('#musicPauseBtn'),
isPlaying: false,
init: function()
{
if(!music.includeMusic) // If the client didn't want any music in the tour app, remove the music btns from the DOM
{
this.musicBtns.remove();
}
else // Else, setup the audio element
{
var parent = this;
var audio = $('<audio loop="true">');
if(music.autoplay)
{
audio.attr('autoplay', 'autoplay');
this.isPlaying = true;
this.togglePlayPause();
}
// Add a source elements and appends them to the audio element
this.addSource(audio, music.ogg); // 'music.ogg' is a reference to the path in a JSON file
this.addSource(audio, music.mp3);
this.musicBtns.append(audio);
// Add event listeners for the play/pause btns
this.playBtn.click(function()
{
audio.trigger('play');
parent.isPlaying = true;
parent.togglePlayPause();
});
this.pauseBtn.click(function()
{
audio.trigger('pause');
parent.isPlaying = false;
parent.togglePlayPause();
});
}
},
addSource: function(el, path)
{
el.append($('<source>').attr('src', path));
},
// Add or remove classes depending on the state of play/pause
togglePlayPause: function()
{
if(this.isPlaying)
{
, this.playBtn.addClass('underline');
this.pauseBtn.removeClass('underline');
}
else
{
this.playBtn.removeClass('underline');
this.pauseBtn.addClass('underline');
}
}
}
Редактировать: Может ли это быть ошибкой в Safari?