在<audio>标记中停止音频缓存

我目前正在使用HTML5音频播放器通过（移动）浏览器提供音频流（24/7无线电流）。在流中加载并播放它可以正常工作。在<audio>标记中停止音频缓存

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

我试过到目前为止：

卸载源按下暂停时。 <这不起作用跨浏览器
删除音频播放器元素并加载一个新的。这可以工作，但让老实说，这是一个非常hacky的方式执行一个非常简单的任务。

我只是想知道在这个问题中是否有一些我忽略了，因为我确信我不是唯一有这个问题的人。

来源

2012-11-06 Ruben

我编辑了你的标题。请参阅：“[应该在其标题中包含”标签“]（http://meta.stackexchange.com/questions/19190/）”，其中的共识是“不，他们不应该”。 –

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

@Ruben完全可以，即使当前的DOM只显示1个播放器，浏览器仍然会缓存资源。我刚刚测试了一下，实现了一个Ajax shoutcast播放器，它加载了我的流10次以上，因为preload和ajax。如果您不使用“预加载”。如果你不包括音频标签，如果你没有包含音频标签，例如一个小小的播放器按钮就更好;） – erm3nda

我发现了上述问题的可行解决方案。一个细节的描述可以在这里找到：https://stackoverflow.com/a/13302599/1580615

来源

2012-11-09 05:39:54 Ruben

这不是一个好的解决方案，并且会在webkit（chrome，ios等）上抛出错误 –

你可以做以下停止缓冲负载没有错误：

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

，或者缩短了起来：

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

现在你不加载一个“”，这是音频标签尝试加载的不良网址。而是加载一个由Blob创建的实际url，该实际url仅包含要播放音频的数据。

来源

2016-02-25 04:35:32

err在firefox中： “媒体资源blob：http：// localhost：4200/c68c796c-5af0-5343-a68d-9043c4c9b9a2无法解码。” 当使用type：“video/mp4”时，err chrome：“GET blob：http：// localhost：4200/fec774b7-7680-48a9-927e-1926685da447 416（Requested Range Not Satisfiable）” –

<audio>元素包括preload属性。这可以设置为“无”或“元数据”，这将防止音频预加载。

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

来源

2016-04-22 11:20:52

这是最优雅的解决方案。设置为“无”下载没有数据，并设置为“元数据”下载517kb的数据。我的测试是针对一个voscast流。 – Rohmer

它不仅是优雅的，它是它的方式。我试图将它设置为“假”，如noob :)，将其设置为“无”工作。 U也可以将其设置为“自动”。如果你有流源和Ajax页面，你会遇到很多问题。音频对象正在被浏览器缓存，并且您将随着每次加载而增加带宽使用量。 – erm3nda

在<audio>标记中停止音频缓存

回答

相关问题