跳过HTML5音频元素中的特定时间而不加载完整的文件 [英] Skipping to specific time in HTML5 audio element without loading the complete file

问题描述

我想知道是否可以在特定时间使用HTML5 audio标签播放音乐而无需事先加载所有数据:这样音乐可以直接开始播放，而不必等待完整的下载后再播放(就像Youtube一样)当您跳入视频文件时).

I want to know if it's possible to play music with the HTML5 audio tag at a specific time without loading all the data beforehand: so the music can start directly and not wait for a full download before playing (like Youtube does when you jump in the video file).

推荐答案

如果我没记错的话，我认为它是开箱即用的(至少在Firefox中是这样).

If I'm not mistaken, I think it does this out of the box (at least in Firefox).

Mozilla开发人员网络提供了非常好的教程，应该会帮助您朝正确的方向发展.如果您有兴趣以编程方式略过，本教程将介绍如何使用Javascript做到这一点.

The Mozilla Developer Network offers a pretty good tutorial that should help you in the right direction. If you're interested in skipping around programatically, the tutorial shows how this can be done using Javascript.

它们还提供了有关<audio>元素如何缓冲数据的非常酷的可视化效果，此处.音频播放器下方的红色条显示已下载了哪些数据块.如果您四处走动，很明显，您尚未收听的歌曲片段之间存在卸载音频数据的间隙(以灰色显示).

They also offer a really cool visualization of how the <audio> element buffers data here. The red bars beneath the audio player show which blocks of data have been downloaded. If you skip around, it'll become evident that there's gaps of unloaded audio data between segments of the song that you didn't listen to yet (shown in grey).

JSBin在Chrome中不起作用，但在Firefox中将起作用.这是链接中的代码:

The JSBin doesn't work in Chrome, but it will work in Firefox. Here's the code from the link:

<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音频元素中的特定时间而不加载完整的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！