Javascript SoundManager2 Problems

I am trying to get this player to basically just start and stop when you click the track. I have failed miserably at this. Has anyone used this before and can give me a little help? I was hoping to get it to act similar to this http://www.schillmania.com/projects/soundmanager2/demo/page-player/basic.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<title>DEMO</title>
<link rel="stylesheet" type="text/css" href="style.css" />



<script type="text/javascript" src="soundmanager2.js"></script>
<script type="text/javascript" src="page-player.js"></script>


<script type="text/javascript">
soundManager.url = '';
soundManager.flashVersion = 9; // optional: shiny features (default = 8)
soundManager.useFlashBlock = false; // optionally, enable when you're ready to dive in
// enable HTML5 audio support, if you're feeling adventurous. iPad/iPhone will always get this.
// soundManager.useHTML5Audio = true;
</script>





</head>



<body>

 <h1>SM2 DEMO</h1>



 <div id="sm2-container">

  <!-- SM2 flash movie goes here -->

 </div>



 <ul class="playlist">



  <li><a href="music/bigcirclelittlecircle.mp3">TESTING</a></li>



  <li><a href="music/bigcirclelittlecircle.mp3" title="Dr. John Groove">TESTING 2</a></li>

  <!-- files from the web (note that ID3 and waveformData information will *not* load from remote domains without permission, due to Flash security restrictions) -->





 </ul>



 <div id="control-template">

  <!-- control markup inserted dynamically after each link -->

  <div class="controls">

   <div class="statusbar">

    <div class="loading"></div>

     <div class="position"></div>

   </div>

  </div>

  <div class="timing">

   <div id="sm2_timing" class="timing-data">

    <span class="sm2_position">%s1</span> / <span class="sm2_total">%s2</span></div>

  </div>

  <div class="peak">

   <div class="peak-box"><span class="l"></span><span class="r"></span>

   </div>

  </div>

 </div>



 <div id="spectrum-container" class="spectrum-container">

  <div class="spectrum-box">

   <div class="spectrum"></div>

  </div>

 </div> 







</body>

</html>

I was look for a solution to a different problem with SoundManger and found this question. I know this is a little late, but hopefully it will helps.

I use the following code to test SoundManager. You will need to change the paths to soundmanager2.js, soundmanager2.swf, and the MP3 file.

<html >
<head>
    <title></title>

    <script type="text/javascript" src="/Project/PublicWebSite/Scripts/soundmanager2.js"></script>
    <script type="text/javascript">
        soundManager.debugMode = true;
        soundManager.defaultOptions.volume = 50
        soundManager.debugFlash = true; // enable flash debug output for this page
        soundManager.url = '/Project/PublicWebSite/Scripts/swf/soundmanager2.swf';
        soundManager.flashVersion = 8; // optional: shiny features (default = 8)
        soundManager.useFlashBlock = false; // optionally, enable when you're ready to dive in
        //enable HTML5 audio support, if you're feeling adventurous. iPad/iPhone will always get this.
        //soundManager.useHTML5Audio = true;
        soundManager.onready(function () {
            soundManager.createSound('helloWorld', '/Project/PublicWebSite/Content/Sounds/Chime.mp3');
            soundManager.play('helloWorld');
        });
    </script>

</head>
</body>
</html>

BarDev