Belajar HTML#13 – Menambahkan Audio pada HTML

Pada HTML 5, anda dapat menambahkan audio pada halaman web menggunakan tag <audio>, Lalu kita bisa memberikan file audio yang akan diputar dengan tag <source>. Biasanya, audio yang sering ditambahkan pada HTML berbentuk music, podcast, ataupun audiobook.

Berikut ini atribut yang terdapat pada elemen source pada elemen audio :

AtributNilaiFungsi
srcURL lokasi file audioMenunjukkan lokasi penyimpanan file audio atau URL yang menunjukkan keberadaan audio file tersebut.
typeMIME_typeMenentukan MIME type dari audio tersebut

Format File Audio yang disupport pada HTML

Untuk menambahkan Audio pada HTML, Tidak semua jenis format file audio tersebut dapat disupport. Berikut ini daftar format file audio dan MIME type yang bisa diputar di HTML. 

PCMWAVaudio/wav
MP3MP3audio/mpeg
AACMP4audio/mp4
AACAACaudio/aac
AACAACaudio/aacp
VorbisOggaudio/ogg
VorbisWebMaudio/webm
OpusOggaudio/ogg
OpusWebMaudio/webm
FLACFLACaudio/flac
FLACOggaudio/ogg

Format file MP3, MP4 dan M4A adalah format yang sering digunakan untuk menambahkan Audio pada HTML. Hal ini karena ukuran dari format pada file tersebut lebih kecil. Sedangkan format FLAC adalah format yang ukuran filenya lebih besar, namun tentunya mempunyai kualitas yang lebih tinggi.

Macam-macam Atribut untuk Audio HTML

Untuk menambahkan Audio pada HTML, kita harus menambahkan beberapa atribut yang sering digunakan dalam Tag <audio> , diantaranya :

  1. Controls
  2. Autoplay
  3. Loop
  4. Muted

Mari kita bahas satu persatu ..

Menambahkan Audio HTML dengan Atribut Controls

Merupakan atribut yang berfungsi untuk mengaktifkan tombol kontrol seperti tombol play, pause, stop, scroll, dan volume.

  • Nilai true artinya, kita akan mengaktifkan tombol kontrol
  • Nilainya false maka artinya tombol kontrol tidak diaktifkan.
<audio controls="true">
  <source src="Nama-file.mp3" type="audio/mpeg">
</audio>

atau :

<audio controls>
  <source src="Nama-file.mp3" type="audio/mpeg">
</audio>

Jika bernilai true, maka nilainya boleh tidak diisi.

Contoh Penggunaan :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Menambahkan Audio di HTML</title>
</head>
<body>
  <h1>Audio di halaman Web</h1>
  <audio controls>
    <source src="dreams.mp3" type="audio/mpeg">
    Browsermu tidak mendukung tag audio, Silahkan upgrade terlebih dahulu !!!
  </audio>
</body>
</html>

Hasilnya :

Pada contoh di atas, kita menuliskan secara langsung nama file audio yang akan diputar tersebut. Ini karena kita menaruh file tersebut dalam satu folder yang sama dengan file HTML.

Apabila file audio tersebut tersimpan di folder yang berbeda, maka kita perlu menulis alamat folder atau path-nya. Misalkan, saya menaruh videonya di dalam path : E:\test

maka atribut src tersebut bisa diisi seperti ini:

  <audio controls>
    <source src="E:\test/dreams.mp3" type="audio/mpeg">
    Browsermu tidak mendukung tag audio, Silahkan upgrade terlebih dahulu !!!
  </audio>

Atribut Autoplay

Atribut yang berfungsi untuk memutar audio secara otomatis. Sama seperti atribut control, nilai yang diberikan pada atribut ini adalah true dan false.

  • Nilai true artinya kita akan memutar audio secara otomatis,
  • Nilai false artinya audio tidak akan diputar secara otomatis.
<audio autoplay="true">
  <source src=" Nama-file.mp3" type="audio/mpeg">
</audio>

Atau :

<audio autoplay>
  <source src=" Nama-file.mp3" type="audio/mpeg">
</audio>

Contoh Penggunaan :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Menambahkan Audio di HTML</title>
</head>
<body>
  <h1>Audio di halaman Web</h1>
  <audio autoplay>
    <source src=" dreams.mp3" type="audio/mpeg">
  </audio>
</body>
</html>

Hasilnya :

Menggunakan browser Google Chrome

Note : Jika file HTML dijalankankan dengan browser Chrome, maka file audio tersebut tidak akan bekerja. Hal ini dikarenakan kebijakan dari browser Chrome dalam memutar audio.

Adapun pada browser Mozilla Firefox juga akan terjadi hal yang sama karena autoplay diblokir otomatis. Untuk mengatasi agar file audio dapat diputar lewat browser, ikuti langkah-langkahnya berikut ini.

Sekarang coba buka file HTMLnya menggunakan dengan Mozilla Firefox, lalu ubah izin untuk memutar audio secara otomatis. Caranya yaitu :

  • Klik ikon autoplay pada address bar
  • Pada bagian Autoplay, ubah Block Audio menjadi Allow Audio and Video.
  • Setelah itu, coba refresh atau reload.
Menambahkan Audio pada HTML

Setelah melakukan langkah-langkah diatas, maka suaranya akan terdengar dengan indikasi simbol playing seperti gambar berikut :

Menambahkan Audio pada HTML

Atribut Loop

Atribut ini berfungsi untuk mengulang pemutaran audio.

Contoh:

<audio loop="true">
  <source src=" Nama-file.mp3" type="audio/mpeg">
</audio>

Atau :

<audio loop>
  <source src="Nama-file.mp3" type="audio/mpeg">
</audio>

Atribut Muted

Atribut ini berfungsi untuk mematikan audio. Nilai yang bisa diberikan adalah true dan false.

Contoh:

<audio muted="true">
  <source src="dreams.mp3" type="audio/mpeg">
</audio>
<!-- atau -->
<audio muted>
  <source src="dreams.mp3" type="audio/mpeg">
</audio>

Membuat Audio Sebagai Background

Kita dapat membuat audio sebagai background pada halaman web, hal ini dapat membuat web anda lebih berkesan. Audio yang digunakan sebagai background biasanya menggunakan musik. Adapun cara membuat audio sebagai background yaitu dengan menambahkan beberapa seperti autoplay, loop, lalu menghilangkan kontrol (hidden).

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> Membuat audio sebagai background</title>
</head>
<body>
  <h1>audio sebagai background</h1>
  <audio hidden autoplay loop>
    <source src="dreams.mp3" type="audio/mpeg">
    Browsermu tidak mendukung tag audio, Silahkan upgrade terlebih dahulu !!!  
  </audio>
</body>
</html>

Note :

Sama seperti contoh penggunaan pada pembahasan atribut Autoplay, file HTMLnya tidak akan bekerja pada browser Chrome. hal ini dikarenakan kebijakan dari browser tersebut dalam memutar audio sehingga autoplay diblokir otomatis. Untuk itu, kita akan mencoba menjalakan file HTMLnya menggunakan dengan Mozilla Firefox, lalu ubah izin untuk memutar audio secara otomatis dengan cara yang sudah diterangkan pada pembahasan atribut Autoplay.

Hasilnya :

Menambahkan Audio pada HTML

Penutup

Begitulah cara menambahkan audio pada HTML yang telah saya rangkum meliputi :

  • Format File Audio yang disupport pada HTML
  • Macam-macam Atribut untuk Audio HTML Serta contoh penggunaannya
  • Membuat Audio Sebagai Background

Sekian untuk pembahasan kali ini dan semoga mudah dipahami. Baca juga artikel selanjutnya yaitu : Cara Menambahkan Video Menggunakan HTML

Tinggalkan Balasan

Scroll to Top