Winamp Visualization Tutorial Hadi Fadaifard

Introduction  MP3 has become quite popular in the past 6 years.  Good compression  Winamp: The most popular MP3 player for Windows  Other popular players:  XMMS (Linux)  iTunes  Realplayer  Windows Media Player

Introduction  All players have support for sound visualizations  We will write a visualization plug-in for Winamp:  Free and most popular player  Compact and user friendly

Overview  Plugin format and calling mechanism  Drawing mechanism  Conclusions and Results

Calling Mechanism 1 Plugin Module

Calling Mechanism 1 Plugin Module winampVisHeader

Calling Mechanism 1 Plugin Module

Calling Mechanism 1 Plugin Module

Calling Mechanism 1 2 Plugin Module winampVisHeader

Calling Mechanism 1 2 Plugin Module winampVisHeader winampVisModule

Calling Mechanism 1 2 Plugin Module

Calling Mechanism 1 2 Plugin Module

Calling Mechanism 1 2 Plugin Module

Drawing Mechanism  Winamp calls Render every delayMS msecs.  Data required by Render (e.g. waveformData, spectrumData) is passed to Render as a pointer to the current VisModule.  No restrictions on how Render draws onto the visualization window; it can use any hardware accelerated API (e.g. DirectX or OpenGL) or no API at all.  We will use OpenGL.

Render Function (simplified)

Drawing The Waveform

Improving Render Function  A more complicated Render function: 1.Draw the Background. 2.Draw the Foreground: waveform and/or any other object in the scene 3.Save the frame buffer. 4.Add (blend in) the saved image to the background image. 5.Distort (transform) the background.

Improving Render Function  Problem: Processing the background image (e.g. blending, blurring, etc) is computationally expensive.  Solution: Use the Graphics hardware (through OpenGL):  Create a 2D grid that covers the entire window (Offline).  Texture map the background onto the grid (Online).  Transform the grid (Online).

Improving Render Function

Render Function (improved)

Drawing the Background Transform the Grid (Rotate, Scale, Translate, etc) Draw the Texture-mapped Grid

Results  Winamp demo