<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 声音，因为这应该展示纯 Web 技术。

所以基本上我有一个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!');
    });

Answer 2

我用 WebGL 和一些声音标签做了一个小型 PONG 游戏。我从 Opera 的 Emberwind HTML5 实现中借用了音频实现：https://github.com/operasoftware/Emberwind/blob/master/src/Audio.js

他们的解决方案对我来说效果很好（Chrome、Opera 和 Firefox）。也许你会感兴趣？他们有一些代码会尝试从第 22 行及以下找到可播放的格式。