JPlayer - MP3 Playlist support using Flash fallback

I'm new to JPlayer, and don't really know how to use it well. I'm trying to create a player which only uses MP3 files, I know not every browser natively supports MP3 playback so for the Player to work it needs to use the Flash fallback in some cases.

Currently I can make the Player work with a single MP3 but when multiple MP3's are added only the first track plays.

Here is my current script

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Player</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
<script type='text/javascript' src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jplayer.playlist.min.js"></script>
<script type='text/javascript'>//<![CDATA[ 
$(function(){
$("#jquery_jplayer").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", { mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3" }, 
      { mp3: "http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3" });
    },
    swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
    supplied: "mp3",
    volume: 1,
    wmode:"window",
    solution: "html,flash",
    errorAlerts: true,
    warningAlerts: false

});
});//]]>  
</script>
</head>
<body>
<div id="jquery_jplayer"></div>
<div id="jp_container_1" class="jp-audio">
    <div class="jp-type-single">
      <div id="jp_interface_1" class="jp-interface all_rounded_corners">
        <ul class="jp-controls">
          <li><a href="#" class="jp-play pp" tabindex="1">play</a></li>
          <li><a href="#" class="jp-pause pp" tabindex="1">pause</a></li>
          <li><a href="#" class="jp-previous" tabindex="1">Previous</a></li>
          <li><a href="#" class="jp-next" tabindex="1">Next</a></li>
        </ul>
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
      </div>
    </div>
</div>
</body>
</html>

I can tell I've gone wrong somewhere but I don't know where, I'm hoping for your help. Feel free to modify the script to make it work and possibly direct me to an example of it working.

Thank you for your help.

Solution

Instead of jPlyer you need to use jPlayerPlaylist, need to do something like bellow

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Player</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
<script type='text/javascript' src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jplayer.playlist.min.js"></script>

</head>
<body>
<div id="jquery_jplayer"></div>
<div id="jp_container_1" class="jp-audio">
    <div class="jp-type-single">
      <div id="jp_interface_1" class="jp-interface all_rounded_corners">
        <ul class="jp-controls">
          <li><a href="#" class="jp-play pp" tabindex="1">play</a></li>
          <li><a href="#" class="jp-pause pp" tabindex="1">pause</a></li>
          <li><a href="#" class="jp-previous" tabindex="1">Previous</a></li>
          <li><a href="#" class="jp-next" tabindex="1">Next</a></li>
        </ul>
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
      </div>
    </div>
</div>
</body>
</html>

<script type='text/javascript'>//<![CDATA[ 

var myPlaylist = null;
 $(document).ready(function () {
 myPlaylist = new jPlayerPlaylist(
                        {
                            jPlayer: "#jquery_jplayer_N",
                            cssSelectorAncestor: "#jp_container_N"
                        },
                        [
                            {
                                mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
                            }
                        ],
                        {
                            playlistOptions: {
                                enableRemoveControls: true
                            },

                            swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
                            supplied: "mp3",
                            solution: "html,flash"

                        });


 myPlaylist.option("autoPlay", true);

myPlaylist.add({ title: "", artist: "", mp3: "http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3", poster: "", });
});
</script>