QuantumMindsLogo
Back to top

Better Browsers:

4V98 Project: Winamp Visualization Plug-in


Introduction

A Visualization is any technique for creating images, diagrams, or animations to communicate a message. A music visualization is a sequence of images or animations that change shape and effects according to the beat of the music that is playing in the background. The purpose is for entertainment and maybe also to be able to see the movement of sound waves that we normally cannot see.

Visualizations can really make music more enjoyable. With techno, house and other types of electronic music gaining popularity, visualizations also started playing important roles at club and bar atmoshpheres. Clubs even hire visual DJ's just to work on club lighting and visualizations that is synchronized with the music. The only limit to visualizations is ones creativity. I chose this project also because visualizations are a great way of combining graphics with music. I enjoyed working on this plug-in and I hope you will enjoy using it as much as I did creating it.

Background Information

Visualizations work by doing real-time beat detection using FFT or different real-time algorithms that compare sound data.

beat

How can one create visualizations using Winamp SDK?

After downloading Winamp SDK, it is easy to create Winamp modules by looking at the example code provided with the SDK.
Here is an example Winamp Visualization Module:

winampVisModule mod1 =
{
    "Angry Visualization",
    NULL, // hwndParent
    NULL, // hDllInstance
    0, // sRate
    0, // nCh
    25, // latencyMS
    25, // delayMS
    2, // spectrumNch
    2, // waveformNch
    { 0, }, // spectrumData
    { 0, }, // waveformData
    config,
    init,
    render,
    quit
};

The first string is the window name that appears on top of the winamp visualization window. The 2nd and 3rd parameters are window and dll handlers, 4th is the sample rate, 5th is the number of channels, 6th and 7th are latency and delay in milliseconds of the playback which are not used often for visualizations but maybe for DSP. 8th and 9th parameters are the number of channels used in spectrumData and waveformData arrays, the rest of the parameters are functions that are used to setup, initialize, display and quit the module.

Winamp visualization modules lets users access 2 types of sound data. First one is SpectrumData (spectrum) which contains spectrum analyzer information which can be used to check differences between sound data to detect bass or treble beats. Second one is WaveformData (waveform) which is a measurement of a number of samples of the amplitudes of vibrating energy.

Winamp usually divides music data into 2 channels. WaveformData and SpectrumData are 2D arrays in such form: WaveformData[2][576], SpectrumData[2][576]. The first array data[0] contains treble and the second[1] contains bass data.

Design

A simple beat detection would be to compare the previous sound data to the current one and if there is a big difference between the 2, there is a big chance of having a beat in that moment in the song. Counting the number of these reasonable differences, we can tell that the amplitude of the sound has increased a great amount which increases the chances of having a beat at that moment in time.

Pseudo Code of a beat detection algorithm

Implementation

Once the module is created and the beat detection algorithm is implemented, one can create very interesting visualizations.
Now I will show some screenshots of my visualization and explain what it does.

Smiley Visualization:

Angry1 Angry2 Angry3

The circumference of the smiley grows and shrinks with the bass beat of the song. The eyebrows also move up and down with the bass beat. The mouth is an oscilloscope of the song and the eyes change color as a VU meter would move with the beat. Personally, I think its fun to watch this because when there are lyrics in the song, the smiley almost looks like as if he was singing the song and the angry and excited eyebrow expressions add a bit of humor to the lyrics.

My Band Visualization:

Band1 Band2 Band3

FreeImage is used to draw the background image on openGL window which is linked with winamp modules. The band image simply switches RGB channels with the beat of the song. Also a horizontal flip is done on the image to give the effect of band moving around on the stage and playing instruments, which again occurs with beat detection. Also a spectrum analyzer is drawn at the bottom of the window to give information about the current playing song which also looks a bit like a dancing crowd at a concert.

References

Winamp SDK:
http://www.winamp.com/development/sdk

Winamp visualization plug-in tutorial:
http://www.sulaco.co.za/winamp_tut.htm

NeHe OpenGL visualization challenge:
http://nehe.gamedev.net/data/contests/contest.asp?contest=09

Beat Detection Algorithms:
http://www.gamedev.net/reference/programming/features/beatdetection/

Band Cartoon found online at:
http://www1.istockphoto.com/file_thumbview_approve/1871021/2/istockphoto_1871021_sixties_band.jpg

Download & Tools

Run:
To run the project copy the StickyVis.dll, FreeImage.dll, FreeImage.lib, band.tif files into Winamp\Plugins\ directory. Start Winamp --> Main menu --> Preferences --> Plugins/Visualizations --> choose Kaan's Sticky Visualization --> Choose which visualization you want from the plug-in module -->Start

This is all the visual studio project files, including images and extra things:
Project with Source Code

This is only the necessary files, however this may not work since the visualization links openGL, glut, freeImage and Winamp modules all together. A missing library may stop the visualization from working:
Kaan's Visualization

FreeImage library:
FreeImage download

glut library:
glut download