help me with multi jplayer

i have a code with 3 jplayer(see attachment) but when make it dynamic it cant play
need someone help me,
thank you
jplayer.php
tytdimhenAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
leakim971Connect With a Mentor PluritechnicianCommented:
Try this :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>THREE PLAYERS</title>        
<link href="http://jplayer.org/css/jPlayer.css" rel="stylesheet" type="text/css" />        
<link href="http://jplayer.org/latest/skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet" type="text/css" />       
<link href="http://jplayer.org/latest/skin/circle.skin/circle.player.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>    
<script type="text/javascript" src="http://jplayer.org/2.1.0/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="http://jplayer.org/latest/js/jquery.transform2d.js"></script>
<script type="text/javascript" src="http://jplayer.org/latest/js/jquery.grab.js"></script>
<script type="text/javascript" src="http://jplayer.org/latest/js/mod.csstransforms.min.js"></script>
<script type="text/javascript" src="http://jplayer.org/latest/js/circle.player.js"></script>       
<script>
	jQuery(function($) {

		var mp3links = ['http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3', 'http://kolber.github.io/audiojs/demos/mp3/juicy.mp3', 'http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3'];

		var nb_players = $(".jp-jplayer").length;
		var nb_MP3s = mp3links.length;
		var i = 0;

		function createPlayer() {
			var mp3link = mp3links[i];
			$("#jquery_jplayer_"+i).jPlayer({
				ready: function() {
					$(this).jPlayer("setMedia", { mp3: mp3link });
					i++;
					if(i<nb_players && i<nb_MP3s) {
						createPlayer();
					}
				},
				play: function() { // To avoid both jPlayers playing together.
					$(this).jPlayer("pauseOthers");
				},
				supplied: "mp3",
				cssSelectorAncestor: "#jp_container_"+i
			});
		}

		createPlayer();

	});
</script>
</head>
<body>
<?php
for($i=0;$i<3;$i++){
?>
    <div id="jquery_jplayer_<?php echo $i?>" class="jp-jplayer"></div>
    <div class="jp-audio" id="jp_container_<?php echo $i?>">
        <div class="jp-type-single">
            <div class="jp-gui jp-interface">
                <ul class="jp-controls">
                    <li><a tabindex="1" class="jp-play" href="javascript:;" style="display: block;">play</a></li>
                    <li><a tabindex="1" class="jp-pause" href="javascript:;" style="display: none;">pause</a></li>
                    <li><a tabindex="1" class="jp-stop" href="javascript:;">stop</a></li>
                    <li><a title="unmute" tabindex="1" class="jp-unmute" href="javascript:;" style="display: none;">unmute</a></li>
                </ul>
                <div class="jp-progress">
                    <div class="jp-seek-bar" style="width: 100%;">
                        <div class="jp-play-bar" style="width: 0%;"></div>
                    </div>
                </div>
            </div>
            <div class="jp-no-solution" style="display: none;"></div>
    	</div>
    </div>	
<?php
}
?>
</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.