Clash Royale CLAN TAG

jPlayer multiple instances issue

I've created multiple instances of jPlayer on a product list, at main page of my shop.

In file product-list.tpl I've attached iframe inside foreach loop which load jPlayer tracks from custom directories - based on a product name.

Every instance of jPlayer have individual ID: #jquery_jplayer_1, #jquery_jplayer_2, etc. Everything works fine except playing just from one jPlayer at the same.
When some track is playing and then we click on another player there is two songs playing at the same time.
I've tried few solutions to solve this problem but nothing seems work.

There is script where every instance of jPlayer is created:

<script type="text/javascript">
var querystring = window.location.search,
match = querystring.match(/playerNumber=(.*)?&*/),
playerNumber = match[1];

new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_"+playerNumber,
cssSelectorAncestor: "#jp_container_"+playerNumber
}, [
{foreach $songs as $name => $path}
{
title: "{$path.name}",
mp3: "https://{$host}{$baseUrl}/utwor/{$path.path}"
},
{/foreach}
], {
play: function() { // doesn't work at all
$(this).jPlayer("pauseOthers");
},
swfPath: "{$baseUrl}/static/",
supplied: "mp3",
wmode: "window",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true
});
</script>


I've used Smarty to load songs from the server.

There is html code which is loaded on every call of iframe prom product-list.tpl:

{literal}
<script type="text/javascript">
var querystring = window.location.search,
match = querystring.match(/playerNumber=(.*)?&*/),
playerNumber = match[1];


</script>
{/literal}

<div id="jquery_jplayer" class="jp-jplayer"></div>
<meta charset="utf-8">

<div id="jp_container" class="jp-audio" role="application" aria-label="media player">

<div class="jp-type-playlist">
<div class="jp-gui jp-interface">
<div class="jp-volume-controls">
<button class="jp-mute" role="button" tabindex="0">mute</button>
<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
<div class="jp-controls-holder">
<div class="jp-controls">
<button class="jp-previous" role="button" tabindex="0">previous</button>
<button class="jp-play" role="button" tabindex="0">play</button>
<button class="jp-stop" role="button" tabindex="0">stop</button>
<button class="jp-next" role="button" tabindex="0">next</button>
</div>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
<div class="jp-toggles">
<button class="jp-repeat" role="button" tabindex="0">repeat</button>
<button class="jp-shuffle" role="button" tabindex="0">shuffle</button>
</div>
</div>
{literal}
<script>
document.getElementById("jquery_jplayer").setAttribute('id','jquery_jplayer_'+playerNumber);
document.getElementById("jp_container").setAttribute('id','jp_container_'+playerNumber);
</script>
{/literal}
</div>
<div class="jp-playlist">
<ul>
<li>&nbsp;</li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>


Can anyone help?

screenshot of jPlayer instances at index page

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.