MP3 Wave Display 2

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:

/**
 * 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:

/** 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.