5568 sujets

Sémantique web et HTML

[Résolu] Optimiser lecture audio html5

Hello,

J'ai réalisé un mini piano virtuel avec un mélange CSS, PHP et Javascript, avec le <audio> de html5.

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 trop long, il faut cliquer deux ou trois fois pour que le son se relance.

Des idées pour que ce soit plus fluide ?

Merci par avance !

La démo
Le code hors CSS :
<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 
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>

Modifié par cyberlp23 (04 Mar 2018 - 08:48)
Bonjour,
petit détail, qui n'a rien à voir avec ton problème, le LA et le SI jouent dans une octave plus basse que les autres notes. Ça vient sans doute de ton fichier d'origine mp3.
Pour le reste, je ne connais pas le php, mais tu devrais voir du côté de la rapidité de balayage du clavier par le programme.

Cordialement.
Modifié par Bongota (04 Mar 2018 - 10:24)
Euh, alors là c'est curieux, le LA et le SI sont corrects chez moi !

Pour ce qui est de la vitesse de balayage du clavier, ça se traite comment ? Smiley confus
Je viens de tester de nouveau sous Firefox 52.4.0 et je suis formel, le LA et le SI sont bien joués une octave plus bas. Je suis musicien pro, mais peut-être que ce dimanche matin Smiley cligne
Et je me rends compte que les notes noires de ton clavier ne sont pas actives. Marlène va te tomber dessus Smiley biggrin Je blague, mais ton projet, c'est pour le fun ou pour permettre à tes visiteurs de jouer du clavier ?

Dans les claviers professionnels, l'électronique balaye continuellement les contacts des touches, à grande vitesse. De cette façon, plusieurs notes appuyées simultanément paraissent jouées en même temps pour nos pauvres cerveaux. Je suppose que la répétition de la même touche relève du même problème. Grande vitesse de balayage, tout est relatif, quelque MHz seulement. Dans ces claviers, c'est un processeur dédié qui fait le travail, pas un programme lent avec un navigateur lent (sans aucune moquerie de ma part, bien sûr, chacun son travail).
Il faut que je me décide à apprendre le php.
A plus.
Non ce n'est pas pour jouer du clavier à proprement parler, c'est pour un jeu, il faut juste que le visiteur puisse entendre le son de quelques touches blanches.

Ecoute je suis musicien aussi et je LA et le SI sont corrects chez moi, je ne vois vraiment pas d'où le problème peut venir Smiley decu Les sons se trouvent là, ça te fait la même chose ? http://www.edysseus.com/signedecroix/sounds/

Sinon pour ce qui est de mon problème, j'ai essayé en préchargeant les sons dans le <head> avec <link rel=preload as=audio> mais ça ne change rien.
Oui, j'ai le même problème en jouant les sons directement sur ton lien !!!

Si d'autres personnes ici pouvaient tester, je saurai alors si ça vient de chez moi. Pour lire les sons mp3 et autres, Firefox n'a pas besoin de plugin, il utilise les bibliothèques intégrées du système d’exploitation. La hauteur des sons n'est normalement pas concernée par tout ça. Le son n'est pas fabriqué par Firefox, il est tiré d'un fichier mp3.
De toute façon, ce problème, pour être mystérieux, n'est pas très grave pour ton application.

A plus.
Modérateur
Sinon pour le problème de délai, c'est à cause du comportement de play: cette méthode fait passer pause à false et redémarre le son si celui-ci est terminé.

Pour atteindre ton objectif il faut réinitialiser ton son à chaque click:


audio.pause();
audio.currentTime = 0;
audio.play();
Meilleure solution
kustolovic a écrit :
Sinon pour le problème de délai, c'est à cause du comportement de play: cette méthode fait passer pause à false et redémarre le son si celui-ci est terminé.
Pour atteindre ton objectif il faut réinitialiser ton son à chaque click:

audio.pause();
audio.currentTime = 0;
audio.play();

Merci, en effet ça marche avec ça, nickel !

En revanche je n'ai aucune explication concernant cette histoire de LA et de SI. Je viens de réécouter les fichiers audio en local, de les réuploader, de réécouter, ils sont toujours corrects chez moi. Et j'ai demandé à 2 autres personnes de tester le site sur leur téléphone et ils entendent comme moi. Extrêmement bizarre. Peut-être une histoire d'hallucination auditive qui divise l'humanité en 2, comme la robe noire et bleue / blanche et dorée ? Smiley smile
Oui, il faut se méfier de nos oreilles, mêmes celles des musiciens (surtout...). C'est l'un des organes les plus influençables par les éléments extérieurs (émotionnels, culturels, etc.).
Pour éliminer toute influence quelconque, j'ai passé le sol, la et si de tes fichiers mp3 à l'analyseur de spectre. La fondamentale du la et du si est bien vers le la 3 et si 3. Alors que pour le sol qui précède, elle est à sol 4. Analyseur utilisé : celui de Audacity.

Mais puisque ton problème est résolu, on va en rester là.
Sujet clos
Aller à