Les API JS/HTML5 sont vraiment très puissantes.

Ici, on balance un MP3, et ça analyse le flux en direct. Le son est joué, mais l’analyse est dirigée vers une fonction et un canvas qui en trace le spectrgramme.

Autre exemple : https://codepen.io/ZachSaucier/pen/MbdoqQ?editors=0010
On donne un MP3 (ou autre) et ça trace le spectre en direct comme les visualisations dans un lecteur audio un peu fancy.

Encore un exemple : https://mdn.github.io/voice-change-o-matic/
Utiliser le son du micro pour l’amplifier, le déformer, le filtrer… ou appliquer n’importe fonction dessus.

~

De ce que j’ai compris de cette API, c’est qu’elle fait le lien entre des sources audio (micro, mp3…) et des destinations (haut parleurs — peut-être un fichier aussi ?).

On peut, si l’on veut, utiliser un analyser() en direct branché sur le buffer/flux audio. Cet analyser contient les données audio (le spectre en fait, dans un tableau). Dans le deuxième exemple ici, on envoit directement le tableau des fréquences sur un canvas. Ça prend une boucle for() et quelques lignes (en faisant abstraction de la grosse lib qu’il utilise).

Dans l’exemple de déformation de la voix, la « source » est le micro, mais la « destination » est null. On récupère dans un premier temps les données analysées. ces données sont déformées par un algo quelconque de déformation de la voix (bass boost, réverbération, mais on peut imaginer une voix d’alien ou de chipmunk). C’est ensuite cette voix déformée qui est balancée dans une « destination », c’est à dire le haut parleur.

La destination peut également être envoyée sur le réseau dans un flux WebRTC. On peut donc appeler quelqu’un avec une voix déformée (façon "grand méchant qui demande une rançon").

Pas mal non ?

J’ai mis du temps à comprendre tout ça, mais en simplifiant au maximum les différents scripts (et surtout en cherchant à les mettre à jour car les 3/4 des spéc et des scripts sont dépréciées…), je vais produire un petit outil en ligne pour tracer le spectre d’un fichier audio :-)

Et un pour le spectrographe aussi.

Faut savoir que 10 % de mes outils me servent tous les jours (comme de déminifier de code, ou le décodeur Base64), mais les 90 % me servent surtout à me familiariser avec les différentes techno HTML5/JS.

À chaque fois que je vois un truc sympa dans une page web, je suis toujours déçu car le code source est un bordel rempli avec 5 libs et des tas de dépendances. En épluchant la doc, ce que ces pages font en 5 Mo, je cherche à le faire en 50 lignes, sans lib, uniquement en pure-JS.

Par exemple, pour tracer le spectre d’un MP3, je l’ai fait en moins de 100 lignes.
Reste à ajouter quelques éléments d’UI et ça sera bon.

— (permalink)