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 :

Atribut	Nilai	Fungsi
src	URL lokasi file audio	Menunjukkan lokasi penyimpanan file audio atau URL yang menunjukkan keberadaan audio file tersebut.
type	MIME_type	Menentukan MIME type dari audio tersebut

DAFTAR ISI

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.

PCM	WAV	audio/wav
MP3	MP3	audio/mpeg
AAC	MP4	audio/mp4
AAC	AAC	audio/aac
AAC	AAC	audio/aacp
Vorbis	Ogg	audio/ogg
Vorbis	WebM	audio/webm
Opus	Ogg	audio/ogg
Opus	WebM	audio/webm
FLAC	FLAC	audio/flac
FLAC	Ogg	audio/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 :

Controls
Autoplay
Loop
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 :

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.

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

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 :