JPlayer Audio PLAYLIST

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        
        <!-- 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/css/jPlayer.css" rel="stylesheet" type="text/css" />        
        <!--<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" />       
        <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.2.0/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="http://jplayer.org/latest/js/jquery.transform.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 type="text/javascript">
            
            /*paste or reference your JS here*/
              
        </script>
        
    </head>
    <body>
        <h1 class="title">Using <a href="http://jplayer.org/">jPlayer</a></h1>
        
        <p>Sources:
            <ul>
                <li><a href="http://jplayer.org/latest/demo-01/">http://jplayer.org/latest/demo-01/</a> AND</li>
                <li><a href="http://jplayer.org/latest/demo-05/">http://jplayer.org/latest/demo-05/</a></li>
            </ul>
        </p>
        
      
      
      


		<div...

JavaScript

$(document).ready(function() {

    // Source: http://jplayer.org/latest/demo-01/
    
    $("#jquery_jplayer_1").jPlayer({
        ready: function(event) {
            $(this).jPlayer("setMedia", {
                mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
                oga: "http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
            });
        },
        swfPath: "http://www.jplayer.org/2.2.0/js",
        supplied: "mp3, oga"
    });
    
    // Source: http://jplayer.org/latest/demo-05/
    
    /*
     * Instance CirclePlayer inside jQuery doc ready
     *
     * CirclePlayer(jPlayerSelector, media, options)
     *   jPlayerSelector: String - The css selector of the jPlayer div.
     *   media: Object - The media object used in jPlayer("setMedia",media).
     *   options: Object - The jPlayer options.
     *
     * Multiple instances must set the cssSelectorAncestor in the jPlayer options. Defaults to "#cp_container_1" in CirclePlayer.
     *
     * The CirclePlayer uses the default supplied:"m4a, oga" if not given, which is different from the jPlayer default of supplied:"mp3"
     * Note that the {wmode:"window"} option is set to ensure playback in Firefox 3.6 with the Flash solution.
     * However, the OGA format would be used in this case with the HTML solution.
     */

    var myCirclePlayer = new CirclePlayer("#jquery_jplayer_2",
    {
        m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
        oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
    }, {
        cssSelectorAncestor: "#cp_container_1",
        swfPath: "../js",
        wmode: "window"
    });
    
});