R�cup�rer la fr�quence d'un son mediaElement

**msdaath** · 12/06/2015, 21h26

Bonsoir � tous, j'ai d�j� vu pas mal de sujets sur diff�rents forums � propos de �a, mais honn�tement impossible de m'en sortir.
J'aimerais r�cuperer la fr�quence d'un musique que je r�cupere via l'API de deezer pour l'adapter dans des jeux (il s'agit d'un projet de fin d'ann�e).
Mais je suis coinc� au d�but : Obtenir la fr�quence. Je pr�cise que je d�bute compl�tement dans cette utilisation de l'API et que je n'ai eu aucun cours dessus, donc il est possible que certaines choses soient aberrantes.

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
<html>
 
<script type="text/javascript"></script>
<script type="text/javascript" src="./JS/jquery.js"></script>
 
</head>
 
<body>
 
    <audio controls autoplay id="player" crossorigin="anonymous">
        <source src="<?php  echo ($resultat[" data "][0]["preview "]); ?>" type="audio/mpeg">
    </audio>
    <div>
        <input id="slider" type="range" min="100" max="22000" value="100" />
        <div id="freq-display">100</div>
    </div>
 
</body>
 
</html>

Voici donc l'html associ�, le lecteur recoit la requ�te PHP, aucun soucis dans la diffusion.

Code :

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
var ctx = new (window.AudioContext || window.webkitAudioContext)();   
var audioEl = document.getElementById("player");
var elSource = ctx.createMediaElementSource(audioEl); 
elSource.connect(ctx.destination);
var analyser = ctx.createAnalyser();
 
var array =  new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);
 
window.setTimeout("printHz()",1000);
 
function printHz(evt){
	console.log(analyser)
	console.log(array);
	window.setTimeout("printHz()",1000);
}

Donc l� techniquement j'en suis ici (j'ai essay� d'autres choses mais rien n'y fait).
le console.log(elSource) m'affiche bien les caract�ristiques du lecteur, si je console.log(analyser) de m�me, j'obtiens des informations. Seulement voil�, cela ne me permet pas de d�terminer la fr�quence
je vois qu'il faut utiliser quelque chose du type

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
var array =  new Uint8Array(analyser.frequencyBinCount);
        analyser.getByteFrequencyData(array);

mais j'obtiens un tableau de 1024 cases 0 au lieu d'une alternance 0/1.

Donc voil�, je ne sais pas si c'est tr�s clair (�a ne l'est pas beaucoup pour moi) mais merci d'avance si quelqu'un qui ma�trise veut bien se pencher dessus !

**Watilin** · 13/06/2015, 02h38

L'ann�e derni�re, j'avais aid� un bonhomme qui avait le m�me genre d'objectif que toi. C'�tail par l�.

Actuellement ton analyseur n'est pas connect� � ta source donc il ne re�oit pas d'information. D'apr�s le sch�ma de cette page, il faut connecter l'analyseur � la source, puis la destination � l'analyseur :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
var analyser = ctx.createAnalyser();
elSource.connect(analyser);
analyser.connect(ctx.destination);

Si tu regardes dans les docs du MDN, notamment ce guide, tu verras qu'ils mentionnent � plusieurs reprises le Voice-O-matic. J'ai �t� voir, c'est plut�t impressionnant ! Je pense que tu peux t'en inspirer.

**msdaath** · 14/06/2015, 00h09

Bonsoir et merci beaucoup ! Effectivement si je ne connecte pas mon analyser, je pouvais toujours attendre pour les valeurs...

Du coup merci beaucoup, apr�s �a et en suivant les pages sur lesquelles tu m'as redirig� j'ai r�ussi � obtenir mon tableau, ensuite j'en fais une moyenne et c'est gagn� !

je mets le code pour ceux qui pourraient passer par ici : (cela permet d'obtenir une frequence moyenne, parfaite pour g�rer la vitesse d'un scroll sur un jeu!)
Par contre je ne comprends toujours vraiment � quoi sert le getByteFrequencyData malgr�s la doc, enfin surtout j'ai l'impression de l'utiliser pour rien l� ?
Une autre question que je me pose, pourquoi les valeurs mettent elles du temps � descendre � 0 ? (c'est � dire que m�me lorsque la musique ne joue plus, les valeurs ne baissent pas brutalement.
Et en petite pr�cision, y a t'il toujours au moins 1024 valeurs ? les valeurs >20 n'ont pas vraiment de sens, ne serait t'il pas plus exacte d'ajouter un if(array[i]>=20) dans le while de ma fonction getMoyenne ?

Quoi qu'il en soit, merci beaucoup !

Code :

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
var ctx = new(window.AudioContext || window.webkitAudioContext)(); // creation contexte
var audioEl = document.getElementById("player"); // selectionne l'objet du DOM
var elSource = ctx.createMediaElementSource(audioEl); // on en fait la source
elSource.connect(ctx.destination); // on connecte la source 
var analyser = ctx.createAnalyser(); // on crée un analyser
elSource.connect(analyser); // on connecte la source a l'analyser
analyser.connect(ctx.destination); // on connecte l'analyser a la destination
var count; //les variables
var FTTData;
var array;
var moyenne;
window.setTimeout("printHz()", 500);
 
function printHz(evt) {
    count = analyser.frequencyBinCount;
    FTTData = new Uint8Array(count);
    analyser.getByteFrequencyData(FTTData);
    moyenne = getMoyenne(FTTData);
    console.log(FTTData);
    window.setTimeout("printHz()", 500);
}
 
function getMoyenne(array) {
    var i = 0;
    var longueur = array.length;
    var value = 0;
    while (i < longueur) {
        value += array[i];
        i++
    }
    moyenne = value / longueur;
    console.log(moyenne);
}

Encore une fois il n'est pas garanti que le code soit d�pourvu de lignes aberrantes !

**Watilin** · 14/06/2015, 02h46

Envoy� par msdaath

Par contre je ne comprends toujours vraiment � quoi sert le getByteFrequencyData malgr�s la doc, enfin surtout j'ai l'impression de l'utiliser pour rien l� ?

Dans le but d'utiliser le moins de m�moire possible, getByteFrequencyData ne cr�e pas un tableau � 1024 entr�es � chaque fois que tu l'appelles. C'est � toi de lui dire dans quel tableau tu veux qu'il mette les donn�es. Ainsi, quand tu ex�cutes l'instruction analyser.getByteFrequencyData(FFTData), l'analyseur met ses donn�es dans FFTData.

Une autre question que je me pose, pourquoi les valeurs mettent elles du temps � descendre � 0 ? (c'est � dire que m�me lorsque la musique ne joue plus, les valeurs ne baissent pas brutalement.

Une partie de la r�ponse se trouve ici. L'analyseur a une propri�t� smoothingTimeConstant �gale � 0.8 par d�faut et qui est une sorte de � facteur d'amortissement � qui fait que les valeurs mettent un certain temps � changer.

Et en petite pr�cision, y a t'il toujours au moins 1024 valeurs ? les valeurs >20 n'ont pas vraiment de sens, ne serait t'il pas plus exacte d'ajouter un if(array[i]>=20) dans le while de ma fonction getMoyenne ?

L� c'est une histoire de jugement personnel� Et de maths ! En effet, la d�composition d'un signal sonore se fait par une transform�e de Fourier (c'est un proc�d� math�matique qui permet de s�parer les fr�quences pures dans un signal complexe), et l'API html5 utilise une impl�mentation connue de ce proc�d�, qui s'appelle Fast Fourier Transform (d'o� les initiales FFT). On demande � cet algorithme une certaine r�solution, la � taille � de la transform�e, qui d�termine le nombre de bandes de fr�quences dans le r�sultat. Cette taille est la propri�t� fftSize de l'analyseur, qui est 2048 par d�faut. Pour une raison qui m'�chappe un peu je l'avoue, la taille du tableau doit �tre �gale � la moiti� de fftSize.

Demander une plus grande taille donnera des r�sultats plus pr�cis mais prendra plus de temps de calcul. � l'inverse, avec une fftSize plus petite, l'algo sera plus rapide mais moins pr�cis.

Tu peux tout � fait filtrer les valeurs inf�rieures � 20, mais ce sera peut-�tre plus utile pour toi de jouer sur les propri�t�s minDecibels et maxDecibels de l'analyseur. N'h�site pas � faire des tests !

Encore une fois il n'est pas garanti que le code soit d�pourvu de lignes aberrantes !

Le seul truc un peu g�nant c'est les cha�nes pass�es � setTimeout. Passe directement tes fonctions, c'est plus propre :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part