Question

如何跳转到 HTML5音频元素中的特定时间偏移？

他们说你可以简单地设置他们的currentTime property（强调我的）：

currentTime属性在获取时必须返回当前值播放位置，以秒为单位表示。设置，如果是媒体 element有一个当前的媒体控制器，那么它必须抛出一个 INVALID_STATE_ERR异常;否则，用户代理必须寻求新值（可能引发异常）。

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

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

Answer 1

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

客户端发送byte range requests来搜索和播放文件的某些区域，因此服务器必须做出充分的响应：

为了支持寻求和回放媒体的区域尚未下载，Gecko使用HTTP 1.1字节范围请求从搜索目标位置检索媒体。另外，如果你不提供X-Content-Duration标头，Gecko使用字节范围请求寻求媒体的终结（假设您提供内容长度标题）以确定媒体的持续时间。

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

audio.currentTime = 30;

请参阅MDN的Configuring servers for Ogg media（实际上，这同样适用于其他格式）。

另请参阅Configuring web servers for HTML5 Ogg video and audio。

Answer 2

适用于my chrome ...

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

Answer 3

您可以使用#t URI Time range property
这对音频和视频媒体都有效。

stackoverflow.mp3#t=8.5 // Will start playing from the 8.5 sec.

＆＃13;

var a = new Audio();
a.src= "http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg#t=4.5";
a.play();

＆＃13;

如果您想动态跳过到特定范围，请使用HTMLMediaElement.currentTime：

audio.currentTime = 8.5;

Answer 4

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

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

Answer 5

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 6

我遇到的问题是音频进度条没有工作但音频工作正常。这段代码适合我。希望它也会对你有所帮助。这首歌是音频组件的对象。

HTML部分

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

JQuery Part

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

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

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

Answer 7

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

这是角度$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;
            };
        });

注意事项

此解决方法不适用于大型文件。
除非正确设置CORS，否则它不会起到交叉原点的作用。

Answer 8

将时间位置设为5秒：

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

设置HTML5音频位置

8 个答案:

注意事项