I thought about it a bit and came up with two different scenarios where audio and visuals need to be synchronized:

1. The first is where a sound plays and something visual on screen happens to accompany that audio event.
2. The second is the other way around. Something happens on screen that should be accompanied by a sound.

In the first case the animation is the initiator, in the second case the sound. For the second case I included a Flash example here with the source code available.

1. Animation follows audio

This is the simpler scenario. For example: There’s an online drum machine built in Flash that plays a drum sound on every beat. A kick drum in a techno track for example. On the machine’s interface there’s a small red LED light (a MovieClip) that should blink each time the drum hits.

The drum machine has a steady rhythm set in BPM (Beats Per Minute). So once the machine has started it’s always known when the next drum hit will happen. Here’s a graph of the events:

• (a), (b), (c) … are the moments in time when a SampleDataEvent is received and the buffer is filled with samples.
• (p) is where the drum hit should happen. Because the drum BPM and buffer refresh rate are completely independent the drum hit will almost always start somewhere between two buffer refreshes.
• (q) is where the drum sound is actually heard through the speakers. There is a delay between when the samples are sent out from Flash to when they are played through the speakers. This is the latency; the time needed for the soundcard to process the samples and send them as analog audio to the soundcard’s outputs. Latency is the duration from (p) to (q).

To synchronize the two it’s a simple addition. Duration (a)(p) plus duration (p)(q).

• (a)(p) is the time from the first sample in the buffer to the first sample of the drum hit (and to convert this duration in samples to a duration in milliseconds it must be divided by 44.1 (sample rate / 1000)).
• (p)(q) is the latency. That’s ((SampleDataEvent.position / 44.1) – SoundChannelObject.position). (See the AS3.0 Language reference on SampleDataEvent.)
• The result is the total delay in milliseconds. A Timer could be started when the buffer is filled at (a) so that the LED blinks at the frame nearest (q).

2. Audio follows animation

Download the source code of this example.

This second scenario is a bit more complicated. Hopefully someone else has a simpler solution. But until then this is the solution I use.

Click the ‘Start’ button in the example above: Balls bounce on the floor and each time one of them hits the floor a ‘boing’ sound plays. A simple implementation of Newton’s laws of motion.

A graph of the events:

• (a), (b), (c) … are the times when a buffer is requested and filled. Same as in the previous example.
• (1), (2), (3) … are frames where Flash updates the screen (Event.ENTER_FRAME).
• (p) is where the ball hitting the floor is calculated to happen.
• (q) is where the sound is heard.
• (r) is where the ball hitting the floor is drawn on screen.

What’s going on?

The trick is to delay drawing the animation for a ‘latency’ amount of time.

1. First calculate where the ball WOULD be (but NOT draw it).
2. Fire a sound if the calculation shows the ball would hit the floor.
3. Draw the animation with a delay determined by the latency.

That is the principle of how it works. The actual implementation is a bit more involved:

• At (a), (b), (c) … (each SampleDataEvent.SAMPLE_DATA) the position of the ball is calculated. The current time and position of the ball are stored in a Vector called _history.
• If the calculation shows the ball will hit the floor during the current buffer (at (p)):
  • The time from the start of the buffer till the hit is calculated (a)(p).
  • The sound is started at time offset (a)(p) in the buffer.
• Meanwhile at (1), (2), (3) … (at each Event.ENTER_FRAME) the screen is updated.
• To know where to draw the ball the _history of the ball is used.
• First get the current time and subtract the latency. This is the moment in the past that should be drawn on screen.
• Search in the balls _history for that moment in the past.
• It’s very unlikely however that the position at exactly the required millisecond is stored. More likely somewhere in between two stored moments in time. So get the closest positions before and after the requested time and use linear interpolation to draw the ball at the right position between the ‘before’ and ‘after’ records.

So what’s going on?

I’m afraid this explanation might be more complex than the actual code. So I’ll add some of the relevant ActionScript.

To understand it you should know that there is an AudioDriver class that listens to the SampleDataEvent. Each SampleDataEvent it sends an ENTER_BUFFER notification (this is PureMVC) to notify all Ball instances to store their position. To do this the function enterBuffer is called on each Ball instance:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

public function enterBuffer() : void
{
    var hit : Boolean;
 
    if(_isDragging)
    {
        _vy = 0;
    }
    else
    {
        _vy += _gravity;
        _y += _vy;
 
        /** If the ball hits the floor. */
        if(_y > _floorY - _radius)
        {
            var distance : Number = _vy;
            var overlap : Number = _y + _radius - _floorY;
            _hitAlpha = (distance - overlap) / distance;
 
            _y = _floorY - _radius - overlap;
            _vy *= -1;
            hit = true;
 
            dispatchEvent(new Event(Ball.BOUNCE));
        }
    }
 
    /** Store as data for later use. */
    _history.splice(0, 0, new BallVO(_x, _y, _vx, _vy, hit));
 
    /** Keep maximum 100 history items so the maximum latency is buffer * 100. */
    if(_history.length > 100)
    {
        var n : int = _history.length;
        while(--n > 99)
        {
            _history.pop();
        }
    }
}

This function does what was expected: A new position is calculated and stored in a BallVO value object, the BallVO is added to the _history and a bit of maintenance is done: Keep _history’s length within bounds.

The only other thing is the _isDragging Boolean. Balls can be dragged to a new position.

The AudioDriver also sends an ENTER_FRAME notification. This is just like a regular Event.ENTER_FRAME from a DisplayObject except that it has a AudioStreamInfoVO value object as an argument. The AudioStreamInfoVO has a ‘latencyInMS’ property that holds (as you’ll have guessed) the latency in milliseconds that the animation should be delayed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

public function enterFrame(infoVO : AudioStreamInfoVO) : void
{
    graphics.clear();
    graphics.lineStyle(2, 0xFFFFFF);
    graphics.beginFill(0xBBBBBB, 0.1);
 
    if(_isDragging)
    {
        graphics.drawCircle(_x, _y, _radius);
    }
    else
    {
        var time : Number = new Date().getTime() - infoVO.latencyInMS;
 
        var i : int = -1;
        var n : int = _history.length;
        while(++i < n)
        {
            /** Get the data from immediately before and after 'time'. */
            if(_history[i].time < time && i > 0)
            {
                var before : BallVO = _history[i];
                var after : BallVO = _history[i - 1];
                var alpha : Number = (time - before.time) / (after.time - before.time);
 
                /** If a bounce on the floor happened between before and after. */
                if(before.vy > 0 && after.vy < 0)
                {
                    /** Linear interpolation to correct the vertical position. */
                    var maxY : Number = _floorY - _radius;
                    var partBeforeBounce : Number = maxY - before.y;
                    var partAfterBounce : Number = maxY - after.y;
                    var bounceAlpha : Number = partBeforeBounce / (partBeforeBounce + partAfterBounce);
 
                    if(alpha < bounceAlpha)
                    {
                        var y : Number = before.y + (before.vy * bounceAlpha);
                    }
                    else
                    {
                        y = after.y + (before.vy * (1 - bounceAlpha));
                    }
                }
                else
                {
                    /** Regular linear interpolation for a ball in mid flight. */
                    y = before.y + (alpha * (after.y - before.y));
                }
 
                if(before.hit) graphics.beginFill(0xFFFFFF);
                graphics.drawCircle(_x, y, _radius);
 
                break;
            }
        }
    }
}

So in this function there’s a variable ‘time’ which holds the moment in time in the past that must be drawn, ‘before.time’ and ‘after.time’ and a resulting ‘alpha’ which is the interpolation value between before and after. The resulting ball position calculation is this:

y = before.y + (alpha * (after.y – before.y));

Isaac Newton

All this code is not optimized at all. In this example I wanted to keep it all as clear as possible to read and understand.

This is a small experiment I started half a year ago but never finished. I looked it up again last week because I needed a Flash AR example for a project at work. Here I improved it a bit to make it more presentable.

What it is

It’s basically a sort of theremin. Hold the marker in front of your computer’s webcam and a sound starts to play. Move the marker and the sound changes.

The Flash file

All source files can be downloaded here. They’re a bit messy however. This was just a quick update to an abandoned older experiment, I didn’t take care to write clean code.

To try this you’ll need the marker to move in front of the webcam. Download it here as a PDF file. Print the file and – for the best results – glue it on a piece of cardboard.

The video

Because I know it’s a lot of hassle to download and print the marker I recorded a short demonstration screencap video to show how it all works.

How to use it

Click “Allow” on the Flash player settings screen. This allows Flash to switch on the webcam and use the images it films. Then hold the printed marker in front of the webcam to generate some sounds:

• With the marker at the center of the video a sine wave plays a C note.
• Move the marker slowly up and the pitch rises in steps, move down and the pitch goes down. It plays a pentatonic scale in the key of C minor. Two octaves up and two down. With added flattened fifth to make it sound more bluesy.
• Move the marker to the right to add vibrato. The more to the right the faster and the more intense the vibrato gets.
• Move left from the center and a ‘note repeat’ effect starts. At the outer left edge of the webcam the repeat effect doubles in speed. When the marker is moved vertically at the left new notes start and combine with the previous notes that still play and produce a harp-like sound. Very nice.

This idea could be taken a lot further. There’s more information to be had from the marker:

• The distance from the webcam can be measured. To lower the volume the farther the marker is away from the webcam for instance.
• The three rotations in 3D are available: Rotation around the X, Y and Z axis.

The only obstacle for direct musical use is the latency. The delay between a movement and hearing the resulting sound is too big to be able to play along with a record for example.

For the augmented reality code I used FLARToolkit. More information can be found at the English FLARToolKit page and the Start Up Guide.

MP3 wave display is orange.

Wave Display 2 is an improved version of the last one (in the previous post). A few things had to be rewritten in the code for waveform rendering, and there were some extra features I wanted to include to make the application a bit more interesting to use.

The new features in this version:

• Audio playback. You can now listen to the loaded MP3 file. Click ‘play mp3′ or press the SPACE bar to listen.
• Draggable start and end locators to select only part of the sound. Drag the ‘S’ and ‘E’ locators to set the start and end point.
• Reverse playback. Click the ‘reverse’ button to toggle reverse playback.
• Adjustable playback speed. Drag the ‘transpose’ slider to change the playback speed. The speed is adjusted so that the pitch changes from one octave down to one octave up in semitone steps.
• Drag to zoom. Press and drag the mouse on the display area for finer control: Drag vertical to zoom and horizontal to move the waveform. I always really liked this behaviour in Steinberg WaveLab where I first saw it, and where I now copied it from.

Click here to download all source files in a ZIP.

Transpose by playback speed

Transpose works fairly straightforward. The transpose value is set with the slider. And every time the slider is moved the new transpose value is stored.

Each time playback is started, the transpose value is passed to the class PitchedSamplePlayer that processes the sound. However, PitchedSamplePlayer uses a multiplier to set the playback speed instead of a semitone value. For example 0.5 is playback at half speed. So the transpose value in semitones must be converted to playback speed. That’s done with this conversion:

1
2
3
4
5
6
7
8

/**
 * Covert semitone shift to playback speed multiplier.
 * For example: -12 returns 0.5, 12 returns 2, 0 returns 1.
 */
public static function semitoneToRate(semitone : Number) : Number
{
    return Math.pow(2, semitone / 12);
}

Then inside PitchedSamplePlayer linear interpolation is used to change the playback speed and maintain acceptable sound quality. I took the code for pitching a sample from this MP3 Pitch example by Andre Michelle, which builds on Lee Brimelow’s post Adjusting audio pitch in Flash Player 10.

Reverse playback

The display and the sample player both read samples from a ByteArray. I had the choice of reversing the whole ByteArray or leaving the ByteArray as it is and read from it backwards. From end to start.

It seemed best to reverse the order of the ByteArray because the audio processing and display rendering code can stay the same and as short and fast as possible:

1
2
3
4
5
6
7
8
9
10
11
12

/** Reverse the order of samples in samplerPresetVO.soundData.byteArray. */
var bytesPerSample : int = AudioDriverProxy.BYTES_PER_SAMPLE;
var numBytes : Number = samplerPresetVO.soundData.numSamplesTotal * bytesPerSample;
var tempByteArray : ByteArray = new ByteArray();
samplerPresetVO.soundData.byteArray.position = 0;
tempByteArray.writeBytes(samplerPresetVO.soundData.byteArray);
samplerPresetVO.soundData.byteArray.position = 0;
 
for(var offset : Number = (numBytes - bytesPerSample); offset >= 0; offset -= bytesPerSample)
{
   samplerPresetVO.soundData.byteArray.writeBytes(tempByteArray, offset, bytesPerSample);
}

What happens here is:

• Copy all sample data to a temporary ByteArray.
• Read two samples (or one stereo sample) at a time from the temporary ByteArray, reading backwards from end to start.
• And write each stereo sample to the original ByteArray, writing normally from start to end.

The waveform display

2010! A new year, a new decennium even! This year I want to be more consistent in publishing articles on this weblog. That’s my new year’s resolution.

The first one of the new year is more of a utility than a complete application. It’s a wave display; It loads an MP3 file and displays the sound as a graph of the waveform. It makes no sound. A simple waveform display like this might be a useful component in a larger application where audio needs to be edited. Here it’s on its own because I was figuring out how to best program such a component. So this application is more experimental than useful.

Click here to download all source files in a ZIP.

How to use it

A default MP3 file is loaded and displayed at startup. But you can load your own MP3. Click the ‘load mp3′ button and browse to an MP3 file on your computer. Opening a large MP3 file might take a long time however. Best to try with short files. Five minutes or less for example.

Once the MP3 is loaded and displayed there’s several controls to zoom in closer on details of the waveform:

• Zoom in to a detail of the waveform with the ‘zoom horizontal’ slider.
• When zoomed in you can move through the waveform with the scrollbar directly under the waveform.
• For more precise movement once zoomed in drag the mouse left or right on the waveform.
• Magnify the waveform vertically with the ‘zoom vertical’ slider. This is useful to inspect very quiet parts of the sound.

Some information is shown above the display

• In Flash the sample rate is 44100 samples per second. When the waveform is at the highest zoom level, it shows one sample per pixel. (So one second of audio would take up 44100 pixels!)
• At lower zoom levels each pixel displays the average amplitude of several pixels. The amount is displayed at ’samples per pixel’.
• The first and last sample in view are shown at ‘first sample’ and ‘last sample’.

Some notes on the ActionScript

The biggest problem with the display was to get it to respond quick to zoom and position changes. It should use as little calculations as possible to refresh the display. Three things reduce the number of calculations (and so the processor load) here:

Each change in zoom level or position results in a changed portion of the waveform that is actually shown in the display. When the display needs updating, it’s first determined what the first and last sample are that will be displayed. Then only that portion of the file is processed. That means that especially at high zoom levels only a tiny fraction of the file needs to be calculated.

But at low zoom levels still a lot of samples need to be averaged: To show one minute of waveform 44100 x 60 = 2,646,000 samples must be processed. More than two and a half million! To reduce this number samples are skipped. The more samples there are, the more are skipped.

This bit of ActionScript shows how these two reductions are done:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

/**
 * Sets the zoom level of the display. Measured in how many samples one horizontal pixel of the display represents.
 * @param inSamplesPerPixel : How many samples one horizontal pixel of the display represents.
 * @param inCenterSamplePosition : The center or focus of the zoom. 0.5 is the horizontal center. 
 */
private function setCurrentSamplesPerPixel(inSamplesPerPixel : Number, inCenterSamplePosition : Number = 0.5) : void
{
  if(inSamplesPerPixel == mCurrentSamplesPerPixel) return;
 
  // get the sample that is the center of the zoom
  var centerSample : int = mFirstSampleInView + (mNumSamplesInView * inCenterSamplePosition);
 
  mCurrentSamplesPerPixel = Math.max(mMinSamplesPerPixel, Math.min(inSamplesPerPixel, mMaxSamplesPerPixel));
  mNumSamplesInView = mCurrentSamplesPerPixel * mDisplayWidth;
  mFirstSampleInView = centerSample - (mNumSamplesInView * inCenterSamplePosition);
 
  // polling stuff
  mPollingFrequency = Math.ceil(mCurrentSamplesPerPixel / 20);
  mNumPolls = int(mCurrentSamplesPerPixel / mPollingFrequency);
  mBytesToSkip = (mPollingFrequency - 1) * SoundProxy.BYTES_PER_SAMPLE;
 
  if(mFirstSampleInView < 0) mFirstSampleInView = 0;
  if((mFirstSampleInView + mNumSamplesInView) > mNumSamplesTotal) mFirstSampleInView = mNumSamplesTotal - mNumSamplesInView;
 
  updateGraphic();
}

And the third thing to reduce the processor load is a simple timer. There’s a maximum of how often the display can update. In this case a maximum of once every 50 milliSeconds was fine. The timer script was added at the start of the update function:

1

private var mUpdateDelayTimer : Timer = new Timer(50, 1);

1
2
3
4
5
6
7
8
9
10

/**
 * Redraws the display.
 */
private function updateGraphic() : void
{
  // delay between updates
  if(mUpdateDelayTimer.running) return;
  mUpdateDelayTimer.start();
 
  // etcetera ...

That’s it for now. Download the source files to have a closer look at the code or to use it in your own projects.

This project is build with PureMVC as framework again. I like it more and more.
The UI components I used here are very much based on Keith Peters‘ Minimal Comps.
To load an MP3 file and use it in Flash as a Sound object I used FlexibleFactory’s MP3FileReferenceLoader library.
For debugging I used the Yalog logging tool by Stephan Bezoen. Very nice Air application.

Screenshot

The past weeks I’ve been learning PureMVC. It had been on my mind for some time, and now that a project (a pianoroll type MIDI editor) became too complicated and the lack of structure took the fun out of programming I figured it was time for a nice new clean framework.

I read the ‘Framework Overview with UML’, the ‘Implementation Idioms and Best Practices’ and memorized the famous conceptual diagram with it’s interconnected cloud of meaningfull data blobs (see picture). I looked up some basic tutorials, ‘Minimalist MVC example using the PureMVC Framework’, ‘Building a Flash site using PureMVC’ and found this useful page: ‘PureMVC in a week’. And then felt ready for some PureMVC action of my own.

The PureMVC conceptual diagram

And I must say: It’s not as complicated as I feared it would be. The first hurdle is a bit high with a lot of concepts and rules to remember, but then it quickly becomes clearer what part of the code goes where. My previous framework experience was with Cairngorm which is MVC based as well, so that definitely helped me to get my head round PureMVC.

Here is my first PureMVC test project, done to check how the audio programming stuff would integrate with the framework: It’s a small synthesizer that plays sine waves. Only sine waves. You can use keys on the computer keyboard to play the synth as a piano keyboard (see picture for the keys) and use Z and X to switch octaves and C and V to change the volume. This keyboard layout was taken from Ableton Live. I like the way it works there. So thank you Ableton.

The source files are available again : Download the source files here.

Take note however that there is no FLA file. This is an ActionScript only project made in FDT. But if you want to compile it in Flash, it will probably work if you set App.as as the document root.

Use the computer keyboard to play

Part of the sequencer

Here is a basic step sequencer for creating rhythms. The sounds it plays are small MP3 files. Short sound clips of drum noises, blips and plings. So it’s more a sample player than a drum synth. But the main thing is that it loads and plays rhythm patterns and that the patterns can easily be edited. That’s what I wanted to do here.

It plays patterns in the same way FL Studio (FruityLoops) does. There’s twelve tracks that each play their own sound and each track has sixteen steps that can be switched on or off by clicking the step buttons.

Besides that the volume of each step can be changed by holding the “1″ (one) key on the computer keyboard while dragging the mouse up or down on the step button. The blue rectangle on the step will change in height to indicate the volume level.

The image of the waveform on the left of each track can be clicked to play the sound. And there are four patterns. Switch between them with the ‘1′ to ‘4′ buttons at the bottom.

Try it out below. This time I added play and stop buttons because in the previous two players I didn’t and that started to annoy me. Things on web pages should only make noise when they’re specifically told so.

If you’re interested in any of the ActionScript code then download the full source of this project here. The ZIP includes all ActionScript classes, the samples and everything needed to compile and run the project.

A few notes on the source:

The project was made in FDT 3. There is no FLA file as a base to compile the SWF from. Instead you’ll need to set the class AppController (flash/classes/com/hisschemoller/AppController.as) as the main class in the project’s Run/Debug settings.

All visual elements of the projects were made in the Flash file flash/assets/assets.fla. That’s where all the button graphics are. This file is compiled to the SWC file assets.swc and that must be added to the class path in FDT. (Right click on the SWC file in FDT’s Flash explorer and choose ‘Add to Classpath’.) Then the scripts in FDT can find the MovieClips in the Flash library that were given a class name.

There might be all kinds of weird hidden Mac files in the ZIP. As well as the FDT launch and project setting files. I’m quite new to working on a Mac and I’m not shure what it adds that I don’t see. Sorry for that.

Slicer with waveform display

This slicer works the same as the previous one. Only difference is that is uses eight slices instead of sixteen.

The new stuff is in the interface: Waveforms to see what’s playing. And nicer to look at as well.

To use this app you can click the buttons as before to select a slice to play, and now you will see the waveform change to represent the slice.

The second way to change the slices is to click and drag on the waveforms itself. Drag up for later slices and down for earlier ones. Drag all the way down for an empty slice and silence.

Here it is! The music is from a track by Flying Lotus. I don’t know which one exactly: It’s track nr. 23 from a collection called “38 Cartoons”, but I couldn’t find any information about it online.

How to get an image from MP3 sound data

The way I did it is first to calculate how many samples of a slice represent one pixel of the image, then get the biggest amplitude of those samples. That will be a number between 0 and 1. Then multiply it by half of the images height to get the size of the line to draw. And finally draw the line to a BitMapData object.

It generates a simplified waveform: The positive and negative amplitudes are the same and it’s only the left channel. But it’s good enough for this purpose. It’s a good impression of the waveform.

Here is the main part of the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

var mp3NumSamples : Number = mMp3Loop.extract(new ByteArray(), (41000 * 60 * 60)) - mMp3StartOffset;
mMp3NumSamplesPerSlice = Math.round(mp3NumSamples / Model.NUM_SLICES);
mBPM = TimeConversion.numSamplesToBPM(mp3NumSamples, 2);
 
var sampleIndex : int = mMp3StartOffset;
var imageWidth : int = Model.BUTTON_WIDTH;
var samplesPerPixel : int = mMp3NumSamplesPerSlice / imageWidth;
 
// loop through the slices
for(var i : int = 0;i < Model.NUM_SLICES; ++i)
{
	var byteArray : ByteArray = new ByteArray();
	var numSamples : int = mMp3Loop.extract(byteArray, mMp3NumSamplesPerSlice, sampleIndex);
	var position : int = 0;
	var lineMiddle : int = (Model.DISPLAY_HEIGHT / 2);
 
	byteArray.position = 0;
 
	mMp3WaveformData[i] = new BitmapData(Model.BUTTON_WIDTH, Model.DISPLAY_HEIGHT, true, 0xFF0000);
	var bitmapData : BitmapData = mMp3WaveformData[i];
 
	// loop through the pixels of a waveform image's width
	for(var j : int = 0;j < imageWidth; ++j)
	{
		var waveHeight : Number = 0.0;
 
		// get maximum of all samples within pixel
		for(var k : int = 0; k < samplesPerPixel ; ++k)
		{
			if(position < numSamples)
			{
				var l : Number = byteArray.readFloat();
				byteArray.readFloat();
			}
			else
			{
				l = 0;
			}
 
			waveHeight = Math.max(waveHeight, Math.abs(l));
			position ++;
		}
 
		waveHeight *= lineMiddle;
		var start : int = lineMiddle - waveHeight;
		var end : int = lineMiddle + waveHeight;
 
		// draw to bitmapdata
		for(k = start; k < end ; ++k)
		{
			bitmapData.setPixel32(j, k, 0xFFFFFFCC);
		}
	}
 
	sampleIndex += mMp3NumSamplesPerSlice;
}

Part of the slicer

This is it! The first one: A slicer.

It loads and plays an MP3 file. But not only that. It divides the file in sixteen equal parts and you can change the order in which the parts are played.

When it’s loaded the slicer plays all the parts in the right order. Part 1, 2, 3 and up until part 16. With the buttons you can change the order and for example play part 4, then 3, 11, 8 and so on. With the right MP3 loop this will create all kinds of interesting rhythmic variations.

It works best if the MP3 file is a short piece of music with a steady rhythm that loops seamlessly (so the start and end of the sound fit together exactly). Then every slice has a little bit of rhythm in it. Just one or two sounds like a kick or snare drum.

Best to check it out for yourself. I will put the actual SWF files on the ‘Read more’ pages of the posts, so they won’t all be playing at the same time and use up each other’s CPU cycles.

The interface

It’s a matrix! Sixteen buttons wide for the time slots, sixteen high for the slices. So the bottom left button selects slice one to be played first, the top left button plays slice sixteen at position one. Just click around and you’ll get it.

The code

The main thing in this application is the Sound.extract() method. Once the MP3 is loaded the total amount of samples in the file is divided by sixteen. Then it can store the duration in samples of a slice and at which sample exactly each slice starts. So the file isn’t actually split into sixteen parts. It only stores the starting point of each slice within the loop.

One thing I didn’t know but found out trying is how to get the total amount of samples in an MP3 file: Use extract() and request a length longer than you know the MP3 file is. For example one hour. Then extract() will get as many samples as it can. Which are all the samples in the file, and it returns that number:

var oneHour : uint = 44100 * 60 * 60;
var numSamples : uint = mp3File.extract(new ByteArray(), oneHour);

If you recognized the loop but thought it was somehow different: You’re right! It’s Mr Oizo’s “Bobby Can’t Dance” from his album “Analog Worms Attack” (1999). But speeded up to 120 BPM. I liked it a bit faster. (The speeding up wasn’t done with this slicer by the way. No advanced ActionScript 3.0 timestretching algorithm yet I’m afraid.)