Setting HTML5 audio position
Solution 1
Works on my chrome...
$('#audio').bind('canplay', function() {
this.currentTime = 29; // jumps to 29th secs
});
Solution 2
To jump around an audio file, your server must be configured properly.
The client sends byte range requests to seek and play certain regions of a file, so the server must response adequately:
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.
Then, if the server responses to byte range requests correctly, you can set the position of audio via currentTime
:
audio.currentTime = 30;
See MDN's Configuring servers for Ogg media (the same applies for other formats, actually).
Also, see Configuring web servers for HTML5 Ogg video and audio.
Solution 3
Both audio and video media accept the #t
URI Time range property
song.mp3#t=8.5
To dynamically skip to a specific point use HTMLMediaElement.currentTime:
audio.currentTime = 8.5;
Solution 4
A much easier solution is
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;
Solution 5
Make sure you attempt to set the currentTime
property after the audio element is ready to play. You can bind your function to the oncanplay
event attribute defined in the specification.
Can you post a sample of the code that fails?
Related videos on Youtube
katspaugh
//employ'ng the humourous logick of JAVA-SCRIPTE¹ Because these are the key-bindings that God intended for us to use.²
Updated on December 02, 2021Comments
-
katspaugh over 2 years
How to jump to certain time offsets in HTML5 Audio elements?
They say you can simply set their
currentTime
property (emphasis mine):The
currentTime
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).Alas, it doesn't seem to work (I need it in Chrome).
There are similar questions, although, no answers.
-
Stano almost 11 years
-
-
katspaugh over 12 yearsdragon, I'll try the event, thanks! Although, I set
currentTime
from the console, when the audio is already playing. -
katspaugh over 12 yearssoemarko, thanks! After setting the URL of the audio to the one you provided in your jsbin,
currentTime
started to work. So I guess it was the server thing, because I usedpython -m SimpleHTTPServer
to serve an audio file. -
Daniel Lubarov about 12 years+1 for getting at the real problem, which is that SimpleHTTPServer is just an HTTP 1.0 server which doesn't understand byte range requests.
-
John almost 10 years+1 for answering a JavaScript question with JavaScript and not a lets-all-jump-off-a-bridge-because-everyone-else-is framework.
-
Martin Tournoij over 9 yearsAs near as I've been able to figure out, WebKit/Chrome seeking only works when using
Accept-Ranges: bytes
, even for data that is already buffered (settingContent-Length
orX-Content-Duration
doesn't help)... This is rather strange, since not all backends are able to support content ranges (mine doesn't, since we convert files on-the-fly)... Firefox is saner, and works as expected (you can seek in buffered content, and not in unbuffered content). -
Marek Jalovec over 9 yearsExactly what i was dealing with - Django's webserver is not able to process byte-range requests and playback always started from the beginning in Chrome regardless loaded status or passed currentTime value.
-
yPhil almost 9 yearsSo in summary, put
Header set Accept-Ranges bytes
in your.htaccess
guys, thanks. I'm on this since 2013 :| -
Joseph Coco over 7 yearsDoesn't seem to work as a direct link in all browsers, but helpful nonetheless.
-
Kurt Mueller about 7 yearsI think the link is outdated. Here's the link I found: developer.mozilla.org/de/docs/Web/HTML/…
-
Roko C. Buljan about 7 years@KurtMueller both links are OK. Thanks
-
Kurt Mueller about 7 yearsI don't think the first link you posted tells you how to set the time range for an audio file.
-
B''H Bi'ezras -- Boruch Hashem over 4 yearsIntereesting, alhough I'm not sure if you need a dataURL, could you possible just generate a blob URL: URL.createObjectURL(data) ?
-
Lucas Andrade about 4 years@bluejayke yes, after fetching the data you can do:
URL.createObjectURL(new Blob([data]))
, but you need to have a new blob object from your blob data -
Cerin over 3 yearsI've found the "#t=?" format is very unreliable and usually doesn't work.
-
Roko C. Buljan over 3 years@Cerin thank you for your comment. Any insights to share? Unreliable in what sense? What browser? What happened?
-
Admin over 2 yearsAs it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
-
Admin over 2 yearsYour answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
-
Peter Moore about 2 yearsThis seems to be completely undocumented. I can't find any official references to this including in the links you posted.