Home/ Questions/Q 7955299
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T03:41:00+00:00

What I’m trying to do is loop through the 2 urls i have in

  • 0

What I’m trying to do is loop through the 2 urls i have in my db. So far I’ve gotten it to work for the first row but I need it to loop through both of the rows. As of right now it is only looping through the first url in the db two times. I tried making ‘#jquery_jplayer_1’ a class but that still doesn’t seem to work. Any ideas or help?

<!DOCTYPE html>
<html lang="en">
<head>
<?php include("vh.php"); ?>
<?php $query = $this->db->query("SELECT * FROM music");
      foreach ($query->result() as $row) {
?>
        <!-- Example code to create a simple player using jPlayer 2.1.0 -->

        <!-- Skins are defined in CSS. Uncomment the following CSS reference and comment out the one below it to switch skins -->

        <!--<link href="http://jplayer.org/latest/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />--> 
        <link href="http://jplayer.org/latest/skin/pink.flag/jplayer.pink.flag.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">
            $(document).ready(function() {

                $(".jquery_jplayer_1").jPlayer({
                    ready: function(event) {
                        $(this).jPlayer("setMedia", {
                            mp3: "<?=$row->songURI?>",
                        });
                    },
                    swfPath: "http://www.jplayer.org/2.1.0/js",
                    supplied: "mp3"
                });
            });
        </script>

    </head>
    <body>
        <div class="jquery_jplayer_1" 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">

                        <!-- comment out any of the following <li>s to remove these buttons -->

                        <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>

                    <!-- you can comment out any of the following <div>s too -->

                    <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-current-time"></div>
                    <div class="jp-duration"></div>                   
                </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>
    </body>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<?php } ?>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    so you have a few issues here. most of them are in js. Also i looked at the jplayer api and it seems that it can only play one song at a time, which is why you have that loop in there i suppose.

    Here are your issues:

    • Ideally you want to have one document ready function in jquery. This makes your code less all over the place. I would make one function if you can help it which in this case you can.
    • in your code, the selector $(".jquery_jplayer_1") will return a jquery object containing 2 elements (since you have 2 divs of that class on the page after the loop), but since you have 2 functions initing the jplayer to those 2 elements (first with mp3#1 then mp3#2) you will either break jplayer on 2nd init or set them both to be mp3#2
    • you have a trailing comma in your setMedia object: mp3: "<?=$row->songURI?>", – this will break older IE with a very cryptic js error. remove trailing commas.
    • you have 2 class attributes on the empty jplayer div!

    the proper way to do this would be to:

    • move the loop to be around the 2 jplayer divs, the container and the empty player div
    • in the loop make sure to output the classes as jquery_jplayer_1 and jquery_jplayer_2 and same for the containers

    • put a 2nd loop inside the ready function to output separate init calls to jplayer. here is what the 2nd loop iteration output should look like:

             $(".jquery_jplayer_2").jPlayer({
            ready: function(event) {
                $(this).jPlayer("setMedia", {
                    mp3: "<?=$row->songURI?>"
                });
            },
            cssSelectorAncestor: '.jp_container_2',
            swfPath: "http://www.jplayer.org/2.1.0/js",
            supplied: "mp3"
        });

    note that i added cssSelectorAncestor: ‘.jp_container_2’ you will need to have that in your init functions to tell it which container to use. each player should have a seperate container.

    i hope this helps

    also, you have some extra doc type crap at the bottom.

    • 0