I am working on a music contest site which has a lot of instances (90) of jPlayer on the same page. The players work but unfortunately I have to wait between 5s - 30s before loading and playing song.
This is jQuery code for each player:
$("#jquery_jplayer_2").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4a: "url/contest/sounds/radioacoustik-rita.m4a",
ogg: "url/contest/sounds/radioacoustik-rita.ogg"
});
},
play: function() { // To avoid both jPlayers playing together.
$(this).jPlayer("pauseOthers");
},
swfPath: "url/contest/js/Jplayer.swf",
supplied: "m4a, ogg",
solution: "html, flash",
preload: 'metadata',
cssSelectorAncestor: "#jp_container_2",
wmode: "window"
});
Is there a way for me to simplify this code and allow me to load all the songs faster?
EDIT
Ok, so i try to simplify the code by passing some parameters into variables :
$(document).ready(function(){
$(".lecteur").each(function(i){
var lecteurNum = $(this).addClass("" + (i+1));
}); //loop through audio and assign a unique class for each
var wrapPlayer = $(".wrap-player");
var classLecteur = wrapPlayer.parent().attr('class').split(' ')[1];
var newPlayerId = "jquery_jplayer_" + classLecteur; // create id jquery_player
var jpContainerId = "#jp_container_" + classLecteur; // create id for jp-container
var songPath = wrapPlayer.attr("rel"); // get url of current sound
$("#" + newPlayerId).jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4a: "http://www.url.com/" + songPath + ".m4a",
oga: "http://www.url.com/" + songPath + ".ogg",
});
},
play: function() { // To avoid both jPlayers playing together.
$(this).jPlayer("pauseOthers");
},
swfPath: "http://www.url.com/contest/js/Jplayer.swf",
solution: "html, flash",
supplied: "m4a, oga",
cssSelectorAncestor: "",
wmode: "window"
});
});
It seems to work, but all instances playing together the same track (the first).. Any solutions ?
Ok i solved the problem, this function works :
the HTML /
<div class="lecteur">
<!--PLAYER #1-->
<div class="wrap-player" rel="contest/sounds/lord-fauttafer">
<div id="jquery_jplayer_<?php echo $player_id1; ?>" class="jp-jplayer"></div>
<div id="jp_container_<?php echo $player_id1; ?>" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<!--section title - volume bar -->
<div class="wrap-volume-bar-title">
<div class="jp-title">
<ul>
<li><?php echo $title_sound_1; ?></li>
</ul>
</div>
<div class="wrap-volume-bar">
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
</div>
<!--section controllers -->
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
<li style="display:none"><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
</ul>
<!--section ptogress bar -->
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"> </div>
</div>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
</div>
<div class="wrap-time-duration"></div>
</div>
<!-- end jp-UI-->
<div class="jp-no-solution">
<span>Mise à jour requise</span>
Vous devez mettre à jour votre navigateur en téléchargeant la dernière version de falsh player <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
<!-- end player1-->
</div>
</div>
And the javascript :
$(document).ready(function(){
$(".lecteur").each(function(i){
var vidNum = $(this).addClass("" + (i+1));
}); //loop and assign a unique class for each
$(".lecteur").each(function(){
var wrapPlayer = $(".wrap-player");
var classLecteur = $(this).attr('class').split(' ')[1]; //get the class number of current lecteur
var newPlayerId = "jquery_jplayer_" + classLecteur; // create id jquery_player
var songPath = $(this).find(".wrap-player").attr("rel"); // get url of current sound
$("#" + newPlayerId).jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4a: "http://url/" + songPath + ".m4a",
oga: "http://url/" + songPath + ".ogg",
});
},
play: function() { // To avoid both jPlayers playing together.
$(this).jPlayer("pauseOthers");
},
swfPath: "http://url/contest/js/Jplayer.swf",
solution: "html, flash",
supplied: "m4a, oga",
cssSelectorAncestor: "#jp_container_" + classLecteur,
wmode: "window"
});
});
});