Setting the currentTime of an <audio> tag no

Question

I have this audio tag playing in the background, and I'm able to store the progress in seconds to a cookie. But in no way I'm able to start the audio from that cookie. (for continuing on other pages)

$("p#sound audio").currentTime = $.cookie("audioTime");

<audio autoplay="autoplay" loop="loop" ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime); $.cookie('audioTime', Math.floor(this.currentTime));">
    <source src="audio/song.ogg" type="audio/ogg" />
    <source src="audio/song.mp3" type="audio/mp3" />
    Your browser does not support the audio tag.
</audio>
<span id="tracktime">0</span>

Does this have to do with the song being loaded again from start?

Thanks!

EDIT:

$("p#sound audio").get[0].currentTime

With .get[0], it doesn't work either.

Can someone please clear things up for me? Greatly appreciated!

Answer 1

At first there is an error in your code because currentTime is not a part of jQuery (but you already know this)

$("p#sound audio").currentTime // is incorrect (refers to a property of jQuery)
$("p#sound audio")[0].currentTime // is correct (refers to a property of DOM element)

I discover that the audio tag has some strange things and can be operate differently from browser to browser, for example in Chrome.

At first you have to wait for the 'durationchange' event to be sure the length is known by the object.

After this you have to start the stream with 'play()' (if not already started) and pause it (sometimes after a short delay) with the 'pause()' function. Then you can change the 'currentTime' property with the value. After this you have to start the stream again by using the 'play()' function.

Also it is sometimes needed to load the stream by yourself by using the 'load()' function.

Something like this:

$(document).ready( function()
{
var a = $('audio:first'),
    o = a[0];

a.on( 'durationchange', function(e)
{
  var o = e.target;
  if( o )
  {
   o.pause();
   o.currentTime = parseInt( $.cookie("audioTime"));
   o.play();
  } 
});

if( o )
{
  o.load();
  o.play();
}
});

You have to play with it to be sure what is the best in your situation, for example the resume (play again) method to delay it for a second or so.

When using this method you don't have to use the autoplay feature because most of the time it doesn't work.

Hope it helps, greetz, Erwinus

Answer 2

You need to wait until audio source loads before you set the current time.

$(function(){
    $('audio').bind('canplay', function(){
        $(this)[0].currentTime = $.cookie('audioTime');
    });
});

Answer 3

You can set the start time by adding t=<time> to the URL, as documented here: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Specifying_playback_range

E.g. <audio src="http://example.com/audio.mp3#t=50></audio>

Answer 4

what I found in my case is that there is an issue with context somewhere. I initialize audio under the window context but when I try to change currentTime from XMLHttpRequest response it does NOT work. I don't know the answer yet but I'm providing a clue maybe an expert in Javascript will know how to make it work.

/* initialize this.audio player */
Audio = function() {
    var that = this;
    // keep track of playback status
    var AudioStatus = {
            isPlaying : false
    };

    // define references to this.audio, pulldown menu, play-button, slider and time display
    that.audio = document.querySelector("AUDIO");

    /* load track by menu-index */
    var loadTrack = function() {

        if(that.audio == null){
            log("audio null"); return;
        }
        that.audio.src = '../sounds/400.mp3';
        that.audio.load();
    };

    /* callback to play or pause */
    that._play = function() {
        if(that.audio == null){
            log("audio null"); return;
        }  
        that.audio.play();
        AudioStatus.isPlaying = true;
    };

    that._pause = function() {

        if(that.audio == null){
            log("audio null"); return;
        }
        that.audio.pause();
        AudioStatus.isPlaying = false;
    };

    that.playPause = function() {
        if (that.audio.paused) {
            self._play();
        }
        else {
            self._pause();
        }
    };

    /* callback to set or update playback position */
    that.updateProgress = function(value) {
        if(that.audio == null){
            log("audio null"); return;
        }
        that.audio.currentTime = value;    // <<<--- it does NOT work if I call from XMLHttpRequest response but it DOES if it is called from a timer expired call back
    };

    that.isAudioPlaying = function(){
        return AudioStatus.isPlaying;
    };
};

Answer 5

This works for me.

if (!isNaN(audio.duration)) {
    audio.currentTime = 0;
}

Hope it helps!