Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting HTML5 audio position

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.

like image 927
katspaugh Avatar asked Mar 05 '12 08:03

katspaugh


People also ask

How do I align audio in HTML?

If you want to center your player, you can use the optional <div align="center"> tag. "controls" means the player displays the audio controls. Without it, the sound cannot be turned off. "Your browser does not support the audio tag" will display for older browsers.

What is the correct HTML5 element for playing audio files?

The HTML <audio> element is used to play an audio file on a web page.

Can you style HTML5 audio tags?

HTML 5 audio tags can be styled. By using the audio tag with “controls” attribute, the default browsers player is used. You can customize by not using the browsers controls. You can also add CSS classes to each one of the elements and style them accordingly.


1 Answers

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.

like image 199
katspaugh Avatar answered Sep 22 '22 17:09

katspaugh