Extraire des données d'un son qui est joué.

Signaler
-
Messages postés
27
Date d'inscription
mardi 9 août 2011
Statut
Membre
Dernière intervention
21 mai 2020
-
Bonsoir,

sur le site sur lequel je travaille, j'ai installé du son, en tache de fond. Je voudrais installer un visuel, qui soit corrélé au son. Après une longue recherche, je ne trouve pas comment faire ???

Merci de votre aide.

3 réponses

Salut,
en effet pas de fonction native pour ça dans l'API audio.
Ceci dit j'ai trouvé assez rapidement(moins de 10s) des scripts comme ceux ci qui le font:
https://www.patrick-wied.at/blog/how-to-create-audio-visualizations-with-javascript-html
https://openclassrooms.com/forum/sujet/animation-courbe-audio

Il y a probablement des projets plus avancé ope source du côté de GITHUB en cherchant les lecteurs customs.

Ensuite peut-être d'autres lanages sont plus adaptés pour cela comme Python mais tout dépends de ce que vous voulez faire.
Python permettra de manipuler plus facilement les sons je pense car à des fonctions natives pour agir sur les fichiers médias(côté serveur)

exemple pour le pitch:
https://stackoverflow.com/questions/3982007/change-the-pitch-and-speed-of-audio-during-playback-in-python
Messages postés
27
Date d'inscription
mardi 9 août 2011
Statut
Membre
Dernière intervention
21 mai 2020
2
Bonsoir, Tosia,

j'ai été voir le travail de Patrick Wied ; c'est intéressant. J'ai copié son code source sur ma machine : plus aucun son ne sort. J'ai repéré que c'était la ligne :
source = audioCtx.createMediaElementSource(monplayer);
qui inhibe le son. Des idées ?
Messages postés
27
Date d'inscription
mardi 9 août 2011
Statut
Membre
Dernière intervention
21 mai 2020
2
Si l'un-e d'entre vous se sent de mettre le nez dedans, voici l'ensemble du script :
var monplayer=d.$('audio');
var scene=d.$('scene');
var hre;
var double=32;
var hrs=new Array;

var audioCtx=new AudioContext;
var analyser=audioCtx.createAnalyser();
var liste=new Uint8Array(double);
analyser.fftSize=double;
 
animer=function() 
{ 
audioCtx.createMediaElementSource(monplayer).connect(analyser);
analyser.getByteFrequencyData(liste);
d.$('h1').html(liste); 
analyser.connect(audioCtx.destination);
for(var n=0; n<double; n++ ) hrs[n].style.bottom=liste[n]+'vw'; 
if(run)requestAnimationFrame(animer);
}

for(var n=0; n<double; n++ )
{ 
hre=d.createElement('hr'); 
hre.style.left=n+.5+'vw';
hrs.push(hre);
scene.add(hre); 
}
 

Cela ne fonctionne pas : liste affiche imperturbablement une liste de zéros :o(
Messages postés
27
Date d'inscription
mardi 9 août 2011
Statut
Membre
Dernière intervention
21 mai 2020
2
Bonsoir,

j'avoue, je suis un tueur : j'ai, enfin, trouvé l'équipe qui gagne.

<?php 

$main["div id=\"scene\""] = VIDE ;

$script = "
var scene=d.$('scene');
var hre;
var nombre=32;
var hrs=new Array;
var run=false;

var myplayer=new Audio; myplayer.src='gyako.mp3';

scene.on('click',function(){
if(run=!run) { myplayer.play(); d.setvaleur=setInterval(animer,200); } 
else {  myplayer.pause(); clearInterval(d.setvaleur); }
});

var audioCtx=new AudioContext;
var analyser=audioCtx.createAnalyser();
var liste;

audioCtx.createMediaElementSource(myplayer).connect(analyser);
analyser.connect(audioCtx.destination);
 
animer=function() 
{
liste=new Uint8Array(nombre);
analyser.getByteFrequencyData(liste);
for(var n=0; n<nombre; n++ ) hrs[n].style.bottom=liste[n]/9+'vw'; 
}

for(var n=0; n<nombre; n++ )
{ 
hre=d.createElement('hr'); 
hre.style.left=n+.5+'vw';
hrs.push(hre);
scene.add(hre); 
}
" ;

?>


Si vous voyez des améliorations...

Merci de votre contribution.

https://labo.doobee.fr/?son-visu