javascript - 从元素列表优化音频预加载

Question

我正在制作一个音板 Chrome 扩展程序，其中包含“myButtons”类的按钮。有了这个，我让我的 Javascript 查找具有该类的元素，获取它们的 id 并使用它从它们的 ID 中创建新的音频实例。 Chrome 扩展程序具有外部 js，必须位于 js 文件中，而不是在 html 文档本身中 扩展程序加载如此缓慢的原因是，在扩展程序的弹出窗口出现之前，必须加载所有 200 多个音频文件。我不知道如何关闭预加载以使我的扩展加载更快。问题是启动我的扩展最多需要 10 秒。当然，这根本不理想。

var audios = Array.prototype.map.call(document.getElementsByClassName("myButton"), function (el) {
var audio = new Audio();
audio.src = "mp3/" + el.id + ".mp3";
el.onclick = audio.play.bind(audio);
return audio;
});

我已经看到音频实例有一个预加载属性( https://developer.apple.com/documentation/webkitjs/htmlmediaelement/1633059-preload )，但是，我不确定如何用我当前的函数来实现它。

Answer 1

I need them to load when clicked. So I can have the extension load instantly. I don't mind the time it takes to load the individual audio files.

将 AudioNode 的 src 设置为指向 click 处理程序中媒体资源的 URL

var audios = Array.prototype.map.call(document.getElementsByClassName("myButton")
, function (el) {
    var audio = new Audio();
    var src = "mp3/" + el.id + ".mp3";
    el.onclick = function() {
                   audio.src = src;
                   audio.play();
                 };
    return audio;
});