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