HTML5 настройка источника звука в javascript не работает

Из-за трюков форматов браузера HTML5 я должен поставить резервные аудиоформаты также в аудиоформате. Я хочу установить src источника в аудио программно, но он не работает.

Это мой HTML-код:

<audio id="audioPlayer" width="400" height="30" controls="controls">        
    <source id="oggSource" type="audio/ogg" />
    <source id="mp3Source" type="audio/mp3" />
</audio>

Затем в javascript с использованием jquery я устанавливаю источник для каждого из них (у меня есть один звуковой тег и много mp3 на странице и на основе какого-то события я хочу изменить источник звукового тега), поэтому я не могу напрямую указать src в аудио в основном потому, что мне нужна поддержка резервного копирования, а также мне нужен динамизм.

Использование jquery Я управляю src:

$('#oggSource').attr('src', 'OggFormat.ogg');
$('#mp3Source').attr('src','Mp3Format.mp3');

Но это, однако, не работает. Любая идея почему?

Если я использую:

<audio id="audioPlayer" width="400" height="30" controls="controls">        
    <source id="oggSource" type="audio/ogg" src="OggFormat.ogg" />
    <source id="mp3Source" type="audio/mp3" src="Mp3Format.mp3"/>
</audio>

он работает, но поскольку мне нужно, мне нужно установить его в код и не предоставлять статически.

Ответ 1

Использование .detach().appendTo(parent) похоже работает: http://jsfiddle.net/pimvdb/b7Jgh/.

$("#oggSource").attr("src", "foo.ogg").detach().appendTo("#audioPlayer");

Я думаю, браузер начинает загрузку (и играет с autoplay), если добавлен элемент <source>, а не когда он только что изменен. Однако я не знаю, почему, но добавив его после отсоединения.

Изменить: Вы также можете непосредственно сделать .appendTo, поскольку элемент уникален (т.е. он должен быть отсоединен в любом случае): http://jsfiddle.net/pimvdb/b7Jgh/6/.

function updateSource(source, src) {
    source = $(source);
    source.attr("src", src).appendTo(source.parent());
}

Ответ 2

После того, как вы установите атрибут src в исходном элементе, вызовите load(), а затем play() на аудиоэлементе. (Или просто load(), если у вас установлен атрибут автовоспроизведения.)

Ответ 3

Вы пробовали document.getElementById("oggSource").src = 'OggFormat.ogg' и т.д.?