Responsive HTML5 Audio Player

Cara Menginstall / Memasang Html5 Audio Player

Letakan plyr.css di bagian atas </head>, dengan Copy Paste Code Berikut :

CSS<link href='https://cdn.plyr.io/3.4.3/plyr.css' rel='stylesheet'/>

Letakan plyr.js di atas </body>, dan menginisialisasi Plyr (), dengan Copy Paste Code Berikut:

JS<script src="https://cdn.plyr.io/3.4.3/plyr.js"></script>

Letakan JQuery di atas </body>, dengan Copy Paste Code Berikut :

Jquery<script>/*<![CDATA[*/const players = Array.from(document.querySelectorAll('.js-player')).map(player => new Plyr(player));/*]]>*/</script>

---

Untuk Memasang Html Audio Seperti di Bawah ini :

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

Kalian juga dapat menentukan beberapa format; biasanya mp3 adalah yang paling didukung. Dalam hal kualitas dan berat saya merekomendasikan ogg, sehingga kami dapat menentukan keduanya agar browser dapat memilih yang terbaik:

HTML<audio class='js-player' controls>
  <source src="audio.mp3" type="audio/mp3">
  <source src="audio.ogg" type="audio/ogg">
</audio>