为什么 Chrome 会在音频播放时请求 favicon？答案

【问题标题】：Why does Chrome request favicon on audio playback?为什么 Chrome 会在音频播放时请求 favicon？
【发布时间】：2021-01-18 17:23:29
【问题描述】：

我正在使用Audio() 构造函数加载和播放音频文件。这在大多数浏览器中都可以正常工作，但每次调用 .play() 时，Chrome 似乎都会对该站点的 favicon 发出新的 GET 请求。无论文件类型如何，无论是本地文件、同一站点还是跨站点，似乎都会发生这种情况。

它似乎也创造了大量的垃圾内存。有没有办法防止这种情况发生？

打开 DevTools 并查看网络选项卡，同时单击下面示例中的按钮。

const bounce = new Audio('https://www.w3schools.com/graphics/bounce.mp3');

function playSound() {
    bounce.play();
}

document.getElementById('bounce').addEventListener('click', playSound, false);

&lt;button id="bounce"&gt;Play&lt;/button&gt;

【问题讨论】：

标签： javascript audio web-audio-api

【解决方案1】：

这似乎是 Chrome 中的 known bug，现在标记为“已修复”。但是，截至 2020 年 9 月 19 日，someone commented 仍在发生。

一种可能的解决方法是在 HTML 的 head 中包含一个“假”图标。例如下面的link 元素：

<!DOCTYPE html>
<html>
<head>
    <link rel="icon" href="data:,">
    ... Rest of your HTML ...

这会为网站图标分配一个空的数据 URL，并应防止 Chrome 自动为其发送 HTTP 请求。

【讨论】：

这解决了这个问题，但还有一个问题，如果我应该让我的游戏不那么好，因为一个浏览器中的一个错误，我没有为每个人提供网站图标。 Web 开发不再有趣了。
您可以尝试使用 base64 编码图标并在 href 中使用它而不是空的 data:,，类似于此解决方案：stackoverflow.com/a/5199989
base64 编码的网站图标是最好的折衷方案。谢谢你:)

【解决方案2】：

经过大量研究、反复试验，我“开发”了一个可行的解决方案。

问题何时发生？ 似乎favicon.ico 请求在您每次播放音频时都会发生，但实际上并非如此！仅在音频停止时才会发生，因此需要重新开始。如果它暂停则不会！

解决方案。 因此，您需要在音频播放到最后并自行停止之前暂停音频。

function play(audio) { // any normal instance of Audio element/tag
    audio.currentTime = 0;
    audio.play();
    setTimeout(() => audio.pause(), audio.duration * 999)
}

const bounce = new Audio('https://www.w3schools.com/graphics/bounce.mp3');

function playSound() {
    bounce.currentTime = 0;
    bounce.play();
    setTimeout(() => bounce.pause(), bounce.duration*999)
}

document.getElementById('bounce').addEventListener('click', playSound, false);

&lt;button id="bounce"&gt;Play&lt;/button&gt;

【讨论】：