CODEWITHSUNDEEP
javascriptgoogle-chromehtml5-audio
katspaugh
katspaugh

Reputation: 17899

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.

Upvotes: 94

Views: 119473

Answers (10)

user8779480
user8779480

Reputation: 11

In order to fix video rewind and fast forward on chrome just add /stream? to your html request for example:

<video src="youre.website.ext/{fileId}">
fix.  <video src="your.website.ext/{fileId}/stream?">

My problem was video rewind and forward didnt work on chrome but worked well on mozzila.

Upvotes: -1

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

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;

Upvotes: 26

Cedric Dahl
Cedric Dahl

Reputation: 189

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;

Upvotes: 18

Jijo Paulose
Jijo Paulose

Reputation: 1956

Set time position to 5 seconds:

var vid = document.getElementById("myAudio");
vid.currentTime = 5;

Upvotes: 1

user3834658
user3834658

Reputation: 346

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 https://developer.mozilla.org/en-US/docs/Web/HTTP/Configuring_servers_for_Ogg_media#Handle_HTTP_1.1_byte_range_requests_correctly

Upvotes: 8

artur grzesiak
artur grzesiak

Reputation: 20348

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 dataURL and use it as the src for the audio element.

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

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

cautions

  1. This workaround is not suitable for large files.
  2. It will not work cross-origin unless CORS are set properly.

Upvotes: 5

Anuj Sharma
Anuj Sharma

Reputation: 4324

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 

<input type="range" id="seek" value="0" max=""/>

JQuery Part

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

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

    $("#seek").attr("max", song.duration);
    $('#seek').val(song.currentTime);
    });

Upvotes: 9

katspaugh
katspaugh

Reputation: 17899

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.

Upvotes: 92

dragon
dragon

Reputation: 1775

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?

Upvotes: 10

marko
marko

Reputation: 2084

Works on my chrome...

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

Upvotes: 67

Related Questions