Discussion :

[Sablhotel]

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]

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]

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]

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

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)

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]

Je me permets un petit pinaillage

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]

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