Saturday, July 31, 2010

Sound class in Actionscript 3: Part 6

In this tutorial we will learn about computeSpectrum and stopping all sounds at once. We will create a working visualizator in Flash and enhance it to look cool. Here's what our final flash will look like:


Click the flash to stop/play sound.

Actionscript 3 brings us a new useful class called ByteArray, so we can easily create visualization for our sounds. Basically, ByteArray stores binary information and is much more faster than normal AS3 array.

When we create a ByteArray, it is handed to SoundMixer.computeSpectrum, that copies the current sound during playback and computes the current sound wave for both left and right channels, then it gives us 256 values for each channel (512 in total) and each value ranges from -1.0 to 1.0. These values are saved into our ByteArray.

We can find out a value of one element of the ByteArray using getFloat function.

It all might sound complicated, but it really isn't!

Here is the full code to the example, read all the comments I've put to understand what are we doing:

import flash.media.SoundChannel;

// we play our sound
var s:Sound = new mysound();
var sc:SoundChannel = new SoundChannel();
sc = s.play(0, 1000)

// create our bytearray
var ba:ByteArray = new ByteArray();

// bitmapdata for effects (this will copy our screen and clone it with blur)
var bmd:BitmapData = new BitmapData(512, 300, true, 0x000000);
var bm:Bitmap = new Bitmap(bmd);
addChild(bm);

// our graphics
var sp:Sprite = new Sprite();
addChild(sp);

// our blur effect
var blur:BlurFilter = new BlurFilter(10,10,3);

// matrix filter. this is pretty complex, the only thing you need to change
// are the digits that go in \ line (the ones that aren't 0 in this example).
// if all the numbers in \ are 1, it will give the default colors. just play
// around to get the effect you're looking for!
// the values in \ are: red, green, blue, alpha
var colorMatrix:ColorMatrixFilter = new ColorMatrixFilter([
  0.7, 0, 0, 0, 0,
     0, 1, 0, 0, 0,
     0, 0, 2, 0, 0,
     0, 0, 0, 0.9, 0
]);

// we will move our blur with this speed
var scrX=3
var scrY=3

// add enter_frame listener
addEventListener(Event.ENTER_FRAME, loop);

function loop(e:Event):void
{
 // get ready to draw the wave line
 sp.graphics.clear();
 sp.graphics.lineStyle(3, 0xFFFFFF);
 sp.graphics.moveTo(-1, 150);
 SoundMixer.computeSpectrum(ba);
 
 // draw the line by checking 256 values in ByteArray
 for(var i:uint=0; i<256; i++)
 {
  // find out the point of the wave on the Y axis
  var num:Number = -ba.readFloat()*100 + 150;
  // draw. i*2 because my stage width is 512 and I want my
  // line to take the whole flash screen, so i multiply
  // by 2
  sp.graphics.lineTo(i*2, num);
 }
 
 // draw copy of the screen to make movement and blur
 bmd.draw(sp);
 bmd.applyFilter(bmd,bmd.rect,new Point(),blur);
 bmd.applyFilter(bmd,bmd.rect,new Point(),colorMatrix);
 bmd.scroll(scrX,scrY);
}

 // click screen to toggle sound
stage.addEventListener(MouseEvent.CLICK, togglesound)
var soundon=true
function togglesound(MouseEvent){
 if(soundon==true){
  soundon=false
  sc.stop();}else
 if(soundon==false){
  soundon=true
  sc = s.play();}
 }
Thanks for reading! If you have questions, feel free to leave a comment.

Related:

Sound class in Actionscript 3: Part 1
Sound class in Actionscript 3: Part 2
Sound class in Actionscript 3: Part 3
Sound class in Actionscript 3: Part 4
Sound class in Actionscript 3: Part 5

2 comments:

Anonymous said...

Todo muy chevere, gracias.

Ademar said...

how can i read taginfo from internal mp3? It's easy if I load external mp3 files, but doesn't work for mp3 from my library!


CODE:

var mymusic:Sound = new mymp3(); //mymusic = new var and mymp3 the class of mp3 file in library
mymusic.addEventListener(Event.ID3, getID3);

mymusic.play(); //it really plays


function getID3(Event):void{
var showtag:ID3Info = mymusic.id3;


trace(showtag.id3.artist);//nothing happens
}


Thank You

Ademar

Post a Comment