Winamp Visualization Tutorial

1
Winamp Visualization Tutorial

• Hadi Fadaifard

2
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

3
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

4
Overview

• Plugin format and calling mechanism
• Drawing mechanism
• Conclusions and Results

5
Calling Mechanism
Plugin Module
1
6
Calling Mechanism
Plugin Module
1
winampVisHeader
7
Calling Mechanism
Plugin Module
1
8
Calling Mechanism
Plugin Module
1
9
Calling Mechanism
Plugin Module
1
2
winampVisHeader
10
Calling Mechanism
Plugin Module
1
2
winampVisHeader
winampVisModule
11
Calling Mechanism
Plugin Module
1
2
12
Calling Mechanism
Plugin Module
1
2
13
Calling Mechanism
Plugin Module
1
2
14
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.

15
Render Function (simplified)
16
Drawing The Waveform
17
Improving Render Function

• A more complicated Render function
• Draw the Background.
• Draw the Foreground waveform and/or any other
  object in the scene
• Save the frame buffer.
• Add (blend in) the saved image to the background
  image.
• Distort (transform) the background.

18
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).

19
Improving Render Function
20
Improving Render Function
21
Improving Render Function
22
Improving Render Function
23
Improving Render Function
24
Improving Render Function
25
Render Function (improved)
26
Drawing the Background
Draw the Texture-mapped Grid
Transform the Grid (Rotate, Scale, Translate, etc)
27
Results

• Winamp demo