How to place audio player working correctly in a loop?

Question

I have a jplayer audio player where obviously it plays audios. Now the issue I am having is that what happens is that I am looping through each question, a question can have either one, multiple or no audios to play.

Each audio has its own audio player. But what is happening with this code below is if I play one audio player, the rest other audio players also play and it ends up playing all the audio players. How can this be fixed so that if I play an audio player, it only plays and controls that audio player only?

Below is code where it loops through each audio player:

        //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; ?>"
      });
    },
    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
?>

If your SQL fetches zero rows, you will have nothing on the screen and no errors. — grahamj42, Feb 06 '13 at 20:14
I don't see how this would cause the issue you're seeing, but one error I see is that you define a div with the same id "jp_container_1" every time through the loop. — Ben Taitelbaum, Feb 08 '13 at 15:20

score 2 · Answer 1 · answered Feb 08 '13 at 15:31

I can't quite run your example right now, but from what it looks like, you're loading multiple jPlayer instances on the same page by looping through all of your audio files on the server side and writing out a bunch of html/js to the page.

It's been a while since I've used jPlayer, so please excuse me if I'm misremembering this, but there may be some built in functionality to allow you to queue audio files within it.

If I'm wrong, you could easily replicate this functionality by using some of the supplied events that fire when audio files start/finish. Basically, create some kind of Javascript array with the URLs of your audio files. Start playing the first audio file in the list. When that file finishes playing, jPlayer should fire some kind of finished event. When that happens, remove it from your list and move on to the next.

This should keep you from having songs playing on top of each other and allow you to play them in whatever order you prefer.

And remember, you should only be using your PHP code to create that JS list of URLs, either by writing out the JS to the screen or via some kind of AJAX call to retrieve the URLs. What it looks like you're doing now is looping over your HTML and creating many different jPlayer instances that are all playing on top of each other.

Hi, in your own time can you be able to produce a code snippet in where and what changes to make, it will make it easier for me as I have attempted what you have said and even though in theory it obviously makes sense, implementing it is the major problem I am facing. +1 for the details information — user1914374, Feb 08 '13 at 16:41

score 0 · Answer 2 · answered Feb 09 '13 at 21:59

Here is the solution which I have replicated and tested:

        //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-<?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");
        });
    },
    cssSelectorAncestor: "#jp_container_<?php echo $key.'-'.$j; ?>",
    cssSelectorAncestor: "#jp_interface_<?php echo $key.'-'.$j; ?>",
    solution:"flash,html",
    swfPath: "jquery",
    supplied: "<?php echo $info['extension'];?>"
});
}); 
</script>
  <div id="jquery_jplayer-<?php echo $key.'-'.$j; ?>" class="jp-jplayer"></div>
  <div id="jp_container_<?php echo $key.'-'.$j; ?>" class="jp-audio">
    <div class="jp-type-single">
      <div class="jp-gui jp-interface" id="jp_interface_<?php echo $key.'-'.$j; ?>">
        <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
?>

How to place audio player working correctly in a loop?

2 Answers2