Comment désactiver le son si l'audio est en cours de lecture dans un autre onglet ou une autre fenêtre

Question

Je suis pleinement conscient que jouer de la musique de fond sur un site Web est une idée horrible. Cependant, mon client insiste dessus. Nous avons eu toutes sortes de problèmes avec cela. Premièrement, nous devions trouver un script pour que la chanson «suive» le navigateur (appelé «HTML5 background audio player» pour ceux qui recherchent une telle chose), en se rappelant où la chanson était coupée entre les chargements de pages.

Cependant, nous avons maintenant un nouveau problème. Si le site est ouvert dans plusieurs onglets ou fenêtres à la fois, la musique joue sur elle-même.

Je suis également pleinement conscient que la solution simple est de couper manuellement le son si vous décidez d'ouvrir une autre page du site dans un nouvel onglet ou une nouvelle fenêtre. J'ai discuté de cela. Cependant, mon client est un homme très «particulier» et insiste pour que l'ordinateur «sache quand j'ouvre une nouvelle page». Ma question est la suivante: une telle chose existe-t-elle? Je n'ai aucune idée de comment cela serait accompli en JavaScript.

Answer 1

Si vous parlez d'ouvrir dynamiquement un nouvel onglet, en cliquant sur un lien et ayant ce clic appel window.open();, puis .open() renvoie une référence à la fenêtre enfant, que vous pouvez ensuite communiquer avec dans le script parent: var childWindow = window.open(url);

Sinon, les cookies?
Un paramètre de session dans la chaîne de requête, que vous pouvez modifier si un nouvel onglet a été ouvert. Une autre suggestion, si vous utilisez exclusivement l'audio html5, serait d'utiliser localStorage.
La plupart des navigateurs prenant en charge HTML5 window.Audio; prennent également en charge window.localStorage;.
Vous devriez vérifier expressément que localStorage est bien supporté et activé, mais c'est juste une bonne citoyenneté.

Ensuite, vous devriez être en mesure de définir un identifiant aléatoire pour l'onglet, enregistrez cet ID en session de stockage, définissez une « is_playing » ou tout autre domaine localStorage à l'ID que vous avez donné l'onglet sessionStorage ...

... puis sur chaque nouvel onglet, vérifiez si "is_playing" est vide dans localStorage, OU si l'ID est égal à celui défini dans sessionStorage. La différence entre localStorage et sessionStorage est que le sessionStorage est vidé après la fermeture du navigateur et qu'il ne doit pas non plus être partagé entre les onglets.

Answer 2

Vous devez utiliser un cookie et/ou un stockage de session HTML5 pour enregistrer que votre lecture a commencé. Si tel est le cas, vous ne le lancez pas sur les chargements de page suivants.