Displaying the audio waveform captured from a microphone
Created
4 October 2010
Requirements
Prerequisite knowledge
Some prior experience working with ActionScript 3 is recommended. Familiarity with the Flash authoring environment is also helpful.
User level
Beginning
Required products
- Flash Professional CS5 (Download trial)
- Flash Player 10.1
This article is the fifth of seven in a series highlighting examples of programming strategies that make it easier than ever before to create rich content in Adobe Flash CS5 Professional. There are several new events that are available in Flash Professional CS5. The first event is the Microphone.sampleData event, which captures audio samples from the input of a microphone. You can use event to record audio samples and dynamically draw the recorded sound waves.
To capture input of a microphone, you'll follow these steps:
- Create a Microphone instance using the Microphone.getMicrophone() method.
- Specify its sample rate and gain by setting the Microphone.rate and Microphone.gain properties.
- Add a listener for the Microphone.sampleData event (using the SampleDataEvent.SAMPLE_DATA constant) that is registered to the Microphone instance.
- The captured audio samples are stored in the ByteArray object. You can access them by using the SampleDataEvent.data property of the event object received by the listener function, as shown in the code example below:
import flash.media.Microphone;
import flash.events.SampleDataEvent;
var my_mic:Microphone = Microphone.getMicrophone();
my_mic.rate = 22;
my_mic.gain = 100;
my_mic.addEventListener(SampleDataEvent.SAMPLE_DATA, drawSampleData);
function drawSampleData(eventObject:SampleDataEvent):void {
var myData:ByteArray = eventObject.data;
// dealing with audio samples
You can draw the audio waveforms by accessing the sample's data captured from a microphone by an event listener function. Data is a collection of floating point numbers with values between −1 and 1. Use the ByteArray.readFloat() method to retrieve the numbers.
You can get the total bytes of a ByteArray object using the ByteArray.length property. And the current position of the pointer is indicated by the ByteArray.position property.
The script below draws visual interpretations of the audio waveforms of samples captured from a microphone. In the code below, the sequential values are processed in a while loop until the value of the ByteArray.bytesAvailable property is zero:
// frame action
import flash.media.Microphone;
import flash.events.SampleDataEvent;
import flash.utils.ByteArray;
import flash.display.Graphics;
var nWidth:Number = stage.stageWidth;
var nCenter:Number = stage.stageHeight / 2;
var nScale:Number = 100;
var myGraphics:Graphics = graphics;
var my_mic:Microphone = Microphone.getMicrophone();
my_mic.rate = 22;
my_mic.gain = 100;
my_mic.addEventListener(SampleDataEvent.SAMPLE_DATA, drawSampleData);
function drawSampleData(eventObject:SampleDataEvent):void
{
var myData:ByteArray = eventObject.data;
myGraphics.clear();
myGraphics.lineStyle(0, 0x000000);
myGraphics.moveTo(0, nCenter);
var nPitch:Number = nWidth / myData.length;
while (myData.bytesAvailable > 0)
{
var nX:Number = myData.position * nPitch;
var nY:Number = myData.readFloat() * nScale + nCenter;
myGraphics.lineTo(nX, nY);
}
}
Every time the microphone captures audio samples, the script draws lines like a graph. The x axis is the pointer position and the y axis displays the value of the floating numbers. The wave of the graph visually describes the characteristics of the audio samples (see Figure 1).
The graph created by the code shown above simply draws the values retrieved from the captured audio samples. However, depending on the needs of your project, you could programmatically manipulate the captured audio values in a variety of ways to achieve different effects.
Where to go from here
As you can see from these examples, there are many new possibilities to explore when developing ActionScript 3 projects in Flash Professional CS5. Hopefully the scripts provided in these examples will serve as the starting point as you begin experimenting with the new events and capabilities for delivering rich content with interactivity.
Be sure to check out my other articles in this series:
- Working with TLF Text to control the appearance of text elements
- Manipulating springs of an IK Bone for animations
- Leveraging code snippets and using enhanced code hinting
- Dynamically drawing a vector instance that contains elements
- Deploying projects on devices with touch panels
- Catching errors globally to facilitate troubleshooting
To learn more about developing with ActionScript 3, see the following online resources:
- ActionScript Technology Center
- ActionScript 3.0 Reference for the Adobe Flash Platform
- Adobe ActionScript Cookbook
Also be sure to visit the Flash Developer Center to find more articles and sample files to help you take your Flash projects to the next level.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License
| 04/23/2012 | Auto-Save and Auto-Recovery |
|---|---|
| 04/23/2012 | Open hyperlinks in new window/tab/pop-up ? |
| 04/21/2012 | PNG transparencies glitched |
| 04/01/2010 | Workaround for JSFL shape selection bug? |
| 02/13/2012 | Randomize an array |
|---|---|
| 02/11/2012 | How to create a Facebook fan page with Flash |
| 02/08/2012 | Digital Clock |
| 01/18/2012 | Recording webcam video & audio in a flv file on local drive |
