web-dev-qa-db-fra.com

Comment faire jouer un fichier <audio> en continu sur toutes les pages?

Je me demande comment faire en sorte qu'un fichier audio soit lu en continu sur toutes les pages. Donc, si le fichier audio a été lu pendant 20 secondes, lors de la navigation sur une autre page, il continuera là où il s'était arrêté. J'essaie également de faire baisser le volume après avoir quitté ma page d'accueil. Tous les trucs ou conseils me seraient appréciés! Merci = D

<audio src="songforsite.mp3" loop="true" autoplay="true" controls>
Unsupported in Firefox
</audio>
htmlhtml5html5-audio
19
Joshua Baker

Oui c'est possible. essaye ça:

<audio preload="auto" src="a.mp3" loop="true" autobuffer>
Unsupported in Firefox
</audio>

<script>

function setCookie(c_name,value,exdays)
{
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + c_value;
}

function getCookie(c_name)
{
    var i,x,y,ARRcookies=document.cookie.split(";");
    for (i=0;i<ARRcookies.length;i++)
    {
      x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
      y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
      x=x.replace(/^\s+|\s+$/g,"");
      if (x==c_name)
        {
        return unescape(y);
        }
      }
}

var song = document.getElementsByTagName('audio')[0];
var played = false;
var tillPlayed = getCookie('timePlayed');
function update()
{
    if(!played){
        if(tillPlayed){
        song.currentTime = tillPlayed;
        song.play();
        played = true;
        }
        else {
                song.play();
                played = true;
        }
    }

    else {
    setCookie('timePlayed', song.currentTime);
    }
}
setInterval(update,1000);
</script>
22
user2193789

Si vous naviguez vraiment vers une autre page, vous n'obtiendrez pas une lecture vraiment continue.

Il existe trois approches communes:

  • ouvrez votre lecteur audio dans une fenêtre contextuelle
  • cadres: un cadre principal pour afficher votre page, un petit cadre pour le lecteur audio
  • ne navigue pas vraiment vers d'autres pages, mais faites tout avec AJAX et donc ne rechargez pas réellement la page, mais modifiez uniquement des parties de la structure du document de manière dynamique; peut-être en ajoutant une véritable fonctionnalité de lien, y compris en changeant la barre d'adresse en à l'aide de l'API HTML5 History

Toutes les approches ont leurs avantages/inconvénients. Le pop-up est peut-être le plus facile à implémenter et présente le moins d'inconvénients (par rapport aux frames).

J'essaie également de faire baisser le volume après avoir quitté ma page d'accueil.

Ensuite, capturez tous les clics sur votre lien/bouton "home" et appelez la méthode volume de l'élément audio avec une valeur de paramètre allant de 0 à 1 pour régler le volume.

13
CBroe

bien .. une façon propre et soignée de le faire, est la façon dont soundcloud.com et spoify.com ont fait en ajaxant toutes les pages

réparer une page et changer le contenu des pages via ajax, et changer l'url également pour donner à l'utilisateur l'illusion de naviguer ce n'est pas la solution la plus simple ou la plus rapide, mais c'est la plus propre .. loin de la peur des incompatibilités des navigateurs

4
Mohamed Emad Hegab