Element audio merupakan elemen baru keluaran HTML5 yang digunakan untuk memasukkan audio seperti lagu ke dalam HTML yang dapat diputar. Penggunaan element 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.
Yah,bila kalian sudah paham dengan element audio, mari langsung saja terjun ke langkah - langkahnya
1. pertama, dengan cara memasang judul
Cara ini sangatlah mudah karena hanya memasang sedikit script saja, namun file html dan audio (lagu yang ingin kalian tambahkan) harus satu folder.
Bahan yang saya gunakan:
- Text editor (bisa notepad biasa maupun notepad ++, atau bisa yang lainnya)
- Audio atau lagu yang ingin kalian pasang (masukan)
Setelah bahan - bahan di atas sudah siap, mari kita langsung menuju langkah - langkahnya.
- Buka file html kalian dengan text editor (yang ingin kalian tambahkan audio)
- Kemudian di bawah tag <body> di beri script di bawah
<audio src="judul lagu kalian.mp3" controls></audio>Seperti yang saya tuliskan di atas, yaitu file html dan lagu (audio) harus satu folder,untuk lebih jelasnya lihat gambar di bawah.
2. kedua, dengan memasang link audio
Cara yang kedua sangatlah mudah serta tanpa mendownload dulu audionya, karena cara ini hanya membutuhkan link nya saja.
Cara yang ke dua ini juga sama dengan cara pertama tetapi hanya mengganti judul audio menjadi link audio.
Ok,tanpa banyak basa - basi kita langsung saja menuju ke langkah pembuatannya.
- Buka file Html yang ingin kalian tambahkan audio
- Dan copy script di bawah dan pastekan di bawah tag <body>
<audio src="link audio.mp3" controls></audio>
Cara ke dua hampir sama cara pertama, cuma cara pertama harus satu folder file html dan audinya, namun untuk cara yang ke dua link yang di pasang harus aktiv (masih ada).
Nah itulah cara menambahkan audio di html yang inti, di bawah adalah tambahan, seperti autoplay, mute, putar ulang dan lain - lain:
- Audio akan diputar secara otomatis (langsung mulai ketika halaman telah dimuat).
<audio src="judul.mp3/link" autoplay controls></audio>
- Controls audio ditampilkan. Controls, dapat dilihat seperti player yang biasanya berisi perintah seperti tombol play/pause, slider, volume dan sebagainya. Setiap browser memiliki tampilan controls yang berbeda.
<audio src="judul audio.mp3/link" controls></audio>
- Untuk memutar ulang audio ketika selesai.
<audio src="judul audio.mp3/link" loop></audio>
- Untuk membisukkan suara, audio akan diputar tanpa suara pada awal inisial.
<audio src="judul audio.mp3/link" muted></audio>
- Seberapa penting audio harus diload ketika halaman web dimuat.
<audio src="judul audio.mp3/link" preload="metadata"></audio>Nah itulah tambahan dari tag audio, bagaimana? mudah bukan, ya pastinya sangat mudah.
Cukup segini untuk tutorial kali ini, dan nantikan tutorial selanjutnya, jangan sampi lupa juga untuk menikmati tutorial di postingan yang lainnya.
Baca juga Cara membuat tulisan seperti 4hmad-tutorial dengan HTML