blocks|key|3115502|text|在my+chrome上工作...|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3115503|$('#audio').bind('canplay',+function()+{
++this.currentTime+=+29;+//+jumps+to+29th+secs
});|code-block|syntax|javascript|3115504|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/aracov^0|1|9|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Works on <a href="http://jsbin.com/aracov" rel="noreferrer">my chrome</a>...

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

blocks|key|2901494|text|要跳转音频文件，必须正确配置您的服务器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2901495|客户端发送byte+range+requests来查找和播放文件的某些区域，因此服务器必须做出充分的响应：|offset|length|2901496|2901497|为了支持查找和回放尚未下载的媒体区域，Gecko使用HTTP1.1字节范围请求从查找目标位置检索媒体。此外，如果您不提供X-Content-Duration标头，Gecko将使用字节范围请求来查找到媒体的末尾(假设您提供Content-Length标头)，以便确定媒体的持续时间。|blockquote|2901498|2901499|2901500|然后，如果服务器正确响应字节范围请求，则可以通过currentTime设置音频的位置|style|CODE|2901501|audio.currentTime+=+30;|code-block|syntax|javascript|2901502|请参阅MDN的Configuring+servers+for+Ogg+media+(实际上，其他格式也是如此)。|2901503|另请参见Configuring+web+servers+for+HTML5+Ogg+video+and+audio。|2901504|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/Configuring_servers_for_Ogg_media#Handle_HTTP_1.1_byte_range_requests_correctly|1|https://developer.mozilla.org/en/Configuring_servers_for_Ogg_media|2|http://blog.pearce.org.nz/2009/08/configuring-web-servers-for-html5-ogg.html^0|0|5|J|0|0|0|0|0|0|O|B|0|0|7|X|1|0|4|1H|2|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1B|8|@]|9|@$D|1C|E|1D|1|1E]]|A|$]]|$1|F|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|G|3|H|5|I|7|1G|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1J|8|@$D|1K|E|1L|N|O]]|9|@]|A|$]]|$1|P|3|Q|5|R|7|1M|8|@]|9|@]|A|$S|T]]|$1|U|3|V|5|6|7|1N|8|@]|9|@$D|1O|E|1P|1|1Q]]|A|$]]|$1|W|3|X|5|6|7|1R|8|@]|9|@$D|1S|E|1T|1|1U]]|A|$]]|$1|Y|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]|16|$5|11|12|13|A|$14|17]]|18|$5|11|12|13|A|$14|19]]]]

To jump around an audio file, your server must be configured properly.

The client sends <a href="https://developer.mozilla.org/en/Configuring_servers_for_Ogg_media#Handle_HTTP_1.1_byte_range_requests_correctly">byte range requests</a> to seek and play certain regions of a file, so the server must response adequately:

<blockquote>
 In order to support seeking and playing back regions of the media that
 aren't yet downloaded, Gecko uses HTTP 1.1 byte-range requests to
 retrieve the media from the seek target position. In addition, if you
 don't serve X-Content-Duration headers, Gecko uses byte-range requests
 to seek to the end of the media (assuming you serve the Content-Length
 header) in order to determine the duration of the media.
</blockquote>

Then, if the server responses to byte range requests correctly, you can set the position of audio via <code>currentTime</code>:

<pre><code>audio.currentTime = 30;
</code></pre>

See MDN's <a href="https://developer.mozilla.org/en/Configuring_servers_for_Ogg_media">Configuring servers for Ogg media</a> (the same applies for other formats, actually).

Also, see <a href="http://blog.pearce.org.nz/2009/08/configuring-web-servers-for-html5-ogg.html">Configuring web servers for HTML5 Ogg video and audio</a>.

blocks|key|236314|text|一个更简单的解决方案是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|236315|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;|code-block|syntax|javascript|236316|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

A much easier solution is 

<pre><code>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;
</code></pre>

blocks|key|236270|text|确保您尝试在音频元素准备好播放之后设置currentTime属性。您可以将您的函数绑定到规范中定义的oncanplay事件属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|236271|你能发布一个失败的代码样本吗？|236272|entityMap^0|J|B|1E|9|W|W|0|0|F|0^^$0|@$1|2|3|4|5|6|7|K|8|@$9|L|A|M|B|C]|$9|N|A|O|B|C]|$9|P|A|Q|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|R|8|@$9|S|A|T|B|D]]|E|@]|F|$]]|$1|I|3|-4|5|6|7|U|8|@]|E|@]|F|$]]]|J|$]]

Make sure you attempt to set the <code>currentTime</code> property after the audio element is ready to play. You can bind your function to the <code>oncanplay</code> event attribute defined in the specification.

Can you post a sample of the code that fails?

blocks|key|237378|text|我遇到了音频进度条不工作但音频工作正常的问题。这段代码适用于我。希望它也能对你有所帮助。这里的歌曲是音频组件的对象。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|237379|HTML部件|237380|<input+type="range"+id="seek"+value="0"+max=""/>|code-block|syntax|javascript|237381|JQuery部件|237382|++++$("#seek").bind("change",+function()+{
++++++++++++song.currentTime+=+$(this).val();+++++++++++++++
++++++++});

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

++++$("#seek").attr("max",+song.duration);
++++$('#seek').val(song.currentTime);
++++});|237383|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I was facing problem that progress bar of audio was not working but audio was working properly. This code works for me. Hope it will help you too.
Here song is the object of audio component.

HTML Part 

<pre><code>&lt;input type="range" id="seek" value="0" max=""/&gt;
</code></pre>

JQuery Part

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

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

 $("#seek").attr("max", song.duration);
 $('#seek').val(song.currentTime);
 });
</code></pre>

blocks|key|239241|text|Firefox在寻找尚未加载的内容时也会发出字节范围请求--这不仅仅是chrome的问题。设置响应头"Accept-Ranges:+bytes“并返回206部分内容状态码，以允许任何客户端发出字节范围请求。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|239242|请参阅https://developer.mozilla.org/en-US/docs/Web/HTTP/Configuring_servers_for_Ogg_media#Handle_HTTP_1.1_byte_range_requests_correctly|offset|length|239243|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/HTTP/Configuring_servers_for_Ogg_media#Handle_HTTP_1.1_byte_range_requests_correctly^0|0|3|3L|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

Firefox also makes byte range requests when seeking content that it has not yet loaded- it is not just a chrome issue. 
Set the response header "Accept-Ranges: bytes" and return a 206 Partial Content status code to allow any client to make byte range requests.

See <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Configuring_servers_for_Ogg_media#Handle_HTTP_1.1_byte_range_requests_correctly" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTTP/Configuring_servers_for_Ogg_media#Handle_HTTP_1.1_byte_range_requests_correctly</a>

blocks|key|233623|text|@katspaugh的答案是正确的，但有一种解决方法不需要任何额外的服务器配置。其思想是将音频文件作为blob，将其转换为dataURL，并将其用作audio元素的src。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|233624|以下是angular+$http的解决方案，但如果需要，我也可以添加普通的JS版本：|233625|$http.get(audioFileURL,
++++++++{responseType:'blob'})
++++++++.success(function(data){
++++++++++++var+fr+=+new+FileReader;
++++++++++++fr.readAsDataURL(data);
++++++++++++fr.onloadend+=+function(){
++++++++++++++++domObjects.audio.src+=+fr.result;
++++++++++++};
++++++++});|code-block|syntax|javascript|233626|注意事项|233627|233628|此解决方法不适用于大文件。|ordered-list-item|233629|除非正确设置CORS，否则它将无法跨域工作。|233630|233631|entityMap^0|1P|7|22|5|2A|3|0|B|5|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|18|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|19|8|@]|D|@]|E|$]]|$1|P|3|Q|5|R|7|1A|8|@]|D|@]|E|$]]|$1|S|3|T|5|R|7|1B|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|W|$]]

The @katspaugh's answer is correct, but there is a workaround that does not require any additional server configuration. The idea is to get the audio file as a blob, transform it to <code>dataURL</code> and use it as the <code>src</code> for the <code>audio</code> element.

Here is solution for angular <code>$http</code>, but if needed I can add vanilla JS version as well:

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

<h3>cautions</h3>

<ol>
<li>This workaround is not suitable for large files.</li>
<li>It will not work cross-origin unless CORS are set properly.</li>
</ol>

blocks|key|3115637|text|将时间位置设置为5秒：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3115638|var+vid+=+document.getElementById("myAudio");
vid.currentTime+=+5;|code-block|syntax|javascript|3115639|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Set time position to 5 seconds:

<pre><code>var vid = document.getElementById("myAudio");
vid.currentTime = 5;
</code></pre>

blocks|key|239262|text|为了修复视频倒带和快进的chrome只需添加/stream？对于您的html请求，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|239263|239264|修复。|blockquote|239265|239266|239267|我的问题是视频的倒带和前进不能在chrome上工作，但在mozzila上工作得很好。|239268|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|M|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|N|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|O|8|@]|9|@]|A|$]]|$1|G|3|-4|5|6|7|P|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|K|$]]

In order to fix video rewind and fast forward on chrome just add /stream? to your html request for example:
<blockquote>
<pre><code>&lt;video src=&quot;youre.website.ext/{fileId}&quot;&gt;
fix. &lt;video src=&quot;your.website./{fileId}/stream?&quot;&gt;
</code></pre>
</blockquote>
My problem was video rewind and forward didnt work on chrome but worked well on mozzila.

How to jump to certain time offsets in HTML5 Audio elements?

They say you can simply set their <a href="http://www.w3.org/TR/html5/the-iframe-element.html#dom-media-currenttime" rel="noreferrer"><code>currentTime</code> property</a> (emphasis mine):

<blockquote>
 The <code>currentTime</code> attribute must, on getting, return the current
 playback position, expressed in seconds. On setting, if the media
 element has a current media controller, then it must throw an
 INVALID_STATE_ERR exception; otherwise, the user agent must seek to
 the new value (which might raise an exception).
</blockquote>

Alas, it doesn't seem to work (I need it in Chrome).

There are similar questions, although, no answers.

Setting HTML5 audio position

服务器

HTML5

如何跳转到HTML5音频 elements中的特定时间偏移量？他们说你可以简单地设置他们的 (强调我的)：在获取时，currentTime属性必须返回当前播放位置，以秒为单位。在设置时，如果媒体元素具有当前媒体控制器，则它必须抛出INVALID_STATE_ERR异常；否则，用户代理必须寻找新值(这可能会引发异常)。可惜，它似乎不能工作(我需要在Chrome中使用它)。尽管没有答案，但也有类似的问

问设置HTML5音频位置
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问设置HTML5音频位置EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问设置HTML5音频位置
EN