MP3 Wave Display 2

This version is orange.

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.


Get Adobe Flash player

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:

?View Code ACTIONSCRIPT
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:

?View Code ACTIONSCRIPT
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.
This entry was posted in ActionScript. Bookmark the permalink. Both comments and trackbacks are currently closed.

6 Comments

  1. Posted February 3, 2010 at 12:29 | Permalink

    Once again, very impressive!
    Would you be interested in freelance audio development work?
    If so, please contact me!

  2. Vincas
    Posted February 7, 2010 at 13:49 | Permalink

    Hi, nice tutorial! Can u say me your any contact, because i didn’t find any contacts of your in this page :) I have one deal, waiting your email!

  3. cem
    Posted February 8, 2011 at 20:50 | Permalink

    Hi; I think you should make a contact page, because like others i want to talk about a freelance project too :) Could you inform me about your job availability?

  4. Posted February 10, 2011 at 12:37 | Permalink

    Hi Cem,
    Yes I will make a contact page. But I’m not doing any Flash projects at the moment. I just found out I really like Java and want to concentrate on that. So maybe later I will be available for Java or Android projects. But that will take some time.

  5. Loraxman
    Posted January 12, 2012 at 03:33 | Permalink

    Is there any way to modify it such that I can set the mp3 name from java script? I want to show the waveform of a downloadedmp3 on a webpage.

  6. Posted January 12, 2012 at 03:35 | Permalink

    @Loraxman: Yes, ExternalInterface is the thing to use. Here’s an article about it: http://www.adobe.com/devnet/flash/articles/external_interface.html.