Coder un même évènement en une seule fois

**Sablhotel** · 01/03/2019, 23h09

Bonjour,

C'est la première fois que je vous sollicite. Je suis actuellement étudiante et je code un site pour l'apprentissage de l'anglais dans lequel j'ai inséré 30 fichiers audios.
Il y a donc 30 fois ce code dans le fichier javascript :

Code :

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

1
2
3
4
5
6
document.getElementById('bip1').addEventListener('click', JouerSon1);
 
function JouerSon1() {
    var sound = document.getElementById("Son1");
    sound.play();
}

Comment puis-je faire pour le simplifier?
Même de votre aide.

**danielhagnoul** · 02/03/2019, 01h47

30 fois le même code, impossible avec des ID ! Car un ID doit être unique dans la page web ! Il ne peut donc y avoir qu'un seul 'bip1 et un seul Son1.

Mais je présume qu'il y a bip1, bip2 etc et idem pour Son.

Un exemple :

Code HTML :

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
40
41
42
43
44
45
46
47
48
<button id="bip1">Joue Son1</button>
<button id="bip2">Joue Son2</button>
<button id="bip3">Joue Son3</button>
<button id="bip4">Joue Son4</button>
 
<figure>
    <figcaption>Listen to the T-Rex:</figcaption>
    <audio
        id="Son1"
        controls
        src="http://www.tafelrunde.net/hlds/sound/ambience/mtrex.wav">
            Your browser does not support the
            <code>audio</code> element.
    </audio>
</figure>
 
<figure>
    <figcaption>Listen to the T-Rex:</figcaption>
    <audio
        id="Son2"
        controls
        src="http://forcex.home.mindspring.com/dinoroar.wav">
            Your browser does not support the
            <code>audio</code> element.
    </audio>
</figure>
 
<figure>
    <figcaption>Listen to the T-Rex:</figcaption>
    <audio
        id="Son3"
        controls
        src="http://www.amodinosaur.com/Uploads/file/20150915/1442247102672373.wav">
            Your browser does not support the
            <code>audio</code> element.
    </audio>
</figure>
 
<figure>
    <figcaption>Listen to the T-Rex:</figcaption>
    <audio
        id="Son4"
        controls
        src="http://www.amodinosaur.com/Uploads/file/20150914/1442235779475029.wav">
            Your browser does not support the
            <code>audio</code> element.
    </audio>
</figure>

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
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    const elemsBip = Array.from(document.querySelectorAll('[id^="bip"]'));
 
    for (const elemBip of elemsBip){
        elemBip.addEventListener('click', ev => {
            document.querySelector('#Son' + ev.target.id.slice(-1)).play();
        }, {
            capture: false,
            passive: true,
            once: false
        });
    }
 
    // fin code du test
 
}, {
    capture: false,
    passive: true,
    once: false
});

**danielhagnoul** · 02/03/2019, 09h08

Mon exemple ne traite que bip1 à bip9, pour en traiter plusieurs dizaines il faut les numéroter bip01, bip02, etc.

Au lieu d'un seul caractère, il faut maintenant copier les deux derniers caractères de l'ID : ev.target.id.slice(-2)

**Sablhotel** · 02/03/2019, 09h27

Bonjour,

Merci pour vos réponses si rapides!
je suis tellement nulle en javascript (vous n'imaginez même pas!) que je ne comprends pas votre réponse.
Mais vous avez raison, il y a plusieurs bips et sons (30 différents).
Mon code html (que j'ai copié sur un forum) est le suivant :

Code HTML :

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

1
2
3
4
5
<audio id="Son6" src="../audios/audios_poem/song.mp3"></audio>
    	<div id="bip6">
        <img src="../images/logo_son.png" />
         <span> song </span>
    	</div>

Je veux juste qu'en cliquant sur une image, cela déclenche le fichier mp3 associé.

Mon code est-il en phase avec votre réponse?

Merci milles fois de votre aide.

Invité · 02/03/2019, 11h01

Bonjour,

il n'y a pas besoin d'avoir le moindre player audio dans le code HTML.
On peut très bien jouer du son sans balise <audio>.

VERSION 1 :

1- Tout ce dont tu as besoin dans le code HTML, ce sont les "touches" :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<div class="touches">
  <div data-id="1"><img src="../images/logo_son.png" /><br/>Son 1</div>
  <div data-id="2"><img src="../images/logo_son.png" /><br/>Son 2</div>
  <div data-id="3"><img src="../images/logo_son.png" /><br/>Son 3</div>
  <div data-id="4"><img src="../images/logo_son.png" /><br/>Son 4</div>
  <div data-id="5"><img src="../images/logo_son.png" /><br/>Son 5</div>
  <div data-id="6"><img src="../images/logo_son.png" /><br/>Son 6</div>
  <div data-id="7"><img src="../images/logo_son.png" /><br/>Son 7</div>
  <div data-id="8"><img src="../images/logo_son.png" /><br/>Son 8</div>
  ...
</div>

L'attribut data-id va permettre d'identifier le son à jouer.

2- Dans le script JavaScript :

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
"use strict";
// -------------
// 1- Liste des URL des fichiers audio
const musics = [
  "", // l'index commence à 0 (zéro) : on ne met rien ici
  "https://www.memoclic.com/medias/sons-wav/2/729.wav", // 1
  "https://www.memoclic.com/medias/sons-wav/2/728.wav", // 2
  "https://www.memoclic.com/medias/sons-wav/2/727.wav", // ...
  "https://www.memoclic.com/medias/sons-wav/2/726.wav",
  "https://www.memoclic.com/medias/sons-wav/2/725.mp3",
  "https://www.memoclic.com/medias/sons-wav/2/724.mp3",
  "https://www.memoclic.com/medias/sons-wav/2/723.mp3",
  "https://www.memoclic.com/medias/sons-wav/2/722.mp3",
];
// -------------
// 2- Touches
const touches = document.querySelectorAll(".touches > div"); // on cible les touches
touches.forEach(function(touche) {
  touche.addEventListener("click", function() { // au click sur une touche
    let id = this.dataset.id; // on récupère le contenu de data-id
    playSound(id);
  });
});
// ------------------------
// 3- player audio - SANS balise <audio> dans la page
function playSound(id) {
  var audio = new Audio( musics[id] ); // on crée (virtuellement) le player audio
  audio.play();
}

3- Un peu de CSS :

Code CSS :

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

1
2
3
4
5
6
7
8
.touches > div {
  display: inline-block;
  border: 1px solid green;
  min-width: 60px;
  height: 60px;
  text-align:center;
  cursor:pointer;
}

VERSION 2 :

Néanmoins, si tu veux vraiment un lecteur audio dans le code HTML (pour avoir accès aux boutons de contrôle du son, entre autres) :

1- rajoute juste :

Code HTML :

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

<audio id="player-audio" src="" controls></audio>

2- remplace la fonction playSound() par :

Code JavaScript :

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

1
2
3
4
5
6
7
// ------------------------
// 3- player audio - AVEC balise <audio> dans la page
const player_audio = document.getElementById('player-audio');
function playSound(id) {
  player_audio.src = musics[id]; // on applique l'URL du fichier musique
  player_audio.play();
}

Remarque :

la solution SANS balise <audio> permet de jouer plusieurs sons EN MEME TEMPS
la solution AVEC balise <audio> ne permet de jouer QU'UN SEUL son à la fois.

Voir l'exemple VERSION 1 : https://codepen.io/jreaux62/pen/VRabvv
Voir l'exemple VERSION 2 : https://codepen.io/jreaux62/pen/JzXNyo
Pour aller plus loin :https://codepen.io/jreaux62/pen/ZMyBvp (avec clic sur les touches du clavier)

Envoyé par danielhagnoul

Mon exemple ne traite que bip1 à bip9, pour en traiter plusieurs dizaines....

@danielhagnoul
Cette problématique se règle très facilement (et sans bidouillage * ) :

Code JavaScript :

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

            document.querySelector('#Son' + ev.target.id.replace('bip','')).play();

* avec ev.target.id.slice(-2), tu ne peux aller QUE jusqu'à bip99... (et ça oblige effectivement à écrire bip01, bip02,..., bip09)
Quid de bip100 et suivants ?

ev.target.id.replace('bip','') est LA solution fiable

**Watilin** · 03/03/2019, 00h05

Je me permets un petit pinaillage

Envoyé par jreaux62

On peut très bien jouer du son sans balise <audio>.

Code :

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

var audio = new Audio( musics[id] ); // on crée (virtuellement) le player audio

Le constructeur new Audio renvoie un objet HTMLAudioElement, c’est donc bel et bien une balise <audio>.

Code :

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

console.log(Object.getPrototypeOf(new Audio());

la solution SANS balise <audio> permet de jouer plusieurs sons EN MEME TEMPS
la solution AVEC balise <audio> ne permet de jouer QU'UN SEUL son à la fois.

Attention quand on manipule plusieurs éléments <audio>, j’ai pu constater que, sous Firefox au moins, ça causait des ralentissements sur le long terme. Ça ressemble à une fuite de mémoire, donc ça sera sans doute corrigé à l’avenir… J’espère

Sinon, il existe vraiment (

) un moyen de faire du son sans <audio>, en utilisant l’API Web Audio. Notamment, on trouve sur la page de doc de OscillatorNode un exemple de code qui permet de générer un bip :

Code :

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

1
2
3
4
5
6
7
8
9
10
// crée un contexteaudio
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 
// create Oscillator node
var oscillator = contexteAudio.createOscillator();
oscillator.connect(contexteAudio.destination);
oscillator.type = 'sine';
oscillator.frequency.value = 440; // valeur en hertz
 
oscillator.start();

J’ai remplacé le 'square' de l’exemple original par 'sine', c’est plus agréable à l’oreille. Pour arrêter le son, il faut exécuter cette instruction :

Code :

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

oscillator.stop();

**psychadelic** · 03/03/2019, 02h56

Je me permets [aussi] un petit pinaillage

plutôt que

Code JavaScript :

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

1
2
3
4
5
6
7
8
// 2- Touches
const touches = document.querySelectorAll(".touches > div"); // on cible les touches
touches.forEach(function(touche) {
  touche.addEventListener("click", function() { // au click sur une touche
    let id = this.dataset.id; // on récupère le contenu de data-id
    playSound(id);
  });
});

utiliser une délégation d’évènements

Code JavaScript :

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

1
2
3
4
5
6
// 2- Touches
document.querySelector(".touches").onclick = function(e) {
  if (!e.target.matches('div')) return;
  e.stopPropagation();
  playSound(e.target.dataset.id);
}

ce qui correspond mot pour mot à la question : "Comment coder un même évènement en une seule fois? "

**Sablhotel** · 03/03/2019, 10h15

Bonjour,

Merci à tous pour vos réponses.
Je vais prendre en compte vos propositions de code ce soir et vous tiens au courant!

Coder un même évènement en une seule fois

JavaScript

Discussions similaires

Partager

Partager