Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <ul> <li>Neither Firefox nor IE will play an MP3 file unless you supply a valid <code>swfPath</code>. </li> <li>You are supplying a <code>.jp-interface</code> element as the CSS Ancestor but this is incorrect - you need to supply "the cssSelector of an ancestor of all cssSelectors" (see <a href="http://www.jplayer.org/latest/developer-guide/#jPlayer-option-cssSelectorAncestor" rel="nofollow">the docs</a>)</li> </ul> <p>try the changes to your code i made in <a href="http://jsfiddle.net/75lb/YAe4g/" rel="nofollow">this Fiddle</a> - see if it works for you.</p> <p>the new HTML markup looks like this</p> <pre><code>&lt;div class="players"&gt; &lt;div id="jp_container_1" class="jp-audio"&gt; &lt;div class="jp-type-single"&gt; &lt;div id="jquery_jplayer_1" class="jp-jplayer"&gt;&lt;/div&gt; &lt;div id="jp_interface_1" class="jp-interface"&gt; &lt;ul class="jp-controls"&gt; &lt;li&gt;&lt;a href="#" class="jp-play" tabindex="1"&gt;play&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="jp-pause" tabindex="1"&gt;pause&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="jp-progress"&gt; &lt;div class="jp-seek-bar"&gt; &lt;div class="jp-play-bar"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="players"&gt; &lt;div id="jp_container_2" class="jp-audio"&gt; &lt;div class="jp-type-single"&gt; &lt;div id="jquery_jplayer_2" class="jp-jplayer"&gt;&lt;/div&gt; &lt;div id="jp_interface_2" class="jp-interface"&gt; &lt;ul class="jp-controls"&gt; &lt;li&gt;&lt;a href="#" class="jp-play" tabindex="1"&gt;play&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="jp-pause" tabindex="1"&gt;pause&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="jp-progress"&gt; &lt;div class="jp-seek-bar"&gt; &lt;div class="jp-play-bar"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="players"&gt; &lt;div id="jp_container_3" class="jp-audio"&gt; &lt;div class="jp-type-single"&gt; &lt;div id="jquery_jplayer_3" class="jp-jplayer"&gt;&lt;/div&gt; &lt;div id="jp_interface_3" class="jp-interface"&gt; &lt;ul class="jp-controls"&gt; &lt;li&gt;&lt;a href="#" class="jp-play" tabindex="1"&gt;play&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="jp-pause" tabindex="1"&gt;pause&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="jp-progress"&gt; &lt;div class="jp-seek-bar"&gt; &lt;div class="jp-play-bar"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>and the new Javascript: </p> <pre><code>$("#jquery_jplayer_1").jPlayer({ swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf", ready: function () { $(this).jPlayer("setMedia", { mp3: "http://www.freesfx.co.uk/rx2/mp3s/3/2665_1315685839.mp3" }); }, play: function () { $(this).jPlayer("pauseOthers"); }, supplied: "mp3" }); $("#jquery_jplayer_2").jPlayer({ swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf", ready: function () { $(this).jPlayer("setMedia", { mp3: "http://www.freesfx.co.uk/rx2/mp3s/3/2664_1315685834.mp3" }); }, play: function () { $(this).jPlayer("pauseOthers"); }, cssSelectorAncestor:"#jp_interface_2", supplied: "mp3" }); $("#jquery_jplayer_3").jPlayer({ swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf", ready: function () { $(this).jPlayer("setMedia", { mp3: "http://www.freesfx.co.uk/rx2/mp3s/3/2660_1315685820.mp3" }); }, play: function () { $(this).jPlayer("pauseOthers"); }, cssSelectorAncestor:"#jp_interface_3", supplied: "mp3" }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload