HTML - Audio Element

Hai, para pemaju web yang sedang mempelajari! Hari ini, kita akan melihat dunia yang menakjubkan dari elemen audio HTML. Sebagai seseorang yang telah mengajar ini selama bertahun-tahun, saya dapat katakan bahwa menambahkan suara ke halaman web Anda dapat benar-benar membuatnya hidup. Jadi, mari kita mulai!

Sintaks

Elemen HTML <audio> digunakan untuk menyertakan konten suara dalam dokumen. Ini adalah penambahan yang cukup baru ke HTML, diperkenalkan dalam HTML5, dan telah mengubah permainan untuk bagaimana kita menyertakan audio di situs web.

Ini adalah sintaks dasar:

<audio src="audio_file.mp3" controls>
Browser Anda tidak mendukung elemen audio.
</audio>

mari kitauraikan ini:

• <audio>: Ini adalah tag pembuka untuk elemen audio.
• src="audio_file.mp3": Atribut ini menentukan sumber berkas audio.
• controls: Atribut ini menambahkan kontrol audio, seperti main, jeda, dan volume.
• Teks antara tag pembuka dan penutup ditampilkan jika browser tidak mendukung elemen audio.

Bagaimana menyertakan audio di HTML?

Sekarang kita tahu sintaks dasar, mari kita lihat bagaimana benar-benar menyertakan audio di dokumen HTML Anda. Ada beberapa cara yang berbeda untuk melakukan ini, dan saya akan menunjukkan setiap satu.

Metode 1: Menggunakan atribut src

Ini adalah metode yang paling sederhana:

<audio src="path/to/audio.mp3" controls></audio>

Metode 2: Menggunakan elemen <source>

Metode ini memungkinkan Anda menentukan beberapa sumber audio:

<audio controls>
<source src="path/to/audio.mp3" type="audio/mpeg">
<source src="path/to/audio.ogg" type="audio/ogg">
Browser Anda tidak mendukung elemen audio.
</audio>

Dalam contoh ini, browser akan mencoba memainkan file MP3 terlebih dahulu. Jika tidak bisa, dia akan pindah ke file OGG. Jika tidak bisa memainkan keduanya, dia akan menampilkan pesan teks.

Metode 3: Menggunakan JavaScript

Untuk kontrol yang lebih canggih, Anda dapat menggunakan JavaScript:

<audio id="myAudio">
<source src="path/to/audio.mp3" type="audio/mpeg">
Browser Anda tidak mendukung elemen audio.
</audio>

<button onclick="playAudio()">Mainkan</button>

<script>
function playAudio() {
var audio = document.getElementById("myAudio");
audio.play();
}
</script>

Metode ini memberikan Anda fleksibilitas lebih besar dalam mengendalikan kapan dan bagaimana audio dimainkan.

Contoh Elemen Audio HTML

Mari kita lihat beberapa contoh lain untuk mengukuhkan pemahaman kita.

Contoh 1: Pemutar audio dasar

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Browser Anda tidak mendukung elemen audio.
</audio>

Ini membuat pemutar audio dasar dengan kontrol. Itu mencoba memainkan file OGG terlebih dahulu, kemudian file MP3 jika OGG tidak didukung.

Contoh 2: Autoplay dan loop

<audio controls autoplay loop>
<source src="background_music.mp3" type="audio/mpeg">
Browser Anda tidak mendukung elemen audio.
</audio>

Audio ini akan mulai dimainkan secara otomatis saat halaman dimuat dan akan berulang secara kontinu. Namun, hati-hati dengan autoplay - itu bisa membuat pengguna kesal!

Contoh 3: Atribut preload

<audio controls preload="auto">
<source src="interview.mp3" type="audio/mpeg">
Browser Anda tidak mendukung elemen audio.
</audio>

Atribut preload memberitahu browser apa yang harus dilakukan saat halaman dimuat. "auto" berarti browser harus memuat seluruh file audio.

Dukungan Browser untuk Format Audio Berbeda

Sekarang, ini adalah sesuatu yang penting untuk dipahami: tidak semua browser mendukung semua format audio. Mari kitauraikan ini dalam tabel:

Format	Chrome	Firefox	Safari	Opera	Internet Explorer
MP3	Ya	Ya	Ya	Ya	Ya (9+)
WAV	Ya	Ya	Ya	Ya	Tidak
OGG	Ya	Ya	Tidak	Ya	Tidak

Seperti yang Anda lihat, MP3 adalah format yang paling luas didukung. Itu adalah mengapa seringkali baik untuk menyertakan versi MP3 dari audio Anda.

Ini adalah tips pro dari tahun-tahun pengajaran saya: selalu menyediakan sedikitnya dua format berbeda dari file audio Anda. Dengan cara ini, Anda telah menutupi sebagian besar dasar dukungan browser.

Dalam kesimpulan, elemen audio HTML adalah alat yang kuat untuk menambahkan suara ke halaman web Anda. Apakah Anda membuat pemutar musik, menambahkan musik latar belakang, atau menyertakan klip audio ke konten Anda, memahami bagaimana menggunakan elemen <audio> adalah penting.

Ingat, kunci untuk menguasai ini (dan konsep pemrograman lainnya) adalah latihan. Jadi, cobalah menyertakan beberapa audio ke dokumen HTML Anda. Mainkan dengan atribut dan metode yang telah kita diskusikan. Dan yang paling penting, bersenang-senang! Siapa tahu, Anda mungkin adalah orang berikutnya yang menciptakan situs web audio-based yang viral!

Credits: Image by storyset