Menambahkan Cover Background Gambar Audio Plyr

Artikel sebelumnya kita sempat membahas bagaimana cara membuat audio player browser menggunakan plugin Plyr.io di blogger dan juga wordpress.

Style audio player tersebut hanya akan menampilkan element audio berupa tombol play dan pause, control dan volume.

Untuk menambahkan cover background gambar audio plyr agar terlihat lebih menarik, kita bisa melakukan custom menggunakan beberapa trik berikut

Cara Membuat Pemutar Audio dan Video HTML5 dengan Plyr - InpuTekno

Jika kamu sedang mencari cara bagaimana membuat sebuah pemutaran audio ataupun video secara online, Plyr bisa sangat diandalkan untuk itu.

www.inputekno.com

Menambahkan Gambar di Element Audio Plyr

Langkah pertama salin dan pase kode CSS berikut DI ATAS TAG </style> atau ]]></b:skin>.

.playerC {
  position: relative;
  width: 400px;
  background: #f1f3f4;
  margin-left: auto;
  margin-right: auto
}

.playerC .imgCover {
  position: relative;
  width: 100%;
  height: 350px
}

.playerC .imgCover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px
}

Kemudian gunakan kode HTML berikut untuk menampilkan audio plyr dengan gambar cover.

<div class='playerC'>
  <div class='imgCover'>
    <img src='image_URL' alt='image_title'>
  </div>
  <audio class='js-player' controls>
    <source src="audio.mp3" type="audio/mp3">
  </audio>
</div>

[Alternatif] Menambahkan Gambar di Element Audio Plyr

Kita juga bisa menggunakan control plyr video untuk memutar file audio agar menampilkan gambar cover.

Berikut contohnya:

<video class='js-player' controls poster='image_URL'>
  <source src="audio.mp3" type="audio/mp3">
</video>

Penutup

Nah itu tadi cara menambahkan cover gambar audio Plyr. Jika artikel ini bermanfaat bisa kamu share dan rekomendasikan ke teman-teman yang membutuhkan.