Forked from:: NME's basic bmp audio wave graph v0.2

somewhat reusable basic bmp audio wave graph

I figured I would just give an example of how to reuse my previous code by simply extending the bitmap class. It would obviously need some work before someone would use this in a real project, but it should give you an idea of how things can be done.

As usual, although this was meant to be easy to read, this was hacked up pretty quickly; thus, if you have questions just ask.

BTW... I have seen this work on older systems, but as this draws each graph from the data given, rather than just drawing one graph, and duplicating the bitmap data to get the same effect (which would be a great deal faster but not the example of reusable code I wanted to provide), I don't guarantee decent performance, and I advise that you be sure that your machine can handle the hit before running the swf.

NME

forked:1
favorite:2
lines:82
license : MIT License
modified : 2012-05-16 06:13:22

Embed: Tweet

// forked from NME's basic bmp audio wave graph v0.2
// forked from NME's basic bmp audio graph v0.1
//Originally written by NME a.k.a Anthony R Pace
package {
import flash.events.Event;
    import flash.events.SampleDataEvent;
    import flash.media.Sound;
    import flash.utils.ByteArray;
    import flash.media.Microphone;
    import flash.display.Sprite;
    //import BMPWaveGraph; //in a project, where the files would be seperate, you would want to import this
    public class FlashTest extends Sprite {
        public var  mic:Microphone,
                    bmpwgVec:Vector.<BMPWaveGraph> = new Vector.<BMPWaveGraph>;    
        public function FlashTest():void {
            stage.addEventListener(Event.ADDED_TO_STAGE, init, true);
        }
        public function distrubuteData(e:SampleDataEvent):void {
            for(var i:int = 0;i!=9;++i){
                bmpwgVec[i].drawGraph(e.data);
            }
        }
        private function init(e:Event):void {
            var sh_9:int= stage.stageHeight/9;
            var i:int = 0;
            stage.removeEventListener(Event.ADDED_TO_STAGE, init, true);
            for (; i!=9; ++i){
                bmpwgVec[i] = new BMPWaveGraph(stage.stageWidth,sh_9);
                stage.addChild(bmpwgVec[i]);
                bmpwgVec[i].y = bmpwgVec[i].height*i;
            }
            mic = Microphone.getMicrophone();
            mic.rate = 11;
            mic.addEventListener(SampleDataEvent.SAMPLE_DATA, distrubuteData, false);
        }
    }
}
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.geom.Rectangle;
import flash.utils.ByteArray;
import flash.events.SampleDataEvent;
internal class BMPWaveGraph extends Bitmap{
        private var _w:uint,//width  with a rate of 11 this should be 512
                    _h:uint,//should be an odd number.
                    _a:uint,//amplitude factor
                    _wc:uint,//water colour
                    _sc:uint,//sky colour
                    _offset:uint,//offset... just think of a DCOffset to get the idea
                    _sampleRect:Rectangle,//this is the line that we will draw per x
                    _N:int, //the max number of samples to draw
                    _sn:Number,//the current value of the sample at n  or s[n]
                    _n:int;
        public function BMPWaveGraph(width:uint = 512, height:uint = 211, waterColour:uint = 0x3CD8FF, skyColour:uint = 0xd7f7ff):void{
            _w = width;
            //the height should be odd, or you will over flow... this isn't a concern in as3, as the player handles this automatically, so you won't get errors if you remove it.
            //I just wanted to keep it there for myself...
            if (height & 1) {
                //if odd do something
            }else {
                height += 1; //I know I should't have written it like this, but w/e it's better/faster than if(height%2==0){height+=1}
            }
            _h = height;
            _a = (_h / 2);
            _offset = (_h / 2);
            _wc = waterColour;
            _sc = skyColour;
            _sampleRect = new Rectangle(0, 0, 1, 0);
            super(new BitmapData(_w, _h, false, _sc));
            super.bitmapData.fillRect(new Rectangle(0, _h/2, _w, _h/2), _wc);
        }
        public function drawGraph(ba:ByteArray):void {
            _N = ba.length / 4;
            if (_N>_w){
                _N = _w;
            }
            ba.position = 0;
            super.bitmapData.lock();
            super.bitmapData.fillRect(super.bitmapData.rect,_sc); 
            for (_n = 0; _n != _N; ++_n) {
                _sn = ba.readFloat();//reads 4 bytes = 32 bit floating point sample value
                _sampleRect.x = _n;// as the width of the sample rect is 4, and we want 2 on each side.  We could constraine this within bounds but I'm not going to.
                _sampleRect.y = _offset - _a * _sn;
                _sampleRect.height = _h - _sampleRect.y;
                super.bitmapData.fillRect(_sampleRect,_wc);
            }
            super.bitmapData.unlock();
        }
    }

Code Fullscreen

Preview Fullscreen

you add character in this

by tests2011
at 2012/09/26 01:57:50

you add character in this

by tests2011
at 2012/09/26 01:57:50

Did you mean to ask, can I make characters appear in the wave? If so, than yes, you can, sort of; however, since this a time domain based graph, the results won't be as nice as those you can get from a spectrogram. You could really only get okay results for letters like I, J,L,M,N,T,U,V,W, and even letters like Y or H if you change the type of display and centre the pulse heights.

You just need to make signal samples (audio samples in this case) where the pulse heights match heights based on the shape of the letters or symbols you want. You just need to make a tool to do that, and keep in mind the graph's maximum N (the graphs width in this case). I also wanted to mention, that there are actually some interesting effects you can get, if you take phase shifting into account too. Like letters moving.

If you get a project working, I'd like to see it

by NME
at 2012/11/03 22:49:25

aobyrne

atakanckilic..

sort

pv856

audio timedomain wave graph - ..

NME

forked:0
favorite:2
lines:83 (diff:19)
tag:
- audio
- bitmap
- microphone
- water
- wave