我正在使用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>这似乎是Chrome中的一个已知错误，现在标记为"已修复"。但是，截至2020年9月19日，有人评论说这种情况仍在发生。
一种可能的解决方法是在 HTMLhead中包含"假"图标。例如，下面的link元素：
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="data:,">
... Rest of your HTML ...
这会为网站图标分配一个空的数据网址，并且应该会阻止 Chrome 自动为其发送 HTTP 请求。
经过大量的研究、反复试验，我"开发"了一个可行的解决方案。
问题何时发生？
似乎每次播放音频时都会发生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);<button id="bounce">Play</button>