HTML5 настройка аудио источника в JavaScript не работает - PullRequest
11 голосов
/ 28 октября 2011

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

Это мой 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 в аудио, потому что мне нужна поддержка отката, а также мне нужен динамизм.1006 *

Используя 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>

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

Ответы [ 3 ]

14 голосов
/ 28 октября 2011

Использование .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 голосов
/ 28 октября 2011

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

0 голосов
/ 28 октября 2011

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...