Setting the currentTime of an <audio> tag not working?

前端 未结 6 648
生来不讨喜
生来不讨喜 2020-12-31 07:41

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. (fo

6条回答
  •  庸人自扰
    2020-12-31 08:11

    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

提交回复
热议问题