设置HTML5音频位置

Question

如何在HTML5音频元素中跳转到某些时间偏移？

他们说你可以简单地设置他们的currentTime财产(强调我的):

currentTime获取时,该属性必须返回当前播放位置,以秒为单位表示.在设置时,如果媒体元素具有当前媒体控制器,则它必须抛出INVALID_STATE_ERR异常; 否则,用户代理必须寻找新值(这可能引发异常).

唉,它似乎不起作用(我需要在Chrome中).

有类似的问题,但没有答案.

Answer 1

要跳转音频文件,必须正确配置服务器.

客户端发送字节范围请求以搜索和播放文件的某些区域,因此服务器必须充分响应:

为了支持寻找和播放尚未下载的媒体区域,Gecko使用HTTP 1.1字节范围请求从搜索目标位置检索媒体.此外,如果您不提供X-Content-Duration标头,Gecko会使用字节范围请求来寻找媒体的末尾(假设您提供Content-Length标头)以确定媒体的持续时间.

然后,如果服务器正确响应字节范围请求,您可以通过currentTime以下方式设置音频的位置:

audio.currentTime = 30;

请参阅MDN 为Ogg媒体配置服务器(实际上,这同样适用于其他格式).

另请参阅为HTML5 Ogg视频和音频配置Web服务器.

Answer 2

适用于我的Chrome ...

$('#audio').bind('canplay', function() {
  this.currentTime = 29; // jumps to 29th secs
});

Answer 3

您可以使用#tURI 时间范围属性
,该属性对音频和视频媒体都有效.

audio.currentTime = 8.5;

audio.currentTime = 8.5;

如果要动态跳转到特定范围,请使用HTMLMediaElement.当前时间:

audio.currentTime = 8.5;

Answer 4

一个更容易的解决方案是

var element = document.getElementById('audioPlayer');

//first make sure the audio player is playing
element.play(); 

//second seek to the specific time you're looking for
element.currentTime = 226;

Answer 5

确保在音频元素准备好播放后尝试设置currentTime属性.您可以将函数绑定到规范中定义的事件属性.oncanplay

你能发布一个失败的代码样本吗？

Answer 6

Firefox在寻找尚未加载的内容时也会发出字节范围请求 - 这不仅仅是一个问题.设置响应头"Accept-Ranges:bytes"并返回206 Partial Content状态代码,以允许任何客户端发出字节范围请求.

请参阅https://developer.mozilla.org/en-US/docs/Web/HTTP/Configuring_servers_for_Ogg_media#Handle_HTTP_1.1_byte_range_requests_correctly

Answer 7

我遇到的问题是音频进度栏无法正常工作，但音频正常运行。该代码对我有用。希望它也会对您有帮助。歌曲是音频组件的对象。

HTML部分

<input type="range" id="seek" value="0" max=""/>

jQuery部分

    $("#seek").bind("change", function() {
            song.currentTime = $(this).val();               
        });

song.addEventListener('timeupdate',function (){

    $("#seek").attr("max", song.duration);
    $('#seek').val(song.currentTime);
    });

Answer 8

@katspaugh 的回答是正确的，但有一种不需要任何额外服务器配置的解决方法。这个想法是让音频文件作为一个blob，它转换dataURL，并用它作为src为audio元素。

这是 angular 的解决方案$http，但如果需要，我也可以添加 vanilla JS 版本：

$http.get(audioFileURL,
        {responseType:'blob'})
        .success(function(data){
            var fr = new FileReader;
            fr.readAsDataURL(data);
            fr.onloadend = function(){
                domObjects.audio.src = fr.result;
            };
        });

注意事项

1. 此解决方法不适用于大文件。
2. 除非正确设置 CORS，否则它不会跨域工作。