Style Plyr.js for Podcast Player
Tags: tutorial, programming, javascript, css
Published: 2021-10-05 03:54:44

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/igum44j5d2ndfo3rd90i.png)

### 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.
```js
    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.

```html
    <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.

```js
      // // 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.

```js
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.

```css
.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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4srssmgl9qy1sw9k5x4.png)

```css
@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***