Lenteur de l'audio avec Javascript
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:
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:
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> |
