使用 Audio 对象中的 <link rel="preload"> 预加载音频（即 html 中没有音频标签）答案

【问题标题】：Preload audio with <link rel="preload"> from Audio object (i.e. no audio tags in html)使用 Audio 对象中的 <link rel="preload"> 预加载音频（即 html 中没有音频标签）
【发布时间】：2020-07-22 18:08:25
【问题描述】：

在我的js 中，我创建了一个Audio 对象，用于播放/暂停多个音频文件。我想知道是否以及如何预加载存在于 /audio 文件夹中的文件，而无需在 HTML 中插入任何 <audio> 元素。

我试过 <link rel="preload" href="/audio/file.mp3" as="audio"> 但 Chrome 给了我这个警告： “link rel=preload 必须有一个有效的 as 值”。

我还尝试将media（而不是audio）放在as 属性中。同样的警告。

我做错了什么？

【问题讨论】：

说...你找到解决这个错误的方法了吗？
这种情况下的预加载会自动设置为自动。 “这个价值在移动平台上经常被忽略。” （MDN），但就我而言，这正是我想要的。检查这个答案：stackoverflow.com/questions/54797249/… 最终我从头部删除了链接标签，该应用程序对我来说工作得很好。

标签： audio hyperlink preload head

【解决方案1】：

您必须像这样使用“as”属性添加样式：

这会处理 rel="stylesheet" 中已被 preload 替换的样式表。

【讨论】：

【解决方案2】：

希望这个答案很快就会过时，但是当我查看官方文档 (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) 时，我发现“预加载”对 Chrome 和 Safari 的支持存在问题。我们都看到的警告可能是由于 Chrome/Safari 正在识别“preload”标签，但没有将“audio”（或您使用的任何内容）识别为“as”标签的有效值。

【讨论】：