Несколько звуков с одним HTML5 аудиоэлементом - PullRequest
Новая
       0

Несколько звуков с одним HTML5 аудиоэлементом

3 голосов
/ 04 февраля 2012

У меня есть веб-приложение, которое должно воспроизводить несколько звуков. Приложение предназначено в основном для мобильных устройств. В настоящее время я создаю элемент <audio> для каждого нужного мне звука и запускаю метод play() для каждого из них с помощью JavaScript. Я бы предпочел, чтобы все звуки были в одном аудиоэлементе, каждый из которых имеет свой источник, что-то вроде: 

<audio controls="controls" preload="auto" id="audioPlayer">
    <source src="click1.ogg" type="audio/ogg" />
    <source src="click2.ogg" type="audio/ogg" />
</audio>

и запускать каждый источник, вызывая что-то вроде .play("click1.ogg").

Я не могу позволить себе изменить источник с помощью JavaScript и ждать загрузки нового источника; звуки должны быть загружены вместе со страницей.
Есть ли решение, подобное тому, что я написал выше, или я должен придерживаться разных аудио элементов для разных звуков?
В качестве дополнительного вопроса, беру ли я удар по производительности, определяя несколько звуковых элементов?

Ответы [ 2 ]

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

Вы должны использовать разные аудиоэлементы.Исходные теги в аудио элементе сделаны из-за совместимости браузера и системы.Он автоматически выберет формат, предоставляемый браузером и системой (ogg, mpeg, avi или wmv).

На второй вопрос ... Вы не получаете удар по производительности, потому что всего один источникисточники в аудиоэлементе будут загружены.

0 голосов
/ 14 мая 2013

Я проголосовал за микрофон, потому что это хороший ответ!Вот пример того, как я сделал то, что он предложил.

http://jsfiddle.net/earlonrails/tTF89/6/

html 

<audio controls="controls" width="300px" id="audioPlayer">
    <!-- load broken audio -->
    <source type="audio/mpeg" src="http://www.google.com/4/0/4" />
</audio>

javascript 

var urlOne = 'http://www.tonycuffe.com/mp3/tail%20toddle.mp3',
    urlTwo = 'http://freeplaymusic.com/search/download_file.php?id=4&dur=0&type=mp3';

function attrs(element, attributes) {
    for (var prop in attributes) {
        element.setAttribute(prop, attributes[prop]);
    }
}

function reloadAudioTag(path, player, holder) {
    if (player) player.parentNode.removeChild(player);

    var player = document.createElement('audio'),
        source = document.createElement('source');

    source.type = "audio/mpeg"
    attrs(player, {
        "width": "300px",
            "controls": "controls",
            "autoplay": "autoplay",
            "id": 'audioPlayer'
    });
    player.appendChild(source);
    if (holder) {
        holder.insertBefore(player, holder.childNodes[0]);
    } else {
        document.body.appendChild(player);
    }
    source.src = path;
    player.load();
    return player;
}

console.log("called!");
reloadAudioTag(urlOne, document.getElementById("audioPlayer"));
console.log("Still going!");
setTimeout(function () {
    reloadAudioTag(urlTwo, document.getElementById("audioPlayer"));
    console.log("Finished!");
}, 5000);
...