Cara Menambahkan Audio (Lagu) di HTML (untuk Pemula HTML)

Beberapa website seperti website musik, penyedia lagu-lagu online, kursus online ataupun yang lainnya, tentunya perlu memasukkan file – file audio sebagai konten dari website tersebut. Secara umum, ada tiga jenis file audio yang bisa dimainkan yaitu audio digital, file music dan text to speech. Selain itu, kita juga bisa menambahkan inline audio pada sebuah website.

Inline audio adalah suara yang disertakan dalam suatu halaman web atau sebagai bagian dari suatu halaman web dimana suara tersebut akan dimainkan saat browser diload. Tetapi sebelum Anda memasang inline audio pada website, terlebih dahulu perhatikan apakah penggunaan inline audio tersebut tidak mengganggu pengunjung untuk membaca konten website. Anda sebaiknya memasang inline audio pada halaman web yang diharapkan oleh pengunjung untuk mendengar suara.

Pada materi kali ini, saya akan membahas tentang bagaimana cara menambahkan lagu di dalam HTML dengan menggunaan elemen audio. Untuk lebih jelasnya mari simak penjelasan dibawah ini:

Elemen audio

Elemen audio merupakan elemen baru keluaran HTML5 yang digunakan untuk memasukkan audio seperti lagu ke dalam HTML yang dapat diputar. Penggunaan elemen audio ditandai dengan pasangan tag <audio> …. </audio>. Diantara pasangan tag <audio> terdapat elemen source dan dapat ditambahkan teks yang akan tampil jika browser tidak mendukung elemen audio.

Pada elemen audio juga terdapat beberapa atribut yaitu :

Atribut	Nilai	Fungsi
autoplay	–	Menentukan bahwa audio akan diputar langsung ketika halaman sudah diload secara otomatis.
controls	–	Menunjukkan bahwa controls audio (setiap browser memiliki tampilan controls audio yang berbeda – beda) ditampilkan seperti player yang biasanya berisi perintah seperti tombol play/pause, slider, volume dan lain sebagainya.
muted	–	Digunakan untuk mematikan atau membisukan suara yang berarti audio akan diputar tanpa suara pada awal inisial.
loop	–	Digunakan untuk memutar ulang audio yang sudah selesai diputar.
src	URL lokasi file audio	Menunjukkan lokasi penyimpanan file audio atau URL yang menunjukkan keberadaan audio file tersebut.
preload	auto, none, metada	Menunjukkan seberapa penting audio harus diload ketika halaman web dimuat.

Atribut src dan controls

Berikut contoh code penggunaan atribut scr dan controls di HTML :

<!DOCTYPE html>
<html>
 <head>
  <title>Atribut src di elemen audio</title>
 </head>
 <body>
  <audio src="honestly.mp3" controls></audio>
 </body>
</html>

Penggunaan atribut controls menghasilkan controls audio yang tampilannya berbeda – beda untuk setiap browser. Saya sangat menyarankan Anda menambahkan atribut ini. Lihat perbedaannya dibawah ini :

Chrome

Firefox

Pada atribut src, saya hanya menuliskan honestly.mp3 saja dikarenakan lokasi file audio tersebut satu folder dengan file HTMLnya. Saya sudah beberapa kali menjelaskan mengenai penulisan URL lokasi file pada atribut src ini, salah satunya bisa anda lihat pada materi cara menambahkan gambar di HTML.

Jika Anda hanya menggunakan atribut src langsung pada tag <audio> maka hanya akan ada satu format audio yang digunakan. Sedangkan, dari penjelasan sebelumnya, jelas bahwa tidak semua format didukung oleh semua browser.

Agar audio tersebut tetap dapat didukung oleh browser yang berbeda-beda maka digunakan format audio yang lebih dari satu dengan menggunakan elemen source yang ditandai dengan penggunaan tag <source>. Adapun atribut yang terdapat pada elemen source yang berhubungan dengan elemen audio yaitu:

Atribut	Nilai	Fungsi
src	URL lokasi file audio	Menunjukkan lokasi penyimpanan file audio atau URL yang menunjukkan keberadaan audio file tersebut.
type	MIME_type	Menentukan MIME type dari audio tersebut

Berikut tabel dari MIME type :

Format File	Tipe Media
Mp3	audio/mpeg
Wav	audio/wav
Ogg	audio/ogg

Berikut contoh penulisan dan penggunaanya di HTML :

<!DOCTYPE html>
<html>
 <head>
  <title>Elemen source di HTML</title>
 </head>
 <body>
  <audio controls>
   <source src="honestly.mp3" type="audio/mpeg">
   <source src="honestly.ogg" type="audio/ogg">
   <source src="honestly.wav" type="audio/wav">
   Gagal memutar lagu
   </audio>
 </body>
</html>

Ketika file HTML dijalankan, hasilnya akan seperti:

Jika kode HTML diatas diatas dijalankan, hanya satu audio saja yang dimuat, bukan ketiga-tiganya, dikarenakan atribut type ini hanya digunakan untuk menentukan tipe MIME suatu file, bisa gambar, audio, video dan lain sebagainya.

Sebelum tag penutup </audio>, saya menambahkan kalimat “Gagal memutar lagu” yang akan tampil ketika browser yang Anda gunakan tidak mendukung elemen audio. Tampilannya di browser seperti ini (sebagai contoh saya menggunakan browser Safari 5.7.1) :

Atribut autoplay

Seperti yang sudah dijelaskan sebelumnya, atribut autoplay digunakan agar audio langsung diputar saat halaman web selesai dimuat atau dapat disebut sebagai inline audio.

Bagi Anda yang mengelola website musik, fanpage atau yang lainnya, penggunaan atribut ini tentunya akan menghidupkan suasana. Berikut contoh kode penggunaannya di HTML :

<!DOCTYPE html>
<html>
 <head>
  <title>Atribut Autoplay di elemen audio</title>
 </head>
 <body>
  <audio src="honestly.mp3" autoplay controls></audio>
 </body>
</html>

Tampilan dari kode diatas setelah dijalankan di browser :

Jika kode HTML diatas dijalankan, audio langsung diputar secara otomatis sesaat setelah web page selesai dimuat.

Atribut loop

Fungsi atribut ini digunakan untuk memutar lagu secara berulang. Jadi selama pengunjung masih membuka halaman web tersebut maka lagunya akan selalu diputar berulang – ulang (tidak hanya sekali putar saja).

Berikut contoh kode penggunaannya di HTML :

<!DOCTYPE html>
<html>
 <head>
  <title>Atribut loop di elemen audio</title>
 </head>
 <body>
  <audio src="honestly.mp3" loop controls></audio>
 </body>
</html>

Tampilan dari kode diatas setelah dijalankan di browser :

Jika kode HTML diatas dijalankan, maka lagu akan terus diputar terus-menerus sampai pengunjung menutup halaman tersebut.

Baiklah, sekarang Anda sudah bisa menambahkan audio atau lagu di HTML. Materi selanjutnya yang perlu anda pelajari adalah cara membuat tulisan berjalan di HTML.