javascript - 的正确加载

Question

我环顾四周，开始担心这不可能。
有没有办法做一个标准<audio>带有后备标签...

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

...有一个 onload 事件。我环顾四周，我所能找到的只是一些可能有效或无效的技巧(它们在 Chrome 上不适合我)和 canplaythrough事件。
我想要这个的原因是因为我正在做一个有很多音频剪辑在某些点播放的演示文稿。我不希望在加载所有音频之前开始演示(否则可能会不同步)。我希望一次加载一个剪辑，这样我就可以创建一种加载栏。我真的不想求助于使用 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!');
    });