Jquery mp3player - works offline, not on website

Question

I used jPlayerscript to create an mp3 player for the website I am making. Tested and stylized it on a separate page where it works great:

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

However, if I implement it on a real website, I cannot get the controls to work. The playlist will not display completely:

http://www.basenharald.nl/3d/ (press "muziek" to find it) Also, the only button that seems to work is play and pause. But when I click this, it returns to the initial screen ... I think this is due to some conflicting scenarios, but cannot find where.

Can anyone help find the problem?

Answer 1

To have all the songs appear in 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. Layout in this area of ​​the page as follows:

 <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 will notice that clicking on the items in your playlist returns you to the home page. This is because you have links with href = "#". This is their correct behavior, but I assume that the "#" will eventually be replaced by a link to the actual mp3 files. In any case, this should lead to the fact that the player will behave the same as in your separate demo.

Answer 2

<div id="toppanel"> is in front of the play button ... so when you press the play button, you actually press the top bar.

• What you can do is use the z-index on the payer in CSS to move it (in the z direction)
• move the player down.
• remove top panel

Answer 3

This line (in your "scripts.js") seems like a bad apple:

 /*! * Smoothscroll */ eval((function(){a="Scroller={speed:10,8dC.;d.while(dC.+C.}}... 

I checked the source code of the original script (the packaged version that you included on your website is not readable) and one comment mentions that Smoothscroll captures all the anchors in the document and gives the click event to scroll. Since the jquery player uses bindings for his controls, there is your conflict.

Answer 4

I had a problem with conflicting scripts and could not find the error. Then I added var $j = jQuery.noConflict(); and he fixed my problems. More about jQuery is not here: http://api.jquery.com/jQuery.noConflict/

I'm not sure if this will solve your problem, but worth a try.