Geek Answers Handbook

How to implement multiprocessor jplayers

If there is anyone who used jplayer before, I need help with this question.

I have several jplayers where each player has to play his own audio file. But this is not so, if I play jplayer, then all jplayers play, all play the same audio file from the selected jplayers. In fact, if I use the control in one jplayer, it also controls all the other jplayers.

So, I'm trying to implement jplayers from multiple instances, the information from which comes from this:

http://www.jplayer.org/latest/demo-03/

But I'm really trying to implement this, so my question is: can someone help me finish the implementation for this, so that jplayers work as they should, and jplayer just controls only its player and does not affect other jplayers

Below is the javascript code that I have at the moment (view source):

<script type="text/javascript"> $(document).ready(function(){ $("#jquery_jplayer_1-72-0").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { mp3: "AudioFiles/Kalimba.mp3" }); }, play: function() { // To avoid both jPlayers playing together. $(this).jPlayer("pauseOthers"); }, solution:"flash,html", swfPath: "jquery", supplied: "mp3" }); }); </script>

UPDATE:

Actual code:

If there is no audio file, display another space for each audio file, display the audio player. I also included html controls, not sure if needed, but posted it just in case

  //start:procedure audio $aud_result = ''; if(empty($arrAudioFile[$key])){ $aud_result = '&nbsp;'; }else{ $j = 0; foreach ($arrAudioFile[$key] as $a) { $info = pathinfo('AudioFiles/'.$a); ?> <script type="text/javascript"> $(document).ready(function(){ $("#jquery_jplayer_1-<?php echo $key.'-'.$j; ?>").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { <?php echo $info['extension'];?>: "<?php echo "AudioFiles/".$a; ?>" }); $(this).bind($.jPlayer.event.play, function() { $(this).jPlayer("pauseOthers"); }); }, solution:"flash,html", swfPath: "jquery", supplied: "<?php echo $info['extension'];?>" }); }); </script> <div id="jquery_jplayer_1-<?php echo $key.'-'.$j; ?>" class="jp-jplayer"></div> <div id="jp_container_1" class="jp-audio"> <div class="jp-type-single"> <div class="jp-gui jp-interface"> <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><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li> </ul> <div class="jp-progress"> <div class="jp-seek-bar"> <div class="jp-play-bar"></div> </div> </div> <div class="jp-volume-bar"> <div class="jp-volume-bar-value"></div> </div> <div class="jp-time-holder"> <div class="jp-current-time"></div> <div class="jp-duration"></div> <ul class="jp-toggles"> <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li> <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li> </ul> </div> </div> </div> </div> <?php $j++; } } //end:procedure audio ?>
+4
source share
2 answers

You can create a function and pass parameters ( file and player id ) like this to create different players on the same page without conflicts:

 function js_audioPlayer(file,location) { jQuery("#jquery_jplayer_" + location).jPlayer( { ready: function () { jQuery(this).jPlayer("setMedia", { mp3: file }); }, cssSelectorAncestor: "#jp_interface_" + location, swfPath: "/swf" }); return; }

In this example, the file and location variable is passed to the wrapper function, which then creates the player.

and then run the js_audioPlayer() javascript function as many times as you want players:

 js_audioPlayer('file1.mp3',1); //Player 1 js_audioPlayer('file2.mp3',2); //Player 2 js_audioPlayer('file3.mp3',3); //Player 3

creation of div files with identifiers:

 jquery_jplayer_1 jquery_jplayer_2 jquery_jplayer_3

and DIV interfaces with identifiers:

 jp_interface_1 jp_interface_2 jp_interface_3

Hope this helps.

Read more ... : http://www.nightbluefruit.com/blog/2011/08/multiple-jplayers-on-the-same-page/

+8
source

This is the code for multiple instances of the audio player using jplayer. The following code works for me. Hope this helps someone.

 $(document).ready(function(){ /*---Create a jplayer instance on click on the play image---*/ $(".audio").click(function() { $.jPlayer.pause(); var record_id = this.id; var path = 'path for the audio file'; $("#jquery_jplayer_"+record_id).jPlayer({ ready: function (event) { $(this).jPlayer("setMedia", { title: "Bubble", oga: path, }); }, cssSelectorAncestor: "#jp_container_"+record_id, supplied: "oga", wmode: "window", errorAlerts: true, consoleAlerts: true, warningAlerts: true, useStateClassSkin: true, autoBlur: false, smoothPlayBar: true, keyEnabled: true, remainingDuration: true, toggleDuration: true }); }); });
0
source

More articles:


All Articles