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…

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager