设置HTML5audio位置

如何跳转到HTML5audio元素中的某些时间偏移量?

他们说你可以简单地设置他们的currentTime属性 (重点是我的):

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

唉,似乎并没有工作(我需要在Chrome中)。

也有类似的问题,但没有答案。

适用于我的Chrome …

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

要跳过audio文件,您的服务器必须正确configuration。

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

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

然后,如果服务器正确响应字节范围请求,则可以通过currentTime设置audio的位置:

 audio.currentTime = 30; 

请参阅MDN的为Ogg媒体configuration服务器 (实际上也适用于其他格式)。

另请参阅configurationHTML5 Oggvideo和audio的Web服务器 。

您可以使用#t URI 时间范围属性
这对于audiovideo媒体都是有效的。

 stackoverflow.mp3#t=8.5 // Will start playing from the 8.5 sec. 
 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(); 

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

你能发表一个失败的代码样本吗?

Firefox在search尚未加载的内容时也会发出字节范围请求 – 这不仅仅是一个Chrome问题。 设置响应头“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

简单的解决scheme是

 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; 

我正面临audio进度条无法正常工作,但audio工作正常的问题。 这段代码适用于我。 希望它也能帮助你。 这里的歌是audio组件的对象。

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的答案是正确的,但有一个解决方法,不需要任何额外的服务器configuration。 这个想法是将audio文件作为blob,将其转换为dataURL并将其用作audio元素的src

这里是angular$http解决scheme,但如果需要的话,我可以添加香草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;