Membuat Music Player di Website

Membuat Music Player di Website

 


Halo rakyat internet
Perkenalkan saya Aam pemilik dari Angker Computer

Jadi pada kesempatan kali ini saya akan membagikan tutorial sederhana bagaimana cara membuat Music Player pada Website atau codingan HTML

ok sebelum ke pembahasaan, lihat hasilnya di bawah ini



Jadi caranya begini

<audio controls>

    <source src="lagu.mp3" type="audio/mpeg">

</audio> 

Copas code di atas

Tinggal kalian ubah lagu.mp3 di atas dengan direct link mp3 yg udah kalian siapkan

Jika audio yg digunakan tidak berformat mp3, maka type dari kode di atas harus diganti sebagai berikut 

mp3     = mpeg (audio/mpeg)

ogg      = ogg (audio/ogg)

wav     = wav (audio/wav)


TAMBAHAN

Kalian bisa mengupload file mp3 dan meng-copy direct link nya di website ini 

Langsung saja klik upload tanpa harus membuat akun, lalu ketika slesai akan jadi seperti gambar berikut ini 


tinggal klik kanan pada link tersebut dan pilih Copy Link Address lalu paste-kan ke lagu.mp3 tadi

atau bisa coba file contoh dari saya ini 

https://www.mboxdrive.com/Toommee%20Profitt%20-%20Only%20One%20King%20(feat.%20Jung%20Youth).mp3

maka hasilnya akan jadi seperti ini 

<audio controls>

    <source src="https://www.mboxdrive.com/Toommee%20Profitt%20-%20Only%20One%20King%20(feat.%20Jung%20Youth).mp3" type="audio/mpeg">

</audio> 


BONUS 

Agar audionya bisa langsung Auto Play tanpa perlu di klik tombol play pada web/blog dengan kode audio di atas, maka tambahkan kode sperti di bawah ini 

 <audio autoplay="1" controls>

    <source src="https://www.mboxdrive.com/Toommee%20Profitt%20-%20Only%20One%20King%20(feat.%20Jung%20Youth).mp3" type="audio/mpeg">

</audio> 

Ket :

Angka 1 untuk YES autoplay

Angka 0 untuk NO autoplay


Catatan :

  • Direkomendasikan memakai browser yang up-to-date 
  • Hanya mendukung 3 format yakni mp3, ogg, wav
  • Beberapa browser tidak mendukung (kode tidak bekerja)

Ok demikian tutorial dari saya

Lebih ataupun Kurang dipersilahkan berkomentar di bawah


Terimakasih dan Salam Ganteng, Aam

Previous Post
Next Post

Posted by

0 Comments: