Garder la musique active en changeant de page

**djelectro95** · 23/10/2022, 20h11

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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">
        <!--Actualisation de la page demandée-->
 
    </div>

Et voici ce qui se trouve dans mon script.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
    });
});

**mathieu** · 24/10/2022, 21h49

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 ?

**djelectro95** · 24/10/2022, 23h41

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.

**mathieu** · 25/10/2022, 06h59

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
		})
	;
 
}

:

**djelectro95** · 25/10/2022, 15h23

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.

Garder la musique active en changeant de page

jQuery

Vue hybride

Discussions similaires

Partager

Partager