javascript - HTML5音频元素发送2次http get请求

Question

我可以使用HTML文件访问具有135KB音频数据的音频元素。(使用apache服务器)

HTML代码

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

当我访问HTML页面时，将触发状态为206的1个Http Get请求(请求范围:字节= 0-)

我的问题是，当我尝试播放Js文件中的音频时，又一次触发了状态为206的请求。(请求范围:字节= 16044-)

js代码

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

请回答以下问题:

为什么第二次获取请求被触发。

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

注意:我正在使用firefox 44.0.2。

Answer 1

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

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

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