Bonjour, je voudrai savoir comment peut-on mettre une musique de fond qui ne s’arrête pas lorsque l'on change de page.
Je voudrai que la musique débute lors de l'entrée sur le site et s'arrête lorsque l'on quitte le site.

Pour l'instant j'utilise ceci :

<audio src="/content/musique.mp3" autoplay type="audio/mp3" loop></audio>

Le problème étant que la musique coupe a chaque changement de page.

J'ai conscience que mon problème n'a rien a faire dans la catégorie HTML/CSS mais comme je ne sait pas quel langage m'aiderai, et qu'il n'y a pas de catégorie tout langage je n'ai pas eu le choix.

Une Solution ?

Merci D'avance
Sunny62

13 réponses


Salut,
Tu peux gérer l'affichage de tes pages avec Ajax, comme ça il n'y aura pas de rafraîchissement.
Par exemple, tu rajoute une classe CSS à tous les liens internes au site, et avec jQuery tu appelles la cible des liens et tu affiche le contenu sur ta page.

Oui mais cela me forcerai à changer une importante partie de mon site que j'ai déjà fini.
N'y a-t-il pas une autre solution ?
Si non, peux tu me montrer à l'aide d'un support (Tuto, ...) comment gérer l'affichage de mes pages avec Ajax ?..

Merci D'avance
Sunny62

Si tu es sous CakePhp alors c'est assez facile (voir tuto grafikart)

Si non, tu vas devoir gérer "a la main", mais tu n'as pas forcément besoin de modifier beaucoup l'architecture de ton site.
Dans ton script jQuery, crée un évènement sur le clic de tes lien de classe "ajax" (ou le nom que tu auras choisi), et utilise
la méthode jQuery get en lui passant le param href du lien. Et affiche le résultat dans un div (ou autre) que tu auras prévu à cet effet.

cdt

J'utilise le système MVC du tuto de grafikart.
Je vais essayer, je te redis quoi.

bonjour,
si tu ne veux rien "re coder" essaye la librairie history.js, ou équivalent.
L'idéal est comme le souligne elsen, de géré toi même ton code. Sa serait nettement plus optimisé que d'utiliser (encore) une lib javascript donc la plupart des fonctions ne seront pas utiles dans ton cas.
Il existe certainement un équivalent plus simple/moins lourd ...

Merci mais je pense que l'optimisation est une chose essentiel pour un site.
Par contre j'ai beau essayer, je n'arrive pas utiliser cette fonction :S.
<u>Voici mon code :</u>

$(document).ready(function( $ ){
  $("a.ajax").click(function() {
    var link = $(this).attr("href");
    $().get(link, function(data) {
        alert("ok");
        $('#htmlcontent').html(data);
    });
    return false;
  });
})( jQuery );

il se passe quoi qd tu click ?
fait attention, un click sur un lien donne un évènement par défaut du navigateur -> ouvrir le lien, or se n'est pas se que tu souhaite ici

Il ne se passe rien du tout quand je clique.
Et la page ne se recharge pas.

remplace "$().get" par "$.get" -> tu devrais au moins avoir le alert("ok");

Non je ne le vois toujours pas :

$(document).ready(function( $ ){

  $("a.ajax").click(function() {
    var link = $(this).attr("href");
    $.get(link, function(data) {
        alert(link);
        $('#htmlcontent').html(data);
    });
    return false;
  });

})( jQuery );

Alors que comme ça je vois mon alert(link); :

$(document).ready(function( $ ){

  $("a.ajax").click(function() {
    var link = $(this).attr("href");
    alert(link);
    $.get(link, function(data) {

        $('#htmlcontent').html(data);
    });
    return false;
  });

})( jQuery );

Apparemment le $.get pose problème.

Je suis très nul en JS mais si c'est un lien faut rajouter

return false;

;)

:) C'est ce qui désactive le lien et c'est voulu car je veux que ce soit JS qui gère le lien grâce a la fonction $.get

Re-up j'en ai besoin s'il vous plaît