设置HTML5音频位置

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

他们说您可以简单地设置其currentTime属性（重点是我的）：

该currentTime属性在获取时必须返回以秒为单位的当前播放位置。设置时，如果媒体元素具有当前媒体控制器，则它必须引发INVALID_STATE_ERR异常；否则，它将抛出INVALID_STATE_ERR异常。否则，用户代理必须寻求新值（这可能会引发异常）。

las，它似乎不起作用（我需要在Chrome中使用它）。

有类似的问题，但是没有答案。

适用于我的Chrome浏览器...

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

要在音频文件中跳转，必须正确配置服务器。

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

为了支持搜索和播放尚未下载的媒体区域，Gecko使用HTTP 1.1字节范围请求从搜索目标位置检索媒体。另外，如果您不提供X-Content-Duration标头，则Gecko使用字节范围请求查找到媒体的末尾（假定您提供Content-Length标头），以确定媒体的持续时间。

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

audio.currentTime = 30;

请参阅MDN的为Ogg媒体配置服务器（实际上，其他格式也一样）。

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

这两个音频和视频媒体接受#tURI时间范围属性

song.mp3 ＃t = 8.5

要动态跳到特定点，请使用HTMLMediaElement。currentTime：

audio.currentTime = 8.5;

一个更简单的解决方案是

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;

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

您可以发布失败的代码示例吗？

Firefox在查找尚未加载的内容时也会发出字节范围请求-这不仅是Chrome问题。将响应标头设置为“ Accept-Ranges：bytes”，并返回206 Partial Content状态代码，以允许任何客户端发出字节范围请求。

正确参见https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Configuring_servers_for_Ogg_media#Handle_HTTP_1.1_byte_range_requests_正确

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

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);
    });

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

这是angular的解决方案$http，但是如果需要，我也可以添加香草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，否则它将无法跨域使用。

将时间位置设置为5秒：

var vid = document.getElementById("myAudio");
vid.currentTime = 5;