停止<audio>标签中的音频缓冲。

Question

我目前正在使用HTML5音频播放器通过（移动）浏览器提供音频流（24/7的广播流）。加载流并播放正常运行。

主要问题是HTML5的<audio>标签即使不活跃也会继续下载（缓冲）内容。这对于大多数移动用户来说可能是一个主要问题，因为他们大多需要支付数据使用费用。到目前为止，我还没有能够找到一种有效的跨浏览器解决方案来防止这种情况发生。

我尝试过以下方法：

1. 在暂停时卸载源。< 这不适用于跨浏览器
   
2. 删除音频播放器元素并加载新元素。这样做虽然可行但，老实说，这是一种非常繁琐的执行极其简单任务的方法。

我只是想知道是否有什么地方我忽略了这个问题，因为我相信我不是唯一遇到这个问题的人。

- Ruben

---

我已经编辑了你的标题。请参考“问题的标题应该包含“标签”吗？”，在那里达成共识是“不应该”。 - John Saunders

我刚刚注意到，从DOM中删除元素并不总是分离资源。这意味着流仍在被下载。 - Ruben

@Ruben 完全正确，即使当前的DOM只显示一个播放器，浏览器仍然会缓存资源。我刚刚测试了一下，实现了一个Ajax shoutcast播放器，因为预加载和ajax而加载了我的流超过10次。如果您不使用“preload”，最好不要包含音频标签，除非您点击某些东西，例如一个小的播放器按钮;) - m3nda

Answer 1

<代码><audio>元素包括一个<代码>preload属性。这可以设置为“none”或“metadata”，这应该可以防止音频预加载。

来源：https://developer.mozilla.org/en/docs/Web/HTML/Element/audio

- Alistair Chisholm

---

这是最优雅的解决方案。将设置为“none”不会下载任何数据，而将设置为“metadata”会下载517kb的数据。我的测试针对的是voscast流。 - tim-phillips

这不仅优雅，而且是正确的方法。我像个新手一样试图将其设置为“false”：），但将其设置为“none”确实起作用了。你也可以将其设置为“auto”。如果您有流源和ajax页面，则会遇到很多问题。浏览器正在缓存音频对象，并且每次加载都会增加带宽使用量。 - m3nda

Answer 2

我为上述问题找到了可行的解决方案。详细描述请参见此处：https://dev59.com/Pm855IYBdhLWcg3w7pCg#13302599。

- Ruben

---

这不是一个好的解决方案，并且在Webkit（Chrome，iOS等）上会抛出错误。 - Artur Bodera

Answer 3

你可以采取以下措施停止缓冲加载错误：

var blob = new Blob([], {type: "audio/mp3"});
var url = URL.createObjectURL(blob);
audio.src = _url;

或者，缩短一下：

audio.src = URL.createObjectURL(new Blob([], {type:"audio/mp3"});

现在你不再加载一个空的“”URL，这是尝试加载的音频标签的错误URL。相反，你将加载一个由 Blob 制成的实际 URL，其中仅包含音频播放所需的数据。

- Gery Teague

---

在Firefox中出现错误：“无法解码媒体资源blob:http://localhost:4200/c68c796c-5af0-5343-a68d-9043c4c9b9a2。” 在Chrome中出现错误：“使用类型为“video/mp4”时，GET blob:http://localhost:4200/fec774b7-7680-48a9-927e-1926685da447 416（请求范围不符合要求）。” - Petr Marek