Deskripsi
Penjelasan HTML audio

HTML audio element menunjukkan sebuah sound atau audio yang dapat disisipkan pada halaman web dan diputar untuk didengarkan.

Modern browser mendukung beberapa format file audio diantaranya: mp3, ogg dan wav.

Konten lain (seperti teks) dapat disisipkan untuk browser yang tidak mendukung HTML5 audio, dan apabila audio file tidak dapat diputar, maka konten ini akan muncul sebagai gantinya (fallback).


Media Formats
Tipe Media untuk HMTL audio element

Format Penjelasan Extensi File MIME Types
MP3 MP3 adalah MPEG-1 atau MPEG-2 Audio Layer III, merupakan format audio paling terkenal yang menggunakan format lossy data compression. .mp3 audio/mp3
Ogg Vorbis Format free, open standar yang menyuguhkan kualitas audio lebih baik dari MP3. .ogg audio/ogg
WAV Format original untuk raw digital audio. Format WAV tidak menggunakan metode kompresi file sehingga ukurannya lebih besar dari format lainnya. .wav audio/wav

Attributes
Atribut HTML Tag <audio>

autoplay

Menentukkan bahwa audio akan diputar secara otomatis (langsung ketika halaman telah dimuat).

Contoh:
<audio src="../../../media/audio/kucing.mp3" autoplay controls></audio>

Lihat hasilnya
controls

Menentukkan bahwa controls audio ditampilkan. Controls, dapat dilihat seperti player yang biasanya berisi perintah seperti tombol play/pause, slider, volume dan sebagainya. Setiap browser memiliki tampilan controls yang berbeda.

Contoh:
<audio src="../../../media/audio/kucing.mp3" controls></audio>

Lihat hasilnya
loop

Digunakan untuk memutar ulang audio ketika selesai.

Contoh:
<audio src="../../../media/audio/kucing.mp3" loop></audio>

Lihat hasilnya
muted

Digunakan untuk membisukkan suara, artinya audio akan diputar tanpa suara pada awal inisial.

Contoh:
<audio src="../../../media/audio/kucing.mp3" muted></audio>

Lihat hasilnya
preload

Menunjukkan seberapa penting audio harus diload ketika halaman web dimuat.

Contoh:
<audio src="../../../media/audio/kucing.mp3" preload="metadata"></audio>

Lihat hasilnya
src

src menunjukkan source yaitu sumber file audio ditempatkan atau URL yang menunjukkan keberadaan audio file tersebut. Dapat pula menggunakan element <source> (lihat Contoh 2 dibawah).

Contoh:
<audio src="../../../media/audio/kucing.mp3"></audio>

Lihat hasilnya

Global Attributes
Atribut Secara Global (Keseluruhan)

<audio> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Event Attributes
Atribut event (Peristiwa)

<audio> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Example
Contoh HTML <audio> element

Contoh 1:

HTML audio dengan satu sumber file audio (.mp3) dan konten paragraf (<p>) yang akan muncul apabila browser tidak mendukung html audio.

<audio src="../../../media/audio/kucing.mp3" controls>
  <p>
    <strong>Download File: </strong>
    <a href="../../../media/audio/kucing.mp3">"MP3"</a>
  </p>
</audio>
Contoh 2:

HTML audio element yang merujuk format audio lebih dari satu didalam element <source> untuk dukungan browser yang berbeda-beda.

<audio controls>
  <source src="../../../media/audio/kucing.mp3"  type="audio/mpeg" >
  <source src="../../../media/audio/kucing.ogg"  type="audio/ogg" >
  <source src="../../../media/audio/kucing.wav"  type="audio/wav" >
  <p> <strong>Download Audio:</strong>
  Format:  <a href="../../../media/audio/kucing.mp3">"MP3"</a>
  Format:  <a href="../../../media/audio/kucing.ogg">"Ogg"</a>
  </p>
</audio>

Contoh Lengkap
Demo dengan Source Code Editor

Demo Editor
Demo HTML <audio>
Code Editor