html - DOM之外的html5音频元素的多个来源

Question

我在DOM外部创建html5音频元素:

var audio = new Audio();

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

但是如何在不同的浏览器中使用几种不同的来源？那么.attr('src'，mp3_path)和ogg_path呢？

在HTML我可以写




还有audio.has_many_sources。但是据我所知，在$(audio).attr('src')中只有一个src，而不是Array。

谢谢你的帮助

Answer 1

不要使用source属性指定音频文件，而要使用source element。

因此，代替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"]);