Membuat Pemutar Musik dengan HTML5, CSS dan jQuery

Membuat Pemutar Musik Audio Sederhana dengan HTML5, CSS3 dan jQuery dengan tampilan Material Design.

Membuat CRUD dengan DataGrid jQuery EasyUI PHP dan MySQL

Membuat CRUD Menggunakan jQuery dan PHP (Part 1)

Tutorial Membuat QR Code dengan jQuery

Membuat Pemutar Musik dengan HTML5, CSS dan jQuery - Pada kesempatan kali ini, saya ingin berbagi tutorial cara membuat pemutar musik sederhana dengan menggunakan HTML5, CSS3 dan jQuery.

Saya memanfaatkan Audio dari HTML5 sebagai pemutar musik di sini dengan kustomisasi menggunakan CSS3 dan jQuery agar tampak lebih bagus dan menarik.

Demo

Berikut tampilan akhir pemutar musik:

Persiapan

Ada beberapa file yang saya gunakan secara direct atau dengan kata lain tidak dapat digunakan secara luring (offline). Berikut adalah alat tempur yang harus dipersiapkan:

1. Editor. Saya menggunakan Sublime 3. Alternatif lainnya seperti Notepad++, PHPStorm, dan lain-lain
2. Local server. Saya menggunakan Wampserver. Alternatif lainnya seperti Wamp, Xamp, Mamp, dan lain-lain
3. Library jQuery
4. Icon Material Design dari Zavoloklom
5. Font Roboto

Struktur Folder

Struktur folder tutorial
Membuat Pemutar Musik dengan HTML5,
CSS dan jQuery

Buat File Index

Jika alat tempur siap digunakan, langkah selanjutnya adalah membuat file index.html terlebih dahulu. Karena tutorial ini tidak berhubungan dengan back-end, maka tidak perlu menggunakan ekstensi php.

Berikut skripnya:

THIS CONTENT IS PREMIUM

Please share to unlock

Tweet

Berikut tampilan dari skrip-skrip di atas:

Tampilan pemutar musik yang berhasil dibuat

Sekarang coba klik tombol play tersebut untuk memutar musik! :)

Penutup

Pemutar musik sederhana ini sangat benar-benar sederhana. Fitur yang tersedia juga terbatas hanya play dan pause saja. Namun ditambah dengan animasi gambar sampul yang berputar yang menggunakan CSS3. Sementara pemutar musiknya sendiri menggunakan Audio HTML5.

Fitur yang belum tersedia yaitu playlist, menaikan dan menurunkan volume, berpindah progres posisi lagu dan lain-lain. Insya Allah, jika banyak permintaan akan dilanjutkan di kemudian hari. :)