Audio Html5

MUAZHAN

4 min read

·

Jul 02, 2024

11

Share

Audio HTML5

HTML5 memperkenalkan elemen <audio> yang memungkinkan kita untuk menambahkan audio ke halaman web kita tanpa memerlukan plugin pihak ketiga. Elemen <audio> sangat fleksibel dan menawarkan banyak kontrol atas pemutaran audio. Berikut adalah panduan lengkap tentang cara menggunakan elemen <audio>:

Cara Menggunakan Elemen <audio>

Elemen <audio> digunakan dengan cara yang mirip dengan elemen <img>. Anda perlu menyediakan sumber audio melalui atribut src. Anda juga dapat menyediakan beberapa sumber audio untuk dukungan browser yang berbeda dengan menggunakan tag <source> di dalam elemen <audio>. Berikut adalah contoh dasar:

Kode ini akan menampilkan pemutar audio dengan kontrol default. Atribut controls menambahkan kontrol standar seperti tombol putar, jeda, dan volume. Jika browser tidak mendukung elemen <audio>, pesan "Your browser does not support the audio element." akan ditampilkan.

Atribut Elemen <audio>

Elemen <audio> mendukung beberapa atribut yang memungkinkan kita untuk mengontrol pemutaran audio:

• src: Atribut ini menentukan URL sumber audio.
• controls: Atribut ini menambahkan kontrol default ke pemutar audio.
• autoplay: Atribut ini secara otomatis memutar audio ketika halaman dimuat.
• loop: Atribut ini memutar ulang audio setelah selesai.
• muted: Atribut ini menonaktifkan suara audio.
• preload: Atribut ini menentukan apakah audio harus dimuat ketika halaman dimuat. Nilai yang valid adalah none, metadata, dan auto.

Mengatur Kontrol Audio

Anda dapat mengatur kontrol audio khusus dengan menggunakan JavaScript. Elemen <audio> memiliki banyak metode dan properti yang dapat digunakan untuk mengontrol pemutaran audio. Berikut adalah beberapa contoh:

• play(): Memulai pemutaran audio.
• pause(): Menjeda pemutaran audio.
• currentTime: Mengatur atau mengambil waktu saat ini dalam audio.
• volume: Mengatur atau mengambil volume audio.

Berikut adalah contoh bagaimana Anda dapat menggunakan JavaScript untuk mengontrol pemutaran audio:

Play
Pause

Kode ini menambahkan dua tombol "Play" dan "Pause" yang mengontrol pemutaran audio menggunakan fungsi JavaScript.

Format Audio yang Didukung

Elemen <audio> mendukung berbagai format audio. Format yang paling umum adalah:

• MP3 (.mp3)
• OGG (.ogg)
• WAV (.wav)
• AAC (.aac)

Pastikan untuk menyediakan sumber audio dalam format yang didukung oleh browser pengguna Anda.

Kesimpulan

Elemen <audio> di HTML5 adalah cara yang mudah dan efektif untuk menambahkan audio ke halaman web Anda. Dengan menggunakan atribut dan metode yang tersedia, Anda dapat sepenuhnya mengontrol pemutaran audio dan memberikan pengalaman yang lebih kaya kepada pengguna Anda.