JPlayer Audio Inside Modal Dialog

by bizamajig

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/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="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css" rel="stylesheet">
        <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">
           

    $("#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.1.0/js",
        supplied: "mp3, oga"
    });
              
        </script>
        <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/js/bootstrap.min.js"></script>
        
    </head>
    <body>
        <a href="#" class="createmodal">Create Modal</a>
        
    </body>

JavaScript

$(document).ready(function() {
    $(".createmodal").click(function(){
        $('<div class="modal hide fade"><div class="modal-container step-1"><div class="modal-header icon"><button type="button"class="close"data-dismiss="modal"aria-hidden="true">&times;</button><h4></h4></div><div class="modal-body"><div id="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-title"><ul><li>Cro Magnon Man</li></ul></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></div></div></div>').modal();
    });

});