Lenteur de l'audio avec Javascript

**cyberlp** · 03/03/2018, 19h51

Hello,

J'ai réalisé un mini piano virtuel en CSS et Javascript.
Tout marche bien si l'on passe de note en note, sauf que si l'on appuie deux fois de suite sur la même note, il y a un délai de latence un peu trop long, il faut cliquer deux ou trois fois pour que le son se relance.

Des idées pour que ce soit plus fluide ?

J'ai essayé 2 méthodes de code ci-après, kif kif (la 2e avec <audio> de HTML5).
La démo du code 1 et du code 2

Merci par avance !

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=yes" />
<style>
div#piano {
background-image: url(piano2.jpg); 
width:380px;
height:259px;
border: solid 2px black;
}
div.note {
width:53px;
height:258px;
top:0;
float:left;
}
div.note:hover {
background-color: #AAA;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
top:0;
}
div#do_ {left:0;}
div#re_ {left:52px;}
div#mi_ {left:108px;width:55px;}
div#fa_ {left:164px;width:55px;}
div#sol_ {left:224px;width:55px;}
div#la_ {left:266px;width:55px;}
div#si_ {left:328px;}
@media only screen and (max-width: 768px) {
#wrap{ padding-left: 10px; }
}
</style>
</head>
 
<body>
<div id="wrap">
    <h1>Virtual Mini-Organ</h1>
    <div id="piano">
<?php 
$gamme = array('do', 're', 'mi', 'fa', 'sol', 'la', 'si');
foreach ($gamme as &$value) { ?>
    <a href="#" onclick="myAudio('<?=$value?>');"><div id="<?=$value?>" class="note"></div></a>
<?php } ?>
    </div>
</div>
 
<script>
<?php 
foreach ($gamme as &$value) { ?>
    var <?=$value?>Audio = new Audio('sounds/<?=$value?>.mp3');
<?php } ?>
                 
function myAudio(note) {
    var sound = note+ 'Audio';
    eval(sound).play();
}
 </script>
</body>
</html>

et partie modifiée du code 2 :

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
<body>
<div id="wrap">
    <h1>Virtual Mini-Organ</h1>
<div id="piano">
<?php 
$gamme = array('do', 're', 'mi', 'fa', 'sol', 'la', 'si');
foreach ($gamme as &$value) {
?>
<a href="#" onclick="myAudio('<?=$value?>');"><div id="<?=$value?>_" class="note"></div></a>
<?php } ?>
    </div>
</div>
<?php
$gamme = array('do', 're', 'mi', 'fa', 'sol', 'la', 'si');
foreach ($gamme as &$value) {
?>
<audio type="audio/mpeg" src="sounds/<?=$value?>.mp3" width=1 height=1 id="<?=$value?>">
<?php } ?>
 
<script>
function myAudio(note) {
    document.getElementById(note).play();
} 
</script>
</body>

**headmax** · 04/03/2018, 13h41

Voici un exemple plus ou moins similaire fait jadis

.
démo : https://codepen.io/headmax/pen/yvWBvP?editors=1010

**cyberlp** · 04/03/2018, 13h52

Super programme, bravo !

Le souci c'est que j'ai besoin d'utiliser un son audio très particulier pour chaque note.
Et n'y aurait-il pas moyen d'utiliser un système de buffer dans mon cas, en gardant un petit code simple et l'utilisation de <audio> ?

**Watilin** · 04/03/2018, 21h17

Bonsoir cyberlp,

le problème est assez simple, quand tu appelles play sur un élément audio qui est déjà en lecture, ça n’a pas d’effet. En fait, pour que ça soit plus réactif, il faudrait faire trois choses :

suspendre la lecture avec pause
remettre l’audio à zéro en faisant currentTime = 0
relancer la lecture avec play

Sinon, à propos de ton code, j’ai plusieurs remarques.

D’abord, on dirait que tu es plus à l’aise en PHP. Je ne critique pas ce point. Mais c’est une mauvaise idée de mélanger les langages, ça rend le code plus difficile à lire et à faire évoluer. En l’occurence, ton code PHP ne fait appel à aucune donnée qui se trouverait exclusivement sur le serveur, on peut donc convertir le code en JavaScript de manière assez directe. Pour remplacer les déclarations var qui ont des noms dynamiques, je vais utiliser un objet simple (notes) et lui affecter des propriétés avec la notation crochet notes[...].

C’est un peu l’idée des tableaux associatifs de PHP, mais attention : les objets JS ne sont pas des tableaux !

Code js :

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
// <?php
// foreach ($gamme as &$value) { ?>
//     var <?=$value?>Audio = new Audio('sounds/<?=$value?>.mp3');
// <?php } ?>
 
var gamme = [ 'do', 're', 'mi', 'fa', 'sol', 'la', 'si' ];
var notes = {};
for (let value of gamme) {
  notes[value + "Audio"] = new Audio(`sounds/${value}.mp3`);
}
 
// ceci permet de voir dans la console (F12) à quoi ressemble notes
console.log(notes);
 
function myAudio(note) {
  var sound = note + "Audio";
  var audioElement = notes[sound];
 
  audioElement.pause();
  audioElement.currentTime = 0;
  audioElement.play();
}

Ça te permet du même coup d’éliminer ce eval, qui est très rarement une bonne idée.

Note : avec currentTime = 0 j’ai parfois des problèmes, le son qui part vers la fin au lieu de revenir au début. Je ne sais pas si tu auras le même problème, en tout cas dans toutes les docs que j’ai pu trouver, c’est censé fonctionner comme ça.

**cyberlp** · 05/03/2018, 09h07

Envoyé par Watilin

D’abord, on dirait que tu es plus à l’aise en PHP. Je ne critique pas ce point. Mais c’est une mauvaise idée de mélanger les langages,<

Tu as parfaitement raison ! Je connais très mal le javascript, d'où le mélange...

Note : avec currentTime = 0 j’ai parfois des problèmes, le son qui part vers la fin au lieu de revenir au début. Je ne sais pas si tu auras le même problème, en tout cas dans toutes les docs que j’ai pu trouver, c’est censé fonctionner comme ça.

Ca marche très bien chez moi !

Merci mille fois pour ton aide, l'effet obtenu est parfait.

Une question : y a-t-il à ta connaissance des limitations en terme de navigateurs ?

**Watilin** · 05/03/2018, 15h22

Pour ce genre d’informations je me réfère aux tables de compatibilité du MDN (par exemple celle-ci et celle-là). En l’occurence il semblerait que currentTime fasse partie de la définition initiale des médias HTML5 (la spec), donc si tu peux utiliser <audio>, tu peux très probablement utiliser currentTime.

Lenteur de l'audio avec Javascript

JavaScript

Discussions similaires

Partager

Partager