Belajar HTML Lengkap Part 13 : Cara Menambahkan Audio (Lagu) di HTML
Cara Menambahkan Pemutar Audio (Lagu) di HTML
Setelah sebelumnya sudah sempat membahas cara menambahakan pemutar video pada halaman HTML, pada episode kali ini kita bakalan bahas bagaimana caranya menambahkan pemutar audio atau lagu pada halaman HTML. Audio merupakan sebuah multimedia yang dapat mengibur para pengunjung website teman-teman, dan biasanya diletakan pada sebuah website yang memiliki tema musik, radio online atau kursus online yang memang harus memiliki konten audio.
Audio dapat di tambahkan pada sebuah halaman website dan melakukan pemutaran secara langsung ketika pengunjung membuka sebuah halaman website cara ini disebut juga sebagai Inline audio. Cara seperti ini mungkin cocok pada sebagian website, namun untuk mengaplikasikan nya teman-teman harus memperhatikan kebutuhan pengunjung website apakah mereka membutuhkan audio untuk mereka dengarkan atau tidak. Sangat tidak di sarankan sekali jika memaksakaan suatu audio di pasangkan pada sebuah website namun hal tersebut di rasa tidak perlukan justru malah akan menjadikan para pengunjung malas untuk membuka website kalian. Berikut hal yang perlu di persiapkan untuk membuat pemutar audio pada website, silahkan di simak :
Elemen Audio Pada HTML
Untuk menambahkan audio pada halaman HTML tag yang di gunakan adalah tag <audio> sebagai tag pembuka atau pembungkus element serta atribut penyusun nya. Tag audio sendiri merupakan sebuah fitur baru yang di keluarkan di HTML versi 5 yang mendukung pemutaran audio pada halaman HTML secara langsung tanpa perlu aplikasi tambahan seperti Flash. Ada beberapa atribut dalam tag <audio> yang biasa di kombinasikan di antaranya :
Berikut akan saya tunjukan kode HTML untuk menampilkan Audio pada halaman HTML namun sebelum itu silahkan temen-teman persiapkan terlebih dahulu audio atau lagu yang ingin di tampilkan, kemudian buat sebuah folder dan letakan file audio serta kode HTML berikut pada satu folder yang sama :
| Atribut | Nilai | Fungsi |
|---|---|---|
| Controls | - | berfungsi untuk menampilkan pengaturan pada audio yang ditampilkan pada browser seperti play, pause serta volume audio. Penulisannya <audio controls> |
| Autoplay | - | berfungsi untuk memutar secara otomatis ketika halaman di buka tanpa harus di klik play audio akan langsung di mainkan. Penulisannya <audio autoplay controls> |
| Muted | - | berfungsi untuk mensenyapkan atau membisukan suara pada saat audio di mainkan. Penulisannya <audio muted controls> |
| Loop | - | berfungi untuk memutar kembali audio yang di mainkan pada saat sudah selesai. Penulisannya <audio loop controls> |
| preload | none, auto, metada | berfungsi untuk menunjukkan seberapa penting audio harus dimainkan ketika halaman web dimuat. Penulisannya <audio preload="none" controls> |
| Src | di tulis secara absolute atau relatif | berfungsi untuk menuliskan alamat dari file audio yang ingin di tampilkan. Penulisannya <audio src="file.mp3" controls> |
<!DOCTYPE html>
<html>
<head>
<title>Atribut src dalam Tag Audio</title>
</head>
<body>
<audio src="file.mp3" controls></audio>
Tidak dapat memutar audio
</body>
</html>
Dan buka file HTML nya dengan cara klik kanan lalu open with dan pilih browser yang ingin di gunakan, berikut hasil dari contoh di atas :
Penjelasaan dari contoh pertama kode HTML di atas :
Atribut controls wajib di berikan untuk memberikan pengaturan terhadap audio yang ingin di tampilkan seperti play, pause serta mengatur volume.
atribut src dalam tag audio berfungsi untuk memanggil dimana lokasi atau alamat dari audio yang ingin di tampilkan pada browser. Pada contoh di atas penulisaan alamat hanya di tuliskan nama filenya saja ini di karenakan letak antara kode HTML serta audio di letakan pada satu folder yang sama. Jika teman-teman meletakan file audio pada folder yang berbeda maka harus pula di panggil nama folder nya baru kemudian di ikuti dengan nama file serta formatnya. Atribut src di atas nilai yang di tuliskan adalah alamat secara relatif dan dapat pula sebenarnya dalam penulisaan alamat audio di tulis secara absolute, yang sudah di jelaskan mengenai penulisaan alamat pada episode sebelumnya.
Contoh yang di berikan di atas hanya dapat memutar satu format audio saja, pada beberapa browser ada yang tidak dapat memutar suatu format audio tertentu, sehingga teks bertuliskan Tidak dapat memutar audio akan di tampilkan pada browser. Untuk mensiasati hal tersebut kita perlu menambahakan alternatif format audio yang cocok pada browser sehingga meminimalisir gagalnya memutar audio pada browser tertentu, dengan cara menambahakan tag <source> pada elemen audio sehingga audio dapat di putar pada browser yang berbeda. Berikut atribut yang ada pada tag <source> perhatikan tabel di bawah ini :
Atribut controls wajib di berikan untuk memberikan pengaturan terhadap audio yang ingin di tampilkan seperti play, pause serta mengatur volume.
atribut src dalam tag audio berfungsi untuk memanggil dimana lokasi atau alamat dari audio yang ingin di tampilkan pada browser. Pada contoh di atas penulisaan alamat hanya di tuliskan nama filenya saja ini di karenakan letak antara kode HTML serta audio di letakan pada satu folder yang sama. Jika teman-teman meletakan file audio pada folder yang berbeda maka harus pula di panggil nama folder nya baru kemudian di ikuti dengan nama file serta formatnya. Atribut src di atas nilai yang di tuliskan adalah alamat secara relatif dan dapat pula sebenarnya dalam penulisaan alamat audio di tulis secara absolute, yang sudah di jelaskan mengenai penulisaan alamat pada episode sebelumnya.
Contoh yang di berikan di atas hanya dapat memutar satu format audio saja, pada beberapa browser ada yang tidak dapat memutar suatu format audio tertentu, sehingga teks bertuliskan Tidak dapat memutar audio akan di tampilkan pada browser. Untuk mensiasati hal tersebut kita perlu menambahakan alternatif format audio yang cocok pada browser sehingga meminimalisir gagalnya memutar audio pada browser tertentu, dengan cara menambahakan tag <source> pada elemen audio sehingga audio dapat di putar pada browser yang berbeda. Berikut atribut yang ada pada tag <source> perhatikan tabel di bawah ini :
| Atribut | Nilai | Fungsi |
|---|---|---|
| src | di tulis absolute atau relatif | berfungsi untuk menuliskan alamat atau lokasi dari audio yang ingin di tampilkan |
| type | MIME_Type | Berfungsi untuk menentukan apa MIME type dari format audio tersebut |
| Format File Audio | Tipe Media |
|---|---|
| Mp3 | audio/mpeg |
| Wav | audio/wav |
| Ogg | audio/ogg |
<!DOCTYPE html>
<html>
<head>
<title>Tag source dalam elemen Audio</title>
</head>
<body>
<audio controls>
<source src="file.mp3" type="audio/mpeg">
<source src="file.ogg" type="audio/ogg">
<source src="file.wav" type="audio/wav">
Tidak dapat memutar audio
</audio>
</body>
</html>
Dari penggunaan tag <source> di atas dapat meminimalisir gagal memutar audio karena browser dapat memilih mana MIME Type yang cocok untuk di terjemahkan. Pada contoh di atas bukan brarti akan menampilkan audio dengan tiga format yang berbeda melainkan hanya akan memutar satu format yang cocok pada browser.
Demikan materi kali ini yaitu cara menambahkan/membuat pemutar audio/lagu/musik pada HTML yang dapat di sampaikan pada episode kali ini, sampai jumpa di episode berikutnya dan terimakasih.
Demikan materi kali ini yaitu cara menambahkan/membuat pemutar audio/lagu/musik pada HTML yang dapat di sampaikan pada episode kali ini, sampai jumpa di episode berikutnya dan terimakasih.
Incoming search terms :
→ cara memasukkan audio dalam HTML
→ cara membuat lagu di html autoplay
→ cara membuat playlist lagu di html
→ cara membuat background musik di html
→ cara menambahkan lagu pada script html
→ kode html musik
→ autoplay music html code
→ cara menyisipkan media audio di HTML
→ memasukkan audio ke halaman website
→ Cara Menambah Audio pada HTML 5
→ Rio Ananda Putra
Bang cara bikin Safelink seperti blog bang gimana. Terimakasih
ReplyDeleteTemplate yang saya gunakan adalah VioSafelink, jika ingin mendownlod template VioSafelink atau template blog lainya bisa kunjingi : https://theme-pertamax.blogspot.com/ . Terimakasih atas kunjungannya.
DeleteTerima kasih Kak atas blog nya sangat membantu saya memahami cara coding untuk memasukan audio pakai html Dan memberi tambahan ilmu untuk saya dalam html multimedia. Dan terus berkarya kak.di tunggu karya" kak yang lain nya.
ReplyDeletePerkenalkan nama saya Andrian Antonius. Nim saya :1922500215 web kampus saya : https://www.atmaluhur.ac.id/