Style Plyr.js for Podcast Player

When I create a website with audio player support inside, I want to make the audio player display as shown in the image below. It's just because I take advantage of the player ecosystem from the plyr.js plugin so I'm trying to modify the css with some effort, either directly css or through a js script.

Prerequire

• Plyr.js: install the plugin and set the button attribute
• Javascript function and Jquery selection
• Basic style with css script

Install Plyr

In installing the plugin there are several things that need to be considered, such as including the default css and js and then installing it with the Plyr script class, because here I include the button that will be used so I need to set the controller as well.

    const controls = [
        'play-large',
        //'restart',
        'rewind',
        'play',
        'fast-forward',
        'progress',
        'current-time',
        'duration',
        'mute',
        'volume',
       // 'captions',
        'settings',
         'download',
        'fullscreen',
    ];

    // Setup the player 
    const players = Plyr.setup('.js-player', {
      controls,
      seekTime: 15,
    });

Next, create a default html with the class intended in the js-player script which is in the div class sticky. Where will later maintain the position of the player at the bottom of the screen.

    <div id="audio-podcasts" class="sticky shadow d-none">
          <audio id="player" class="js-player" controls>
            <source src="{$res_data_cat.0.media_url}" type="audio/mp3" />
          </audio>
    </div>

Script JS

In the script I run a trigger with a click which will run the script adding various html and css components; this is one solution to change the html structure from the default plyr. And at the end of the script run the plyAudio() function.

      // // handel click audio program
      $(".play-mp3").click(function(){

        if($("#audio-podcasts").hasClass('d-none')){
            $("#audio-podcasts").removeClass('d-none');
            $(".gototop.js-top").css('bottom','90px');
            $(".corner-ribbon.bottom-left").css({'bottom':'100px', 'z-index': '887'});
            $('.plyr__controls').prepend('<div id="title-podcast" class="col-md-5 text-start d-none d-md-block"></div>');
            $('.plyr__controls').prepend(`
              <div id="modal-pod" class="mx-2 me-md-3 click" data-bs-toggle="modal" data-bs-target="">
              <i class="fas fa-chevron-up"></i>
              </div>
           `); 


            $("[data-plyr=fast-forward]").append(`<img src="img/fwd15scnd.svg" style="width: 18px" alt="">`);
            $("[data-plyr=fast-forward]").css({'padding': '0px 7px 5px', 'margin-right':'auto'});
            $("[data-plyr=fast-forward] svg").css('height', '0px');
            $("[data-plyr=fast-forward]").addClass('ff');


            $("[data-plyr=rewind]").append(`<img src="img/back15scnd.svg" style="width: 18px" alt="">`);
            $("[data-plyr=rewind]").css('padding', '0px 7px 5px');
            $("[data-plyr=rewind] svg").css('height', '0px');
        }

       let select = $(this);
       plyAudio(select);

      })

plyAudio() serves to retrieve all the necessary data, both title, description and audio url. Once fetched it will be sent to the previously created html container.

function plyAudio(selector, e=1){
        if (e == 1){
          // focus on this script only
          var src = selector.attr('src-mp3');
          var title = selector.attr('title-mp3');
          var cat = selector.attr('cat-mp3');
          var num = selector.attr('num');
        } else {
          //this part for handle next/prev plyer
          var src = selector.srcMp3;
          var title = selector.titleMp3;
          var cat = selector.catMp3;
          var num = selector.numMp3;
        }
        $("#audio-podcasts audio source").attr("src", src);
        $('#audio-podcasts a[data-plyr="download"]').attr("href", `dl.php?q=${src}`);

        $('.plyr__controls #title-podcast').html(`
          <p class="mb-0"style="font-size: 90%"><b>${title}</b><br>
          <small class="text-muted">${cat}</small></p>
          `);

        $('#modal-pod').attr('data-bs-target', `#portfolioModal${num}` );

        let audio =  $("#audio-podcasts audio");
         audio[0].load();
         audio[0].play();

      }

CSS

This css will modify the default Plyr.js style. which focuses on changing the layout of the player component.

.sticky {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
}

#audio-podcasts .plyr .plyr__controls__item.plyr__progress__container{
    position: absolute;
    bottom: 63px;
    width: 99.4%;
    left: 0;
}

#audio-podcasts .plyr__controls{
    height: 75px!important
}

.plyr--audio .plyr__progress__buffer {
    color: rgba(193,201,209,.66);
    background-color: #9e9e9e;
}

.plyr--full-ui .plyr__progress input[type=range]::-moz-range-thumb {
 height:20px;
 width:20px
}

#audio-podcasts.shadow {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.57) !important;
}

.plyr__controls .plyr__controls__item:first-child {
    margin-right: unset;
}
a {
    text-decoration: unset;
}
small,
small svg{
  font-size: 80%!important;
}

.plyr__controls__item.plyr__control.ff{
  margin-left: 10px;
}


[data-plyr=rewind]{
  margin-right: 10px;
}


.click {
  cursor: pointer;
}

.page-section1 {
    padding: 1rem 0;
}

Mobile friendly

In order for the player to be mobile friendly, add css with the following root tampis, where the title and description will be hidden.

@media (max-width: 350px) {
    .plyr__volume input[type="range"]{
      width: 60px;
      position: absolute;
      top: -10px;
    } 
}

@media (max-width: 992px) {
    #audio-podcasts .plyr .plyr__controls__item.plyr__progress__container{
        width: 97.6%;
    }

    .plyr__controls__item.plyr__control.ff{
      margin-left: unset;
    }


    [data-plyr=rewind]{
      margin-right: inherit;
    }

}

Done

Comments

[andysaktia]

Thanks for some advice, so excited to improve code more efficient.

Cheers!