在不加载完整文件的情况下跳到 HTML5 音频元素中的特定时间答案

【问题标题】：Skipping to specific time in HTML5 audio element without loading the complete file在不加载完整文件的情况下跳到 HTML5 音频元素中的特定时间
【发布时间】：2015-03-02 21:06:35
【问题描述】：

我想知道是否可以在特定时间播放带有 HTML5 audio 标签的音乐，而无需预先加载所有数据：因此音乐可以直接开始播放，而无需等待完整下载再播放（就像 Youtube 一样当你跳入视频文件时）。

【问题讨论】：

标签： javascript html audio youtube

【解决方案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>

【讨论】：