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

**dhillig** · 13/06/2015, 17h32

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

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

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

**Watilin** · 13/06/2015, 20h08

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.

**dhillig** · 14/06/2015, 00h12

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 :

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

**dhillig** · 14/06/2015, 20h06

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

Code :

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

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

**LuluHow** · 15/06/2015, 09h52

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

JSFiddle

**Watilin** · 15/06/2015, 12h58

Envoyé par dhillig

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

Code :

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

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 :

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

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 :

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

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

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

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 :

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

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

Et donc dans ton cas :

Code :

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

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

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

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…

**dhillig** · 15/06/2015, 21h37

Bonsoir Watilin et LuluHow,
Un grand merci à vous

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 :

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

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

Code :

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

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

Encore merci à vous et bonne soirée

TOP CE SITE ET SES MEMBRES !!!
dh

**LuluHow** · 15/06/2015, 22h12

Code javascript :

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

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.

**Watilin** · 16/06/2015, 02h22

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 :

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

1
2
3
function () {
  var audio = document.getElementById("audio");
   }

Encore une fois, la console aurait aidé à trouver tout de suite le problème :

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 :

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

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 ».

**dhillig** · 16/06/2015, 22h11

Bonsoir à tous et encore merci,
Rien à faire, mon fichier est fâché avec addEventListener

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

Prob résolu mais ravi que la discussion continue/est continuée...
Bonne soirée,
dh

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

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

JavaScript

Discussions similaires

Partager

Partager