javascript – 如何强制在运行时加载媒体,而不是现在播放？

我正在制作一个可以打开很长时间的网络应用程序.我不想在加载时加载音频(当 HTML被下载和解析时)以尽可能快地进行第一次加载并为移动用户节省宝贵的资源.默认情况下禁用音频.
将音频放入CSS或使用预加载在这里是不合适的,因为我不想在加载时加载其余部分.

我正在寻找一种理想的方法来在运行时加载音频,(在选中复选框之后,这可以在打开应用程序后20分钟之后)给出一个音频元素列表.

该列表已经在变量allSounds中.我在网页上有以下音频(还有更多)：

<audio preload="none">
  <source src="sound1.mp3">
 </audio>

我想保留相同的HTML,因为在第二次访问后我可以轻松地将其更改为(这与我的服务器端HTML生成一起工作正常)

<audio preload="auto">
  <source src="sound1.mp3">
 </audio>

它的工作原理.

打开选项后,我想加载声音,但不要立即播放.我知道.play()会加载声音.但我想避免按下按钮和相关反馈声音之间的延迟.
最好不要播放声音而不是延迟(在我的应用程序中).

我制作了这个事件处理程序来加载声音(它可以工作),但在Chrome控制台中,它说下载已取消,然后重新启动我不知道我到底做错了什么.
这是强制加载声音的正确方法吗？还有什么其他方法？如果可能,不更改HTML.

let loadSounds = function () {
  allSounds.forEach(function (sound) {
    sound.preload = "auto";
    sound.load();
  });
  loadSounds = function () {}; // Execute once
};

这里是playSound函数,但对于这些问题不是很重要

const playSound = function (sound) {
  // PS
  /* only plays ready sound to avoid delays between fetching*/
  if (!soundEnabled)) {
    return;
  }
  if (sound.readyState < sound.HAVE_ENOUGH_DATA) {
    return;
  }
  sound.play();
};

附带问题：HTML规范中是否应该有preload =“full”？

也可以看看：
Preload mp3 file in queue to avoid any delay in playing the next file in queue

how we can Play Audio with text highlight word by word in angularjs

解决方法

要缓存音频,需要对你的MP3文件进行Base64编码,然后用数据启动Base64编码的MP3文件：audio / mpeg; base64,
然后你可以使用类似的东西用css预加载/缓存文件：

body::after {  
  content:url(myfile.mp3);
  display:none;
}