我正在使用Audio()构造函数加载和播放音频文件。这在大多数浏览器中都可以正常工作,但是每次调用.play()时,Chrome似乎都会对网站的图标发出新的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>

最佳答案

这似乎是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请求。

10-02 00:19