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>

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" - 可与VIDEO HTML5和AUDIO HTML5一起使用。

除了Internet Explorer和Opera之外，所有主流浏览器都支持preload属性。

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 ，我会注意到这提供了优雅的替代方案。

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

2 个答案: