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 
                      id="audio-{{$actor['demos']['commercial']}}"
                      preload="auto"
                      controls 
                      class="audio-component">
                      <!-- <source src="horse.ogg" type="audio/ogg"> -->
                      <source class="audio-demo" src="http://localhost:4000/app/uploads/file_example_MP3_700KB.mp3" type="audio/mpeg">
                      <source class="audio-demo" src="{!! $demo_urls['commercial'] !!}" type="audio/mpeg">
                    </audio>

CSS

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

JavaScript

function getTypes(ext) {

      if ((ext == 'mp3') || (ext == 'ogg') || (ext == 'm4a')) {
        return 'mp3,oga,m4a';
      } else {
        return 'mp4,mpeg,m4v';
      }
    }

    function getExt(ext) {

      if (ext == 'mp4') ext = 'm4v';
      if (ext == 'ogg') ext = 'oga';

      return ext;
    }


    $('#setAudio').click(function () {

      var jsonadd = {};
      jsonadd.mp3 = 'http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3';
      jsonadd.title = 'My new title';

      //var put = JSON.stringify(jsonadd)

      console.log(JSON.stringify(jsonadd));

      $('#jquery_jplayer_0').jPlayer('setMedia', jsonadd);

      $('#jp_container_0 .jp-title ul').html('<li>Bubble - MP3</li>');
      return false;
    });



    var this_poster = '';

    $('.audio-component').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-video-play"><button class="jp-video-play-icon" role="button" tabindex="0">play</button></div><div class="jp-interface"><div class="jp-progress"><div class="jp-seek-bar"><div class="jp-play-bar"></div></div></div><div class="jp-controls-holder"><div class="jp-controls"><button class="jp-play" role="button"tabindex="0">play</button><button class="jp-stop" role="button" tabindex="0">stop</button></div></div></div></div></div></div>');

      let this_src;
      let filename;
      if (jpthis.is('a[href$="mp3"]') || jpthis.is('a[href$="m4v"]')) {
        this_src = jpthis.attr('href');
        filename = jpthis.text();
      } else {
        this_src = jpthis.find('source').attr('src');

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