Garder la musique active en changeant de page

Version imprimable

Bien le bonsoir,

Je viens vers vous pour une petite demande d'aide.
J'aimerais savoir pourquoi est-ce que mon code ne fonctionne pas en localhost sachant que c'est la seule manière que j'ai de l'essayer.
J'ai suivi une aide sur youtube qui indiquait comment laisser la musique tourner quand on change de page mais il a précisé que ça ne fonctionnait qu'avec des sites en ligne.
Est-ce qu'il est possible d'avoir le même type de code pour un site en localhost ? Car j'essaie d'avoir quelque chose comme ça sur mon site que je code.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <body> <ul id="nav"> <li><a href="accueil">Accueil</a></li> <li><a href="music">Musique</a></li> <li><a href="support">Support</a></li> </ul> <audio controls="" autoplay="" name="audio"><source src="song.mp3" type="audio/aac"></audio> <div class="content">  </div>
Et voici ce qui se trouve dans mon script.js
Code:

1 2 3 4 5 6 7 8 9 10 11 $(document).ready(function() { //Position initiale $('#content').load('content/accueil.php'); //Menu clic $('ul#nav li a').click(function(){ var page = $(this).attr('href'); $('#content').load('content/'+ page +'.php'); return false; }); });

24/10/2022, 21h49
mathieu

d'après le code que vous montrez, vous partez sur une application javascript où la gestion du son reste toujours chargée et en javascript vous modifiez l'affichage. c'est bien ça ?
24/10/2022, 23h41
djelectro95

C'est bien ça, j'essaie d'avoir un lecteur audio sur mon site et que même en changeant de page, la musique reste active.
J'ai testé le code ci-dessus mais il ne fonctionne pas quand je le teste en localhost. Donc j'aimerais avoir une façon de faire la même chose mais qui pourrait fonctionner.

cela ne change rien que ça soit sur un serveur sur votre ordinateur ou chez un hébergeur.
le souci est qu'il faut mettre id="content" dans le code html.

et vous n'avez pas besoin de jquery pour faire cela, vous pouvez essayer ce code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
"use strict";
 
let contenu;
 
document.addEventListener("DOMContentLoaded", e => {
 
	contenu = document.getElementById("content");
 
	chargement("accueil");
 
	[...document.querySelectorAll("#nav a")].forEach(lien => {
 
		lien.addEventListener("click", e => {
 
			e.preventDefault();
 
			chargement(e["currentTarget"].getAttribute("href"));
 
		});
 
	});
 
 
});
 
 
function chargement(code_page)
{
 
	fetch("contenu/" + code_page + ".php")
		.then(r => {
			return r.text();
		})
		.then(html => {
			contenu["innerHTML"] = html;
		})
	;
 
}

25/10/2022, 15h23
djelectro95

Merci pour ton aide, c'était bien le id à la place de class qui posait un soucis.
Je garde ton code en mémoire pour un prochain essai.