设置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 时间范围属性
这对于audio和video媒体都是有效的。
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状态码,以允许任何客户端发出字节范围请求。
更简单的解决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; }; });
注意事项
- 此解决方法不适用于大文件。
- 除非CORS设置正确,否则它将不起作用。
将时间位置设置为5秒
var vid = document.getElementById("myAudio"); vid.currentTime = 5;