Hello guys! Berjumpa dengan Miniblog dari Inzaghi's Blog! Dalam Pemrograman Web Dasar diperlukan yang namanya HTML agar membuat Halaman Web lebih terstruktur. Inilah Program HTML dengan menggunakan Audio Tag, untuk menampilkan Audio.
Sumber : Simplilearn.com dan Geeksforgeeks.org
Elemen HTML <audio> digunakan untuk menyisipkan konten audio ke dalam halaman web, sehingga pengguna dapat memutar musik, efek suara, atau berkas audio lainnya langsung melalui browser tanpa perlu aplikasi tambahan.
Sintaks :
<audio>
<source src="sample.mp3" type="audio/mpeg">
</audio>. <!DOCTYPE html><html lang="en"><body><audio><source src="https://media.geeksforgeeks.org/wp-content/uploads/20241009180552641558/sample-12s.mp3" type="audio/mp3"><source src="" type="audio/ogg"></audio></body></html>
Fungsionalitas Audio HTML:
- Atribut `controls` menambahkan kontrol putar, jeda, dan volume ke pemutar audio.
- Atribut `autoplay` membuat audio diputar secara otomatis saat halaman dimuat.
- Atribut `loop` membuat audio diputar terus menerus, mengulang file tersebut.
- Atribut `src` menentukan URL file audio.
- Atribut `muted` membisukan audio saat halaman dimuat.
Tipe Media Audio HTML:
- Format file `mp3` dengan tipe media `audio/mpeg`.
- Format file `ogg` dengan tipe media `audio/ogg`.
- Format file `wav` dengan tipe media `audio/wav`.
1. Audio Autoplay Dasar
<html lang="en"><body><audio autoplay><source src="https://media.geeksforgeeks.org/wp-content/uploads/20241009180552641558/sample-12s.mp3"type="audio/mpeg"></audio></body></html>
- Elemen <audio> menyertakan atribut autoplay, yang menyebabkan audio diputar secara otomatis saat halaman dimuat.
- Elemen <source> menentukan URL file audio dan tipe MIME-nya.
2. Autoplay Audio dengan Controls dan Styling
<!DOCTYPE html><html lang="en"><head><style>audio {display: block;margin: 20px auto;width: 80%;}</style></head><body><audio controls autoplay><source src="https://media.geeksforgeeks.org/wp-content/uploads/20241009180552641558/sample-12s.mp3" type="audio/mpeg"></audio></body></html>
Autoplay Audio dengan Kontrol dan Styling :
- Elemen <audio> dilengkapi dengan atribut controls dan autoplay, sehingga audio tetap diputar otomatis tetapi pengguna juga memiliki kontrol untuk memutar, menjeda, atau mengatur volume.
- Penggunaan CSS memungkinkan pemutar audio ditempatkan di tengah halaman serta diatur lebarnya hingga 80% dari kontainer, sehingga tampil lebih rapi dan menarik secara visual.
Mohon maaf apabila ada kesalahan sedikitpun pada Kode Program ini.
Terima Kasih 😀😊😘👌👍 :)
Tags
Kode Program