HTML - Audio Element

Halo, para pengembang web yang sedang belajar! Hari ini, kita akan masuk ke dunia menakjubkan dari elemen audio HTML. Sebagai seseorang yang telah mengajarkan ini selama tahun tahun, saya bisa memberitahu Anda bahwa menambahkan suara ke halaman web Anda benar-benar dapat membuatnya hidup. Jadi, mari kita mulai!

Sintaks

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

Berikut 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 play, pause, 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 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 memutar berkas MP3 terlebih dahulu. Jika tidak bisa, dia akan beralih ke berkas OGG. Jika tidak bisa memutar keduanya, dia akan menampilkan pesan teks.

Metode 3: Menggunakan JavaScript

Untuk kontrol yang lebih maju, 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 mengontrol kapan dan bagaimana audio diputar.

Contoh Elemen Audio HTML

Mari lihat beberapa contoh lain untuk memperkuat 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 memutar berkas OGG terlebih dahulu, kemudian 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 diputar secara otomatis saat halaman dimuat dan akan berulang secara kontinu. Namun, hati-hati dengan autoplay - itu bisa membuat pengguna merasa 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 berkas 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 banyak didukung. Itu adalah ide yang bagus untuk menyertakan versi MP3 dari audio Anda.

Tips pro dari tahun tahun pengajaran saya: selalu menyediakan setidaknya dua format berbeda dari berkas audio Anda. Dengan cara ini, Anda 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 coding lainnya) adalah latihan. Jadi, cobalah menyertakan beberapa audio ke dokumen HTML Anda. Mainkan dengan atribut dan metode yang kita diskusikan. Dan yang paling penting, bersenang-senang dengan itu! Siapa tahu, Anda mungkin menjadi orang berikutnya yang menciptakan situs web audio-based yang viral!

Credits: Image by storyset