jquery mp3player - works as standalone, not in website

I used the jPlayerscript to create a mp3-player for a website that I am making. Tested and styled it in a standalone page where it works perfectly:

http://www.basenharald.nl/3d/demo-02.htm

However if I implement it in the real website, I cannot get the controls to work. Neither will the playlist fully display:

http://www.basenharald.nl/3d/ (click "muziek" to locate it) Besides that, the only button that seems to work is play and pause. But when i click that, it jumps back to the starting screen... I think it is due to some conflicting scripts, but cannot find where.

Can anyone help find the problem?

Solution

To get all the songs to appear on your playlist, add this to your style.css file:

#muziek .jp-type-playlist li {
    height: 18px;
}

The second <li> tag is still blocking the player. Make the markup in this area of the page look like this:

<ul style="{snip... use existing styles}" id="muziek">
    <li style="{snip... use existing styles}">
        <div id="muur-wrapper">
            <!-- mp3 player snipped -->
            <img src="images/muziek-muziek.png" style="position: absolute; left: 251px; top: 300px;">
        </div>
    </li>
</ul>

Then you'll notice that clicking on items on your playlist bring you back to the home "page". That's because you've got links in there with href="#". That's their correct behavior, but I'm guessing that "#" will eventually be replaced by a link to the actual mp3 files. In any case, this should make the player behave like the one in your standalone demo.