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!');
    });

Answer 2

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

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

正确加载<audio> </audio>

2 个答案: