Membuat Audio Player dengan HTML 5

Membuat Audio Player dengan HTML 5

1229
12
SHARE

Iseng iseng tengah malam bikin audio player dengan HTML 5. hehe.. Dengan HTML 5 dimungkinkan bagi kita untuk memasukkan tag audio, dengan sedikit penambahan javascript, kita bisa membuat audio player sederhana.

Skenarionya yaitu kita membuat element audio dengan src lagu berformat mp3. Audio player kita dilengkapi dengan tombol play, pause dan stop. Selain itu juga dilengkapi dengan progress bar yang menunjukkan progress lagu yang sedang diputar.

Pada contoh ini saya memutar lagu cover bawalah cintaku by Zony Hartawan. Anda bisa melihat karya Zony Hartawan di sini. Berikut ini adalah demo dari audio player kita.

DEMO

Baiklah langsung saja kita mulai membuatnya. Yang perlu anda perhatikan yaitu anda harus menambahkan <!doctype html> di awal file html atau php anda.
Buatlah file index.php dan tambahkan kode berikut ini. Saya telah menambahkan komentar dalam kode agar anda lebih mudah memahami maksud dari kode tersebut.

Jalankan index.php menggunakan browser. dan hasilnya akan seperti link demo di atas. Sangat mudah bukan. Audio player di atas sangat sederhana, silahkan dikreasikan sendiri dengan CSS, gambar dan lain lain agar lebih menarik.

Terima kasih telah berkunjung ke harviacode.com. Jangan lupa di like dan di share ya. 🙂

UPDATE

anda bisa juga menggunakan element progress untuk mengatur progress barnya. di HTML5 juga disediakan element progress. Hanya saja untuk element kita perlu menuliskan css yang berbeda2 untuk masing2 mesin browser. Untuk mengatur besarnya progress anda bisa menggunakan addEventListener timeupdate. Berikut ini adalah kode anda bila menggunakan element progress dan addEventListener.

Masih kurang sederhana ?

Anda bisa menggunakan atribute controls. Dengan ini udah lengkap tombol, progress dan volume bar. hahaha

berikut ini adalah screen shot pada browser mozilla

audio html 5

Sangat mudah. Tetapi saya pribadi lebih menyukai cara yang manual karena kita bisa lebih bebas mengatur control dan progressnya. Bagi yang menyukai cara singkat silahkan gunakan cara diatas. Terima kasih. :).

Bagikan artikel ini ya.. terima kasih

12 COMMENTS

  1. oh ya mas ,, cara membuat background di pemutar mp3 gimana si mas ,, kalau cara diatas emag berhasil tak terapin ,, tapi saya pernah liat ada yang pasang ada backgroud gambarnya ,, heheh , maaf mas , newbie ,, jawab ya mas ,

LEAVE A REPLY