jPlayer Dynamic multi player

jPlayer Dynamic multi player

by Seetpal Singh

HTML

<link rel="stylesheet" href="https://rawgit.com/happyworm/jPlayer/master/dist/skin/blue.monday/css/jplayer.blue.monday.css">
<script src="https://rawgit.com/happyworm/jPlayer/master/dist/jplayer/jquery.jplayer.min.js"></script>
    <audio controls class='jplayer'>
        <source src="http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3" type="audio/mp3">
    </audio>
    <audio controls class='jplayer'>
        <source src="http://live96.917xfm.de/;stream" type="audio/mp3">
    </audio>

CSS

code {
    border:solid 1px blue;
    width:100%;
    display:inline-block;
}

JavaScript

$(document).ready(function () {

     var this_poster = '';

     $('audio.jplayer').each(function (i) {

         var jpthis = $(this);

         jpthis.replaceWith('<div id="jp_container_' + i + '" class="jp-video jp-video-270p" role="application" aria-label="media player"><div class="jp-type-playlist"><div id="jquery_jplayer_' + i + '" class="jp-jplayer"></div><div class="jp-gui"><div class="jp-interface"><div class="jp-progress"><div class="jp-seek-bar"><div class="jp-play-bar"></div></div></div><div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div><div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div><div class="jp-controls-holder"><div class="jp-controls"><button class="jp-previous" role="button" tabindex="0">previous</button><button class="jp-play" role="button" tabindex="0">play</button><button class="jp-next" role="button" tabindex="0">next</button><button class="jp-stop" role="button" tabindex="0">stop</button></div><div class="jp-volume-controls"><button class="jp-mute" role="button" tabindex="0">mute</button><button class="jp-volume-max" role="button" tabindex="0">max volume</button><div class="jp-volume-bar"><div class="jp-volume-bar-value"></div></div></div><div class="jp-toggles"><button class="jp-repeat" role="button" tabindex="0">repeat</button><button class="jp-shuffle" role="button" tabindex="0">shuffle</button><button class="jp-full-screen" role="button" tabindex="0">full screen</button></div></div><div class="jp-details"><div class="jp-title" aria-label="title">&nbsp;</div></div></div></div>');

 
             var this_src = jpthis.find('source').attr('src');

             var filename = this_src.substring(location.href.lastIndexOf('/')+1);
             //var filename = this_src.match(/([^\/]+)(?=\.\w+$)/)[0];
             //var filename = 'test';
             filename = filename.replace(/-/g, ' ');
             filename = filename.replace(/_/g, ' ');

             this_poster = jpthis.attr('poster');
 

  ...