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

У меня есть веб-приложение, которое должно воспроизводить несколько звуков. Приложение предназначено в первую очередь для мобильных устройств. В настоящее время я создаю элемент <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 и ждать загрузки нового источника; звуки должны быть загружены вместе со страницей.
Есть ли решение, подобное тому, что я написал выше, или мне следует придерживаться разных аудиоэлементов для разных звуков?
В качестве второстепенного вопроса: я беру производительность удар, определяя несколько аудиоэлементов?


javascript html html5-audio
person joelmdev    schedule 04.02.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

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

person noob    schedule 04.02.2012

arrow_upward
0
arrow_downward

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

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);
person earlonrails    schedule 13.05.2013