Selamat malam pembaca setia haniif.com, pada tutorial HTML ini saya akan menjelaskan kepada Anda tentang cara menampilkan Audio menggunakan HTML5.

Sebelum hadirnya HTML5 jika ingin menampilkan audio di halaman website milik kita cukup merepotkan, karena kita harus menginstall plugin anu dan anu. 😀 . Namun setelah hadirnya HTML5 menampilkan audio sangatlah mudah kita cukup mendeklarasikan tag HTML5 Audio (<audio>) dan kita tidak membutuhkan plugin lagi.

Mengenal HTML5 Audio

HTML5 Audio adalah istilah yang digunakan untuk menampilkan audio dengan menggunakan tag <audio>, yang mana tag ini merupakan salah satu tag HTML5.

Jika Anda ingin menampilkan audio menggunakan HTML5, maka Anda harus mendeklarasikan HTML5 serta elemen-elemen HTML5 lainnya agar dokumen HTML yang Anda buat valid HTML5.

Contoh Tag HTML5 Audio

Di bawah ini adalah contoh dari tag HTML5 Audio:

<audio controls>
  <source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg">
  <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Keterangan:

  • Pada tag audio terdapat atribut controls. Atribut controls digunakan untuk menampilkan tombol kontrol seperti play/pause dan tombol lainnya.
  • Diantara tag pembuka audio (<audio>) dan tag penutup audio (</audio>), ada tag source. Dimana tag ini memiliki 2 atribut, yaitu src dan type. Atribut src digunakan untuk menentukan sumber audio yang akan ditampilkan. Sedangkan atribut type digunakan untuk menentukan jenis format audio.
  • Sebelum tag penutup audio (</audio>) terdapat teks ‘Your browser does not support the audio element’, teks ini akan ditampilkan jika browser yang digunakan untuk menampilkan audio tidak support dengan tag audio.

Apakah sekarang Anda ingin langsung praktek menampilkan audio menggunakan HTML5 di PC Anda? Jika ya, silahkan ikuti langkah-langkah di bawah ini:

  1. Buka editor (notepad, notepad++, sublime etc) di PC Anda.
  2. Ketikan tag HTML di bawah ini pada editor Anda.
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
    	<title>Cara Menampilkan Audio Menggunakan HTML5</title>
      </head>
      <body>
        <audio controls>
          <source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg">
          <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
          Your browser does not support the audio element.
        </audio> 
      </body>
    </html>
  3. Simpan file tersebut dengan nama ‘html5_audio.html’. Untuk lokasinya bebas mau Anda tempatkan dimana.
  4. Kemudian klik kanan pada file tersebut, pilih open with dan pilih browser yang akan Anda gunakan. Jika Anda benar dalam mengetikan tag HTML di atas, maka tampilan pada browser Anda akan seperti gambar di bawah ini.

Cara Menampilkan Audio Menggunakan HTML5

Jenis Format Audio yang Didukung Tag HTML5 Audio

Saat ini tag HTML5 Audio hanya mendukung 3 jenis format audio diantaranya, yaitu:

  1. MP3 (audio/mpeg)
  2. Wav (audio/wav)
  3. Ogg (audio/ogg)

Browser Support

Perlu diketahui tidak semua browser dan tidak semua versi browser support tag HTML5 Audio. Untuk lebih detailnya silahkan lihat tabel di bawah ini.

Element Chrome IE Firefox Safari Opera
<audio> 4.0 9.0 3.5 4.0 10.5

Simak juga: Cara Menampilkan Video Menggunakan HTML5

Saya rasa cukup tutorial HTML mengenai cara menampilkan Audio menggunakan HTML5 ini. Semoga bermanfaat. :)