Premier tuto rapide. On va commencer avec un mélange de SoundMixer et de ByteArray pour sortir un petit effet sympa à la WMP comme on en voit un peu partout, plus ou mois bien, depuis la sortie de l’as3.

Principale difficulté ? l’imagination, on ne le repetera jamais assez.

Première chose à savoir, charger la musique. Facile !

var s:Sound = new Sound();
s.load(new URLRequest(”loop.mp3″));

var sc:SoundChannel;
sc = s.play(0, 1000);

Une fois la musique chargée et lancée, entrons dans le vif du sujet.

Une fois passée entre les mains du magnifique SoundMixer.computeSpectrum, le byteArray nous fait ressortir un tableau de 256 bits.
Chaque nouvelle frame, un nouveau tableau est renvoyé et tout ca, en fonction de la musique lancée plus haut. N’est ce pas tout simplement génial ?
A partir là, c’est à votre cerveau de faire la suite, imaginer comment retranscrire ce tableau de bits à l’écran.

Prenons un exemple basique, le plus courant et surement le plus simple a mettre en place : L’Histogramme.
Il vous suffit de tracer une ligne vertical pour chaque bit.

Résultat :

Code :

var sprMain:Sprite = new Sprite();
this.addChild(sprMain);
 
var s:Sound = new Sound();
s.load(new URLRequest("loop.mp3"));
 
var sc:SoundChannel;
sc = s.play(0, 1000);
 
var ba:ByteArray = new ByteArray();
 
this.addEventListener(Event.ENTER_FRAME, showAmplitude);
 
function showAmplitude(eventArgs:Event) {
	SoundMixer.computeSpectrum(ba,true,0);

	sprMain.graphics.clear();
	for(var i=0; i < 256; i++) {
		a = ba.readFloat();
		var num:Number = a*100;
		sprMain.graphics.moveTo(i*3, 400);
		sprMain.graphics.lineStyle(2, 0x009E00, 1);
		sprMain.graphics.lineTo(i*3, 400-(num*2));
	}
}

Download this code: spectrum2.as

Comme vous le voyez, rien de compliquer… Voici maintenant un deuxième exemple un peu plus fun (pas forcement plus joli d ailleurs…)

Résultat :

Code :

var sprMain:Sprite = new Sprite();
this.addChild(sprMain);
 
var s:Sound = new Sound();
s.load(new URLRequest("loop.mp3"));
 
var sc:SoundChannel;
sc = s.play(0, 1000);
 
var ba:ByteArray = new ByteArray();
 
var bmp:BitmapData = new BitmapData(800, 800, false, 0x000000);
var bmp2:BitmapData = new BitmapData(800, 800, true, 0x00000000);
 
this.addChild(new Bitmap(bmp));
 
var blur:BlurFilter = new BlurFilter ( 2, 2, 3 );
 
var aColors:Array = [0x00FF00, 0xFF0000];
var aAlpha:Array = [100, 100];
var aRatios:Array = [0, 255];
var matrix:Matrix = new Matrix();
matrix.createGradientBox ( 850, 1, 0, 0, 0);
 
var nb:Number = 0;
 
this.addEventListener(Event.ENTER_FRAME, showAmplitude);
 
function showAmplitude(eventArgs:Event) {
	SoundMixer.computeSpectrum(ba,true,0);

	sprMain.graphics.clear();
	sprMain.graphics.moveTo(i*3, 200);
	sprMain.graphics.lineStyle(1, 0xFFFFFF, 1);
	sprMain.graphics.lineGradientStyle ( 'linear', aColors, aAlpha, aRatios,
matrix, 'pad', 'linearRGB', 0.1);
	for(var i=0; i < 128; i++) {
		a = ba.readFloat();
		if(i%3 == 0) {
			var n:Number = a;
			var num:Number = a*100;
			sprMain.graphics.lineTo(i*6, 150-num);
		} else {
			n += a;
		}
	}

	bmp.draw(sprMain, null, null, "add");
	bmp.applyFilter(bmp, bmp.rect, new Point(0, 0), blur);
 
	var matrixBmp:Matrix = new Matrix();
	matrixBmp.scale(1.03, 1.03);
	var trans:Number = -(1.03-1)/2;
	matrixBmp.translate(trans*768, trans*100);
	bmp2.draw(bmp, matrixBmp);

	bmp.draw(bmp2);

}

Download this code: spectrum1.as

Amusez vous bien et bonne nuit !

This entry was posted on Samedi, février 10th, 2007 at 1:40 and is filed under Tutos. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.