时间戳

首页 > 解决方案 > 为什么 Chrome 会在音频播放时请求 favicon？

javascript - 为什么 Chrome 会在音频播放时请求 favicon？

问题描述

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

它似乎也创建了很多垃圾内存。有没有办法防止这种情况？

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

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

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

document.getElementById('bounce').addEventListener('click', playSound, false);
<button id="bounce">Play</button>

标签： javascriptaudioweb-audio-api

解决方案

这似乎是 Chrome 中的一个已知错误，现在标记为“已修复”。但是，截至 2020 年 9 月 19 日，有人评论说这种情况仍在发生。

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

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

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

推荐阅读