如何防止HTML5音频在加载时进行预下载/流式传输？

Question

我有一个展示HTML5音频播放器集合的单页面网站。问题在于，由于以下浏览器开始预下载内容（mp3和ogg），该网站变得很慢：

Internet Explorer
Google Chrome
Firefox
Safari
(probably Opera)

我使用基本代码来实现播放器。有没有办法可以防止浏览器预下载音频文件，只有在他们点击播放时才开始工作？

<audio controls="controls" height="32" width="300" tabindex="0">
<source type="audio/mpeg" src="http://cdn.com/track.mp3"></source>
<source type="audio/ogg" src="http://cdn.com/track.ogg"></source>
</audio>

- TheBlackBenzKid

---

我认为浏览器也会输出高度和宽度，因此默认情况下可以将其留空，只需像M1th在下面写的那样使用<audio controls="controls"和preload="none"。因为这些只是由浏览器渲染的。 - AlphaApp

Answer 1

<audio controls="controls" preload="none">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio> 

注意 - preload="none" 可以用于 HTML5 VIDEO 和 HTML5 AUDIO。

preload 属性在所有主流浏览器中都得到支持，但不包括 Internet Explorer 和 Opera。

- M1th

---

谢谢。这样可以阻止HTML5元素自动下载和预加载。感激不尽。 - TheBlackBenzKid

Answer 2

MSIE仍然占据着所有网页流量的30％左右，因此preload="none"只是部分解决方案。在我遇到这个问题的一些页面中，我在我的页面头部添加了一个小脚本：

<script type="text/javascript">
function addAudio(t) {
  var l=t.innerHTML.length;
  var audioName=t.parentElement.id;
  if( t.children.length==0) {
    t.innerHTML=t.innerHTML+'&nbsp; &nbsp; <audio controls="controls"><source src="'+
      audioName+'.ogg" type="audio/ogg" /><source src="'+
      audioName+'.mp3" type="audio/mp3" /> No audio tag support</audio>';
  }
}
</script>

然后使用DHMTL动态添加音频标签，例如：

<li id="2_Lesson_1_Hello"><span onclick="addAudio(this)">Γεια σας</span></li>

这段代码定义了一个包含文本部分的列表项。当浏览者点击文本部分时，javascript会执行并添加<audio>标签。你也可以使用onmouseover属性来在悬停时添加音频标签。

如果需要，可以为生成的代码添加preload属性。这是一种简单的方法，但如果你已经在网页上使用了jQuery，我建议你尝试一些更优雅的替代方案。

- TerryE

---

你能否请发一下jQuery的替代方案，并全面解释代码以及你的意思？为你的努力点赞，这让我对“Γεια σας”感到困惑，这段代码在做什么？ - TheBlackBenzKid

我已经更新了我的回答。抱歉，我刚从我的页面中提取了一行“Γεια σας”只是这个例子中的一些字符数据（它是希腊语的“你好”），就像“您的浏览器不支持...”在您的浏览器中一样。jQuery示例是一个不同的问答，不是我想要在这里涵盖的内容。我认为这是JavaScript的高级用法，如果您需要解释这个简单的操作程序，这并不适合您的情况。 - TerryE