正确加载<audio>

Question

我一直在四处寻找,我开始担心这是不可能的.
有没有办法制作<audio>带有后备的标准标签......

<audio>
    <source src='song.ogg' type='audio/ogg'></source>
    <source src='song.mp3' type='audio/mp3'></source>
</audio>

...有一个onload事件.我环顾四周,所有我能找到的是一些可能会或可能不起作用的黑客(它们不适合我在Chrome上)和canplaythrough活动.
我想要这个的原因是因为我正在制作一个包含大量音频片段的演示文稿.我不希望演示文稿在加载所有音频之前开始(否则事情可能会失去同步).我希望一次加载1个剪辑,这样我就可以创建一种加载条.我真的不想使用Flash声音,因为这应该是演示纯网络技术.

所以基本上我有一个loadAudio循环通过要加载的音频文件数组的函数audioQueue.loadAudio被调用一次然后调用自己,直到所有文件都被加载.问题是我没有找到正确的事件来触发加载下一个文件.

loadAudio = function(index)
{
mer = audioQueue[index];
var ob = "<audio id='" + mer + "'><source src='resources/sounds/" + mer + ".ogg' type='audio/ogg'></source><source src='resources/sounds/" + mer + ".mp3' type='audio/mp3'></source></audio>";
$("#audios").append(ob);
$("#" + mer).get(0).addEventListener('A WORKING EVENT RIGHT HERE WOULD BE NICE', function() { alert("loaded"); 
     if (index + 1 < audioQueue) { loadAudio(index + 1); } }, false);
}

所以.是否有机会进行适当的音频上传？我基本上愿意做任何事情,只要它仍然是所有的HTML和Javascript.

Answer 1

您可以使用loadeddata- MediaEvent.例如,您可以将所有音频文件放在一个数组中,并执行以下操作:

var files = ['a.mp3', 'b.mp3'];

$.each(files, function() {
    $(new Audio())
        .on('loadeddata', function() {
            var i = files.indexOf(this);
            files.splice(i, 1);
            if (!files.length) {
                alert('Preloading done!');
            }
        })
        .attr('src', this);
});

编辑:截至2016年,这将是一个更现代的方法:

var files = ['a.mp3','b.mp3'];

Promise
    .all(files.map(function(file) {
        return new Promise(function(resolve) {
            var tmp = new Audio();
            tmp.src = file;
            tmp.addEventListener('loadeddata', resolve);
        });
    })).then(function() {
        alert('Preloading done!');
    });