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

Question

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

Html代码

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

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

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

js代码

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

请回答以下问题：

1. 为什么第二次获取请求被解雇。

2. 如何将此多个Get请求更改为单个Get请求。

注意：我使用的是firefox 44.0.2。

Answer 1

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

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

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