canvas.html

<div id="player">
  <canvas id="levels" width="145" height="24"></canvas>
</div>

waveform.js

soundManager.flashVersion = 9;

jQuery(function(_){  
  _('[rel=play]')
    .click(function(e) {

      var button = _(this)
        ,location = button.attr('href');
        
      soundManager.createSound({
        id: location
        ,url: location
        ,usePeakData: true
        ,useWaveformData: true
        ,whileplaying: drawWaveformAndLevels
      });
              
      soundManager.play(location);
      
      e.preventDefault();
    });

  var levels = _('#levels')
    ,ctx = levels[0].getContext('2d')
    ,width = levels.width()
    ,height = levels.height();

  function drawWaveformAndLevels() {
      
    /* draw levels */
    var leftHeight = this.peakData.left * height
      ,rightHeight = this.peakData.right * height
      ,leftOffset = height - leftHeight
      ,rightOffset = height - rightHeight;
      
    ctx.fillStyle = 'rgba(255,255,255,.1)'
    ctx.fillRect(0,0, 20, 50);
    ctx.fillStyle = 'rgba(0,0,0,.2)';
    
    ctx.fillRect(0, leftOffset,  5, leftHeight);
    ctx.fillRect(10,rightOffset, 5, rightHeight);
    
    /* draw waveform */ 
    var i, segment;

    ctx.fillStyle = 'rgba(255,255,255,.8)'
    ctx.fillRect(20,0, width, height);

    ctx.fillStyle = 'rgba(255,0,0,1)';
    
    for (i=0; i<256; i+=2) {
      segment = height + Math.ceil(this.waveformData[i] * -height);
      ctx.fillRect(20 + i/2, height - segment/2, 1, segment/6);
    }

});