Creating an Audio Mixer in Flash

wdcoverThis was a 3 part series for Web Designer Magazine, October, November and December 2004.

How to create an audio mixer in Flash, first looking at the task of drawing the graphic assets.

One of the things that Flash handles really well is audio. Flash has the ability to play up to 8 stereo audio channels at the same time, with independent volume and pan controls over each channel. This means that we can get 8 concurrent audio loops going at once, and using volume and pan, we can create our own mixes, and in essence build our own songs.To start off our “Mad Mixer”, we first have to create all of the different graphics and components that will go into making the overall application have a real-life mixer board feel. When determining what we’ll need, the best thing to do is look at a real audio mixer.
A real mixer has strips of knobs, known as channels. Each channel gives you control over volume, pan, equalization (EQ) and effects. In Flash there isn’t much we can do about EQ; Flash just doesn’t give us that level of control. We would also have a very difficult time doing any effects because even faking an echo would require the use of more audio channels than we have.

This means we have pan and volume only. So our mixer will consist of channel strips, each one containing a single volume slider, and a pan knob.

Creating an audio mixer in Flash: Part 2
How to create an audio mixer in Flash, adding code to the graphics made in the part one.

In the last issue, we looked at creating the visuals for a six channel mixer in Flash. Our mixer contained six “strips”, where each strip contained a pan knob, a volume slider, an EQ strip and a text field. The graphics were created to have a specific look and feel, and the frame surrounding the strips contained a stop button, a play button and a text field to contain a song timer.

With the graphics out of the way, we have to start considering the mechanism underneath the controls; how are we going to be handling the actual mixing of the sounds behind the scene.

First of all, we require some sounds. Included on the CD, there are six WAV files, each one corresponding to a different part of the mix of a song. The song was created specially for this article. The sounds themselves have one very important property; they’re loops. A loop can be played over and over, seamlessly creating the effect of one long sound. In our sounds, they all contain eight bars of music, and are all about eight seconds long.

We have the following sounds. Drums, bass, arpeggio, choir, guitar and piano.

Now let’s bring the mixer to life.

Creating an audio mixer in Flash: Part 3
Adding automated sequencing to the coded mixer of part 2.

Welcome to part three of our Flash mixer tutorial. In the first part, we looked at physically creating the graphics for the mixer. In the second part, we looked at attaching code to the mixer so that it controlled the playback of audio loops, and so that we could use the volume sliders and the pan knobs to control the volume and pan of the loops.

In the final part of this tutorial, we’re going to bring our mixer to “life” with the addition of automated sequencing. On real-life professional mixing boards, the good ones include something called “automation”. With automation, the mixer “remembers” anything that the sound engineer does with the sliders and knobs, so that in the end (when burning the track to CD), the console will replay the exact mix that the engineer specified.

In essence, it is this automation that turns a series of loops into a “song”. Press record. Start with the drums and bass kicking us in the face, then slowly bring up the piano, then pan the guitar hard to the right, and bring it in, while panning the arpeggio hard left and bringing it in. Press stop, and play it all back; you have the beginnings of a wicked mix.