несколько источников для аудио-элемента html5 вне DOM

Question

Я создаю html5 аудио элемент вне DOM:

var audio = new Audio ();

$ (аудио) .attr ('src', ogg_path);

но как я могу использовать несколько разных источников для разных браузеров? Как насчет .attr ('src', mp3_path) вместе с ogg_path?

в HTML я мог бы написать

И audio.has_many_sources. Но в $ (audio) .attr ('src') - единственный src, а не Array, увы, насколько я вижу.

Спасибо за помощь

Answer 1

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

Таким образом, вместо HTML:

<audio src='/path/to/audio.ogg' />

использование:

<audio>
    <source src='/path/to/audio.ogg' type='audio/ogg' />
    <source src='/path/to/audio.mp3' type='audio/mpeg' />
</audio>

Для быстрого (не jquery) способа генерирования этого:

function createAudio(sources) {
    var audio = document.createElement('audio');
    for (var i in sources) {
        var source = document.createElement('source');
        source.src = sources[i];
        source.type = sources[i].match(/ogg$/) ? 'audio/ogg' : 'audio/mp3';
        audio.appendChild(source);
    }
    return audio;
}

var yourNewAudioElement = createAudio(["/path/to/audio.ogg", "/path/to/audio.mp3"]);