How to get SoundManager2 360player canvas visualization to work?

Question

The demo I am referring to is : http://www.schillmania.com/projects/soundmanager2/demo/360-player/canvas-visualization.html

I have added the relevant ( what I think is relevant ) scripts and css which are: flashblock.css,360player.css,360player-visualization.css,berniecode-animator.js, soundmanager2.js,360player.js

From what I understood from the source code, I have the following setup:

HTML

<div id="sm2-container">
<!-- sm2 flash goes here -->
</div>

<div class="sm2-inline-list"> <!-- remove this class to have one item per line -->

<div class="ui360 ui360-vis"><a href="http://www.schillmania.com/projects/soundmanager2/demo/mpc/audio/CRASH_1.mp3">Crash 1</a></div>
<div class="ui360 ui360-vis"><a href="http://www.schillmania.com/projects/soundmanager2/demo/mpc/audio/CRASH_5.mp3">Crash 5</a></div>
<div class="ui360 ui360-vis"><a href="http://www.schillmania.com/projects/soundmanager2/demo/mpc/audio/CRASH_6.mp3">Crash 6</a></div>
<div class="ui360 ui360-vis"><a href="http://www.schillmania.com/projects/soundmanager2/demo/mpc/audio/CHINA_1.mp3">China 1</a></div>

</div>
<div>
<div class="ui360 ui360-vis"><a href="http://www.schillmania.com/projects/soundmanager2/demo/_mp3/sine,%20square,%20sawtooth,%20rando.mp3">Sine, Square, Sawtooth, Wave (Warning: LOUD)</a>    </div>
<div class="ui360 ui360-vis"><a href="../../demo/_mp3/1hz-10khz-sweep.mp3">1-10 Khz Sweep (Warning: LOUD)</a></div>
</div>

CSS

#left h2 {
 padding-top:0px;
 margin-bottom:0.25em;
 color:#666;
}

pre.block {
 margin-top:0.5em;
}

 /* special case */

#left {
 width:auto;
 max-width:100%;
}

JS

soundManager.setup({
   // path to directory containing SM2 SWF
   url: '../../swf/'
});

threeSixtyPlayer.config.scaleFont = (navigator.userAgent.match(/msie/i)?   false:true);
threeSixtyPlayer.config.showHMSTime = true;

// enable some spectrum stuffs

threeSixtyPlayer.config.useWaveformData = true;
threeSixtyPlayer.config.useEQData = true;

// enable this in SM2 as well, as needed

if (threeSixtyPlayer.config.useWaveformData) {
   soundManager.flash9Options.useWaveformData = true;
 }
if (threeSixtyPlayer.config.useEQData) {
   soundManager.flash9Options.useEQData = true;
}
if (threeSixtyPlayer.config.usePeakData) {
   soundManager.flash9Options.usePeakData = true;
}

if (threeSixtyPlayer.config.useWaveformData ||    threeSixtyPlayer.flash9Options.useEQData || threeSixtyPlayer.flash9Options.usePeakData) {
  // even if HTML5 supports MP3, prefer flash so the visualization features can be used.
 soundManager.preferFlash = true;
 }

 // favicon is expensive CPU-wise, but can be enabled.




 threeSixtyPlayer.config.useFavIcon = false;

I have created a relevent pen: http://codepen.io/abhijit_mishra/pen/evEddg In the pen the visualization is not rendered. It will be a huge help if anyone can help :)