Question

我想知道是否可以在特定时间播放带有HTML5 audio标签的音乐而不事先加载所有数据：因此音乐可以直接启动而不是在播放前等待完整下载（如当你跳进视频文件时，Youtube会这样做。）

Answer 1

如果我没有弄错的话，我认为这样做是开箱即用的（至少在Firefox中）。

Mozilla开发者网络提供pretty good tutorial，可以帮助您朝着正确的方向前进。如果您有兴趣以编程方式跳过，教程将展示如何使用Javascript完成此操作。

它们还提供了<audio>元素如何缓冲数据here的非常酷的可视化。音频播放器下方的红色条显示已下载了哪些数据块。如果你跳过，那么你可以听到的歌曲片段之间的空载音频数据存在空白（以灰色显示）。

JSBin在Chrome中不起作用，但它可以在Firefox中使用。这是链接中的代码：

<p>
  <audio id="my-audio" controls>
    <source src="http://jPlayer.org/audio/mp3/Miaow-07-Bubble.mp3" type="audio/mpeg">
    <source src="http://jPlayer.org/audio/ogg/Miaow-07-Bubble.ogg" type="audio/ogg">
  </audio>
</p>
<p>
  <canvas id="my-canvas" width="300" height="20">
  </canvas>
</p>
<script>
  window.onload = function(){ 

    var myAudio = document.getElementById('my-audio');
    var myCanvas = document.getElementById('my-canvas');
    var context = myCanvas.getContext('2d');

    context.fillStyle = 'lightgray';
    context.fillRect(0, 0, myCanvas.width, 20);
    context.fillStyle = 'red';
    context.strokeStyle = 'white';

    var inc = myCanvas.width / myAudio.duration;

    // display TimeRanges

    myAudio.addEventListener('seeked', function() {
      for (i = 0; i < myAudio.buffered.length; i++) {

        var startX = myAudio.buffered.start(i) * inc;
        var endX = myAudio.buffered.end(i) * inc;

        context.fillRect(startX, 0, endX, 20);
        context.rect(startX, 0, endX, 20);
        context.stroke();
      }
    });
  }
</script>

跳过HTML5音频元素中的特定时间而不加载完整文件

1 个答案: