Après avoir développé quelques players audio en flash, je ne m'étais jamais interessé à l'utilisation d'un Sound Spectrum (ou spectre sonore en français).

C'est chose faite ! Voici mes deux premiers tests :
Le premier correspond à une ligne qui bouge, et le second à une suite de cercles.
(musique : Moqawama par DJad)


Votre lecteur Flash n'est pas à jour. Installer la dernière version

Les explications

On initialise dans un premier temps les attributs de notre classe pour charger le son.
Petite précision : notre classe doit hériter de la class Sprite si on veut utiliser les méthodes de dessin.

s = new Sound();
ba = new ByteArray();

s.load(new URLRequest("01 - Moqawama.mp3"));
sc = s.play(0,1);

addEventListener(Event.ENTER_FRAME, readSpectrum);

La fonction statique computeSpectrum(outputArray:ByteArray, FFTMode:Bool = false, stretchFactor:Int = 0):Void génère un instantané de l’onde sonore actuelle et le place dans l'objet ByteArray spécifié. Les valeurs sont mises en forme comme des valeurs à virgule flottante normalisées allant de -1,0 à 1,0. L'objet ByteArray transmis au paramètre outputArray est remplacé par de nouvelles valeurs. La taille de l’objet ByteArray créé est fixée à 512 valeurs à virgule flottante, les 256 premières représentant le canal gauche et les autres le canal droit.


Pour traduire, on récupère dans un tableau les données de l'onde sonore dans un tableau. Ces valeurs sont comprises entre -1 et 1. Si on veux les exploiter, il suffit de boucler sur le tableau, On va donc faire une boucle sur les 256 premières valeurs car notre canal gauche est le même que notre canal droit.

Le code de notre boucle principale

graphics.clear(); // on nettoie notre Sprite
SoundMixer.computeSpectrum(ba, false, 0);

var myArray:Array< Float > = new Array();

var i : Int = 0;
while( i < 256) {
	myArray.push(ba.readFloat());
	i+=8;
}
LineSpectrum(myArray);

Et maintenant la classe qui s'occupe de dessiner les lignes, en parcourant les points et en les reliant : 

private function LineSpectrum(myFloatArray:Array< Float >){
	
	graphics.lineStyle(5, 0xA7C04A);

	for(i in 1...myFloatArray.length){
		if(i == 1){
			graphics.moveTo(20, 0); // pour le décalage sur la gauche
			graphics.lineTo((i+2) * 16, myFloatArray[i+1] * 70);
		}
		else{
			graphics.moveTo((i+1) * 16, myFloatArray[i] * 70);
			graphics.lineTo((i+2) * 16, myFloatArray[i+1] * 70);
		}
	}
}

Dans le cas des cercles, on fait une boucle sur les 256 premières valeurs et on dessine le cercle et son opacité en fonction : 

a = ba.readFloat(); // on récupère la valeur du tableau
var num:Float = a*360;
graphics.lineStyle(num/15, 0x0066FF, num/8, true, LineScaleMode.NORMAL, CapsStyle.ROUND, JointStyle.ROUND);
graphics.drawCircle(stage.stageWidth/2, stage.stageHeight/2, i);

Maintenant on peut bien évidement imaginer toute sorte de Sound Spectrum.