HTML5 Audio 元素发送 2 次 http get 请求答案

【问题标题】：HTML5 Audio element sends 2 times http get requestHTML5 Audio 元素发送 2 次 http get 请求
【发布时间】：2016-06-06 12:41:05
【问题描述】：

我可以访问 HTML 文件中包含 135KB 音频数据的音频元素。（使用 apache 服务器）

HTML 代码

 <audio id="ring" src="Ring.wav" loop></audio>

当我访问 HTML 页面时，触发了 1 个状态为 206 的 Http Get 请求。（请求范围：字节=0-）

我的问题是当我尝试从 Js 文件播放该音频时，再次获取状态为 206 的请求。（请求范围：字节 = 16044-）

js代码

 var ring = document.getElementById("ring");
 ring.play();

请回答我以下问题：

注意：我使用的是 firefox 44.0.2。

【问题讨论】：

【解决方案1】：

从doc，我了解到206 用于部分内容加载，我的猜测是最初加载页面时，它只会检查源文件是否存在，因此是第一次调用。但是当你第一次播放它时，实际文件被加载，因此第二次206 调用。如果您希望整个文件在页面加载时加载，您可以添加属性preload，html 标记类似于：

<audio id="ring" src="Ring.wav" loop preload></audio>

但我不确定这是否可取（除非所有用例都需要此音频文件），因为每当有人加载页面时，都会下载该文件，这会不必要地增加服务器负载。

【讨论】：