Écouter de la musique à partir d'un point spécifique

Question

Est-il possible de définir l'heure de début d'une musique de fond sur un site? Mon code est ci-dessous.

//Head 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="js/jquery.cookie.js"></script> 
<script> 
    $(function() { 
     var bgMusic = $('#audio-bg')[0], 
      playing = true; 
     var $volume_btn = $('#toggle'); 

     bgMusic.addEventListener('ended', function() { 
      this.currentTime = 10; 
      if (playing) { 
       this.play(); 
      } 
     }, false); 

     var cookieValue = $.cookie("forcemute"); 

     if(cookieValue == undefined){ 
      bgMusic.play(); 
     } 
     else{ 
      playing = false; 
      $volume_btn.css({backgroundPosition: '0 -21px'}); 
     } 

     $volume_btn.click(function() { 
      if (!bgMusic.paused) { 
       bgMusic.pause(); 
       playing = false; 
       $(this).css({backgroundPosition: '0 -21px'}) 

       $.cookie("forcemute", 1); 
      } else { 
       bgMusic.play(); 
       playing = true; 
       $(this).css({backgroundPosition: '0 0'}) 

       $.removeCookie("forcemute"); 
      } 
     }); 
    }); 
</script> 

//Body 
<audio id="audio-bg"> 
       <source src="music/Something_for_Nothing_OST_-_Close_darkness_The.mp3">Update your browser for playing music</source> 
      </audio> 
      <a id="toggle" class="volume-icon" href="javascript:"></a> 

Est-il possible de définir un cookie avec l'heure actuelle de la musique, et sur le changement/rafraîchir la page continuer à jouer de la musique à partir du moment qui est dans le cookie? Par exemple, je voudrais charger mon site, et la musique joue pendant 15 secondes avant de passer à une autre page de mon site. Au lieu de jouer de la musique depuis le début, puis-je obtenir une valeur d'un cookie de la page précédente et continuer à jouer à partir de ce moment-là?

Peut-être existe-t-il une méthode pour obtenir l'heure actuelle de la musique, puis jouer à partir de ce point?

Answer 1

J'ai trouvé une solution.

Je peux mettre à jour la variable cookie toutes les 2000ms, et vérifier si cookieStartTime est terminée, puis continuer à jouer de la musique ou recommencer depuis le début.

Voici mon code complet.

$(function() { 
     var bgMusic = $('#audio-bg')[0], 
      playing = true; 
     var $volume_btn = $('#toggle'); 
     var cookieMute = $.cookie("forcemute"); 
     var cookieStartTime = $.cookie("time"); 

     bgMusic.addEventListener('ended', function() { 
      this.currentTime = 0; 
      if (playing) { 
       this.play(); 
      } 
     }, false); 

     setInterval(function() { 
      $.cookie('time', bgMusic.currentTime); 
     }, 2000); 

     if(cookieStartTime == undefined){ 
      $('audio').bind('canplay', function(){ 
       $(this)[0].currentTime = 0; 
      }); 
     } 
     else { 
      $('audio').bind('canplay', function(){ 
       $(this)[0].currentTime = cookieStartTime; 
      }); 
     } 

     if(cookieMute == undefined){ 
      bgMusic.play(); 
     } 
     else { 
      playing = false; 
      $volume_btn.css({backgroundPosition: '0 -20px'}); 
     } 

     $volume_btn.click(function() { 
      if (!bgMusic.paused) { 
       bgMusic.pause(); 
       playing = false; 
       $(this).css({backgroundPosition: '0 -20px'}) 
       $.cookie("forcemute", 1); 
      } else { 
       bgMusic.play(); 
       playing = true; 
       $(this).css({backgroundPosition: '0 -2px'}) 

       $.removeCookie("forcemute"); 
      } 
     }); 
    });