Arrêter un fond sonore lors d'un scroll ou lors d'un click

Version imprimable

Bonjour à tous,
J'ai dans mon body une musique en autoplay que je voudrais arrêter lors du scroll ou lors du click sur la div class="logo".
Cela est-il possible ? Au cas ou, voici le body concerné :
Code:

1 2 3 4 5 6 7 8 <body> <audio autoplay> <source src="audio/song.ogg" type="audio/ogg"> <source src="audio/song.mp3" type="audio/mp3"> </audio> <div id="header"> <div class="logo"><a href="#section-un"><img src="img/logo.svg" alt="" width="50em" class="logo animClass"/></a> </div>
Merci pour votre aide et bon week-end,
dh

13/06/2015, 20h08
Watilin

C'est assez simple.

Tout ce dont tu as besoin c'est de surveiller les évènements click et scroll de ta div (par exemple avec addEventListener) et d'appeler la méthode pause de ton objet audio.

Tu devrais ajouter des id à ton <audio> et ta <div class="logo"> pour y accéder plus facilement depuis ton script.

Merci Watilin pour ta réponse,
OK, je vais ajouter un id pour l'audio et le logo mais j'ai du mal à voir comment adapter le code addEventListener à mon cas :
Code exemple du site :

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
<html>
 <head>
   <title>Exemple de DOM Event</title>
   <style type="text/css">
     #t { border: 1px solid red }
     #t1 { background-color: pink; }
   </style>
   <script type="text/javascript">
   // fonction pour modifier le contenu de t2
   function modifieTexte() {
     var t2 = document.getElementById("t2");
     t2.firstChild.nodeValue = "trois";    
   }
   // fonction pour ajouter un écouteur à t
   function load() { 
     var el = document.getElementById("t"); 
     el.addEventListener("click", modifieTexte, false); 
   } 
   </script> 
 </head> 
 <body onload="load();"> 
 <table id="t"> 
   <tr><td id="t1">un</td></tr> 
   <tr><td id="t2">deux</td></tr> 
 </table> 
 </body> 
 </html>

Je ferai des tests demain-.
Merci et bonne soirée,
dh

Bonsoir Watilin,
L'audio et le logo ont leurs id, mais :
Code:

1 2 3 4 5 6 7 function pause() { var audio = document.getElementById("audio"); } function load() { var el = document.getElementById("logo"); el.addEventListener("click", audio.pause, false); }
Je fais plus que débuter en js. Où sont mes (nombreuses) erreurs ??? :(
Merci pour votre aide et bonne fin de soirée,
dh

15/06/2015, 09h52
LuluHow

Tu n'est pas obligé de passer par un addEventListener, un .onclick suffit je pense.

JSFiddle

Citation:
Envoyé par dhillig
Bonsoir Watilin,
L'audio et le logo ont leurs id, mais :
Code:

1 2 3 4 5 6 7 function pause() { var audio = document.getElementById("audio"); } function load() { var el = document.getElementById("logo"); el.addEventListener("click", audio.pause, false); }
Je fais plus que débuter en js. Où sont mes (nombreuses) erreurs ??? :(
Il y en a juste deux petites :

Tu n'as pas besoin de déclarer une fonction pause ;
La variable audio que tu as déclarée dans ta fonction pause n'est pas à portée depuis la fonction load. N'oublie pas que la portée des variables en JavaScript est délimitée par les fonctions.

Une autre chose qui pourrait éventuellement poser problème, c'est le changement de contexte de la méthode pause. Prenons ce code comme exemple :
Code:

1 2 3 4 5 function load() { var audio = document.getElementById("audio"); var el = document.getElementById("logo"); el.addEventListener("click", audio.pause, false); }
Lorsque audio.pause est appelée, elle reçoit el comme contexte, c'est-à-dire que l'objet this dans cette fonction sera el. C'est une particularité de addEventListener. Le problème est que pause est censée avoir audio comme contexte, et comme c'est une méthode native, tu n'as aucun moyen de savoir si elle utilise this ou pas. Peut-être que ça ne pose pas de problème dans le cas présent, mais sache que ce problème peut se produire avec d'autres objets.

Ça arrive par exemple avec l'objet console :

Code:

document.body.addEventListener("click", console.log, false);

Lors d'un clic, je reçois ce message :

Citation:

TypeError: 'log' called on an object that does not implement interface Console.

Désolé si je rentre dans les détails techniques, mais il vaut mieux que tu saches d'où vient le problème si jamais tu le rencontres un jour.
En fait, la solution est simple :

Code:

document.body.addEventListener("click", function(event){ console.log(event); }, false);

Et donc dans ton cas :

Code:

el.addEventListener("click", function() { audio.pause(); }, false);

Mais si tu préfères, tu peux prendre la solution de LuluHow ;)

Citation:

Envoyé par LuluHow

Tu n'est pas obligé de passer par un addEventListener, un .onclick suffit je pense.

Mais alors en quoi addEventListener est utile finalement ? Réponse : il permet d'attacher plusieurs fonctions sur le même évènement du même objet. Alors que si on modifie un onclick, la fonction précédente est oubliée.

Il n'y a rien de plus fouuuh, plus gentiiiiiih… :whistle:

Bonsoir Watilin et LuluHow,
Un grand merci à vous :ptdr:
Le code le LuluHow, simple et super efficace.
Merci bcp Watilin pour toutes tes explications (j'adore ça... apprendre ! ;) ).
Problème résolu mais afin de comprendre davantage addEventListener, le code approprié à mon prob (résolu) serait :
Code:

1 2 3 4 5 6 7 8 function () { var audio = document.getElementById("audio"); } function load() { var audio = document.getElementById("audio"); var el = document.getElementById("logo"); el.addEventListener("click", function() { audio.pause(); }, false); }
Ou sans la fonction () - je n'ai pas trop compris :oops:
Code:

1 2 3 4 5 function load() { var audio = document.getElementById("audio"); var el = document.getElementById("logo"); el.addEventListener("click", function() { audio.pause(); }, false); }
Dans ces deux cas, le son ne s'arrête pas. Il y a donc un truc que j'ai pas compris 8O
Encore merci à vous et bonne soirée :zoubi:
TOP CE SITE ET SES MEMBRES !!!
dh

Code:

1
2
3
4
5
6
7
8
    function load() {
        var audio = document.getElementById("audio");
        var el = document.getElementById("logo");
        el.addEventListener("click", function() { 
            audio.pause(); 
        }, false);
    }
window.onload = load();

Tu dois appeler utiliser la méthode onload. Cela permet de lancer ta fonction load() une fois que tous les éléments sont chargés dans le DOM.

16/06/2015, 02h22
Watilin
Lulu n'oublie pas que dhillig appelle déjà load depuis son <body>.
Il faut choisir entre window.onload = ... et <body onload="..."> sinon la fonction risque d'être appelée plusieurs fois.

Pour moi le problème est plutôt là :
Code:

1 2 3 function () { var audio = document.getElementById("audio"); }
Encore une fois, la console aurait aidé à trouver tout de suite le problème :

Citation:

SyntaxError: function statement requires a name

Dhillig, quand je te disais que tu n'avais pas besoin de déclarer la fonction pause, je ne voulait dire de retirer seulement le nom, mais la fonction entière ;)

Pour rentrer dans les détails, la syntaxe JavaScript a deux façons de considérer une fonction : la fonction-statement (instruction) et la fonction-expression. C'est pas évident à expliquer clairement mais je vais essayer, car ça rendra plus clair le message d'erreur de la console. En effet, pourquoi ne peut-on pas retirer son nom à la fonction audio alors qu'on a le droit de passer une fonction sans nom à addEventListener deux lignes plus bas ?

Donc une fonction-statement c'est quand tu déclares une fonction dans le but de l'appeler plus tard. Une fonction-statement a obligatoirement un nom. De plus, elle est obligatoirement séparée de l'instruction précédente par un point-virgule, ou par une fin de ligne équivalente à un point-virgule grâce au mécanisme d'insertion automatique de point-virgule.

La fonction-expression, comme son nom l'indique, est une expression, c'est-à-dire qu'elle est un « bout de calcul ». Une expression peut faire partie d'une expression plus grande (exemple : l'expression (2 + 1) fait partie de l'expression 3 * (2 + 1)) et une fonction peut être le résultat d'un « calcul » au sens large (par exemple un appel à new Function() donne en résultat une fonction). Une fonction-expression peut ne pas avoir de nom, dans ce cas on dit qu'elle est anonyme. Également, quand on appelle une fonction, les arguments qu'on lui passe sont des expressions, dont la fonction anonyme dans cet exemple :
Code:

1 2 3 el.addEventListener("click", function() { audio.pause(); }, false);
En régle générale, pour déterminer si on a affaire à une instruction ou une expression, on peut se fier aux points-virgules : un bout de code entre deux points-virules est une instruction Les instructions, elles, sont composées d'expressions. Ils y a toutefois certains cas un peu difficiles à discerner. La logique précise est décrite par la grammaire du langage, qui est en libre accès sur Ecmascript.org.

Du fait que les interpréteurs JavaScript fonctionnent tous en analysant le code de gauche à droite, si une fonction se trouve immédiatement au début d'une instruction, elle est considérée comme un statement et doit donc avoir un nom. Ceci explique le message « fonction statement requires a name ».
16/06/2015, 22h11
dhillig

Bonsoir à tous et encore merci,
Rien à faire, mon fichier est fâché avec addEventListener :weird:
J'ai tenté tous les derniers scripts (ceux d'aujourd'hui), le son est toujours présent.
Y-a t'il conflit entre mes scripts (il y en a pas mal dans ma page) ? Peut-être...
Merci pour toutes tes explications Watilin, j'imprime (au sens propre) toute la discussion afin d'étudier tout ça sur papier... car je n'ai pas encore acquis la logique js, mais j'y travaille ;)
Encore MERCI à vous :zoubi:
Prob résolu mais ravi que la discussion continue/est continuée...
Bonne soirée,
dh

ERRATUM : que la discussion continue/AI continuée... :aie: