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

Version imprimable

01/03/2019, 23h09
Sablhotel

Coder un même évènement en une seule fois
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:

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.

:salut:

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:

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:

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
});

02/03/2019, 09h08
danielhagnoul

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)
02/03/2019, 09h27
Sablhotel
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:

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.

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:

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:

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:

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:

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

2- remplace la fonction playSound() par :
Code:

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)

Citation:

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 * :aie:) :

Code:

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 ? :calim2:
ev.target.id.replace('bip','') est LA solution fiable :ccool:

Je me permets un petit pinaillage :P

Citation:

Envoyé par jreaux62

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

Code:

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:

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

Citation:

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 (:D) 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:

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:

oscillator.stop();

Je me permets [aussi] un petit pinaillage :aie:

plutôt que

Code:

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:

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

03/03/2019, 10h15
Sablhotel

suite réponses à ma question

Bonjour,

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