为什么 Chrome 请求音频播放图标？

Question

我正在使用 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>

Answer 1

这似乎是 known bug in Chrome that is now marked as "fixed". However, as of September 19, 2020, someone commented 并且仍在发生。

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

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

这会将空数据 URL 分配给网站图标，并且应该会阻止 Chrome 自动为其发送 HTTP 请求。

Answer 2

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

什么时候出现问题？ 似乎每次播放音频时都会发生favicon.ico请求，但实际上不一定！如果音频停止，它会发生 ONLY，因此需要重新开始。如果它暂停了就不会！

解决方案。 所以你需要的是在音频播放到最后并自行停止之前暂停它。

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>

为什么 Chrome 请求音频播放图标？

Why does Chrome request favicon on audio playback?

javascript

audio

web-audio-api