CODEWITHSUNDEEP
htmlaudio
Michael
Michael

Reputation: 1

several sources for html5 audio element outside of a DOM

I create html5 audio element outside of a DOM:

var audio = new Audio();

$(audio).attr('src', ogg_path);

but how I can use several different sources for different browsers? What about .attr('src', mp3_path) along with ogg_path?

in html I could write

And audio.has_many_sources. But in $(audio).attr('src') is an only src, not Array, alas, as far as I can see.

Thank you for help

Upvotes: 0

Views: 558

Answers (1)

Stoive
Stoive

Reputation: 11312

Don't use the source attribute to specify the audio file, rather use the source element.

So instead of the HTML being:

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

use:

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

For a quick (non-jquery) way of generating this:

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"]);

Upvotes: 1

Related Questions