Sebelum HTML5, tidak ada standar untuk memainkan file audio di halaman web, sehingga file audio hanya bisa dimainkan dengan plug-in (seperti flash) saja. Namun kali ini, HTML5 telah menyediakan standar untuk memainkan file audio.
Elemen <audio> HTML5 menentukan cara standar untuk menyematkan file audio ke dalam halaman web.
1. Dukungan Browser
Berikut ini merupakan versi browser yang mendukung elemen <audio> HTML5.
2. Bagaimana Cara Kerjanya
Atribut control memungkinkan audio dapat dikendalikan, seperti play, pause, dan volume.
Teks yang ada di antara tag <audio> dan </audio> akan ditampilkan dalam browser berupa notifikasi "that do not support the <audio> element."
Beberapa elemen <source> dapat berupa link menuju ke file audio yang berbeda. Browser akan menggunakan inisialisasi format file yang pertama kali.
3. Format Audio HTML5
Saat ini, ada 3 format audio yang didukung oleh elemen <audio> seperti; MP3, Wav, dan Ogg.
| Browser | MP3 | Wav | Ogg |
|-------------------|-----|-----|-----|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
| Browser | MP3 | Wav | Ogg |
| Internet Explorer | YES | NO | NO |
4. HTML Audio -Tipe Media
| File Format | Media Type |
|-------------|------------|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
5. HTML Audio - Methods, Properties, dan Events
HTML5 mendefinisikan metode DOM, properti, dan even untuk elemen <audio> . Hal ini memungkinkan Anda untuk meload, play, dan pause audio, serta pengaturan durasi dan volume.
Ada juga DOM even yang dapat memberitahu Anda ketika audio mulai dijalankan, dijeda, dll.
Referensi DOM selengkapnya silakan berkunjung ke sini HTML5 Audio/Video DOM Reference.
6. HTML5 Audio - Tags
| Tag | Description |
|----------|--------------------------------------------------------------------------------------|
| <audio> | Defines sound content |
| <source> | Defines multiple media resources for media elements, such as <video> and <audio> |
Contoh Project
<!DOCTYPE HTML>
<html>
<!-- gatewan.com -->
<head>
<title> The audio element</title>
</head>
<body>
<h1>Memutar audio</h1>
<audio controls>
<source src="audio/WiroSableng.mp3" type="audio/mpeg">
<source src="audio/WiroSableng.wav" type="audio/wav">
<source src="audio/WiroSableng.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
</body>
</html>
Hasilnya:
https://youtu.be/CHFkseMQQvU
