tRikSonic

HTML audio Tag

Terakhir diperbarui : 24 Mei 2018 - 07.59
HTML audio - Belajar html <audio>, <audio> mempunyai definisi tentang suara, seperti Musik, atau audio streaming lainnya, element <audio> dapat dimasukan pada format html sehingga dapat diputar dan didengarkan pada halaman blog / website.
background html
Browser yang support html <audio> mendukung beberapa format audio antara lain :
Browser MP3 Wav Ogg
Internet Explorer Ya Tidak support Tidak support
Chrome Ya Ya Ya
Firefox Ya Ya Ya
Safari Ya Ya Tidak support
Opera Ya Ya Ya
Tips :
Untuk pengunaan terbaik gunakan format file dengan format .mp3

Attribute:

Attribut HTML tags <audio>

autoplay

Penjelasan : audio akan diputar secara otomatis pada saat loading halaman.
Attribute ini bersifat boolean, yang berarti attribute ini bisa diberikan tanpa melampirkan value dari attribute itu sendiri, ataupun melampirkan value attribute tersebut.
Value : autoplay

Contoh :

<audio src="url-file.mp3" autoplay controls></audio>
Catatan :
Contoh diatas sama saja fungsinya dengan contoh penulisan seperti dibawah ini :
<audio src="url-file.mp3" autoplay="autoplay" controls="controls"></audio>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Triksonic.Blogspot.com</title>
<base href="https://sites.google.com/site/wp20zrt4/mp3/" target="_blank">  
</head>
<body>

<p><strong>Pastikan perangkat audio anda aktif</strong></p>
<audio src="guitar.mp3" autoplay="autoplay" controls="controls"></audio>
  
</body>
</html>

controls

Penjelasan : attribute ini digunakan untuk menampilkan control audio seperti, Tobol play, pause dll..
Catatan :
Jika attibute ini tidak disertakan, maka browser akan mengeksekusi tampilannya menjadi tidak terlihat (display :none;), dan beberapa fitur control audio menjadi tidak berfungsi, untuk mengaktifkan semua fitur control audio diperlukan javascript untuk melakukan DOM element html audio.
Attribute ini bersifat boolean, yang berarti attribute ini bisa diberikan tanpa melampirkan value dari attribute itu sendiri, ataupun melampirkan value attribute tersebut.
Value : controls

Contoh 1 :

<audio src="url-file.mp3" controls="controls"></audio>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Triksonic.Blogspot.com</title>
<base href="https://sites.google.com/site/wp20zrt4/mp3/" target="_blank">  
</head>
<body>

<p><strong>Pastikan perangkat audio anda aktif</strong></p>
<audio src="guitar.mp3" controls="controls"></audio>
  
</body>
</html>

Contoh 2 :

Contoh berikut dengan tidak menuliskan attribut controls
<audio src="url-file.mp3"></audio>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Triksonic.Blogspot.com</title>
<base href="https://sites.google.com/site/wp20zrt4/mp3/" target="_blank">  
</head>
<body>

<p>
  Contoh berikut attribut controls tidak ditulis,
  maka browser akan membacanya tidak terlihat.
</p>
<p>
  silahkan tambahkan attribute autoplay jika ingin audio
  otomatis diputar.
</p>

<audio src="guitar.mp3"></audio>
  
</body>
</html>

loop

Penjelasan : attribute ini digunakan untuk memutar ulang audio, jika audio telah selesai.

Attribute ini bersifat boolean, yang berarti attribute ini bisa diberikan tanpa melampirkan value dari attribute itu sendiri, ataupun melampirkan value attribute tersebut.
Value : loop

Contoh :

<audio src="url-file.mp3" loop="loop" controls="controls"></audio>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Triksonic.Blogspot.com</title>
<base href="https://sites.google.com/site/wp20zrt4/mp3/" target="_blank">  
</head>
<body>

<p><strong>Pastikan perangkat audio anda aktif</strong></p>
<audio src="guitar.mp3" loop="loop" controls="controls"></audio>
  
</body>
</html>

muted

Penjelasan : attribute ini digunakan untuk Menonaktifkan volume suara audio
Attribute ini bersifat boolean, yang berarti attribute ini bisa diberikan tanpa melampirkan value dari attribute itu sendiri, ataupun melampirkan value attribute tersebut.
Value : muted

Contoh :

<audio src="url-file.mp3" muted="muted" controls="controls"></audio>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Triksonic.Blogspot.com</title>
<base href="https://sites.google.com/site/wp20zrt4/mp3/" target="_blank">  
</head>
<body>

<p><strong>Pastikan perangkat audio anda aktif</strong></p>
<audio src="guitar.mp3" muted="muted" controls="controls"></audio>
  
</body>
</html>

preload

Penjelasan : attribut ini digunakan untuk menentukan bagaimana audio diload.
Value attribute ini adalah : auto, metadata, none

Contoh :

<audio src="url-file.mp3" preload="metadata" controls="controls"></audio>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Triksonic.Blogspot.com</title>
<base href="https://sites.google.com/site/wp20zrt4/mp3/" target="_blank">  
</head>
<body>

<p><strong>Pastikan perangkat audio anda aktif</strong></p>
<audio src="guitar.mp3" preload="metadata" controls="controls"></audio>
  
</body>
</html>

src

Penjelasan : attribut ini digunakan untuk menentukan lokasi link file audio.
Value : link_url
Info :
Untuk attribute ini demonya sudah tersedia pada attribute lainnya.

Global Attributes:

Element <audio> mencakup Global Attributes HTML.

Event Attributes:

Element <audio> mencakup Event Attributes HTML.

Browser Support :

Desktop

Chrome3
Safari3.1
Firefox3.5
Opera10.5
IE9
EdgeYa

Mobile

Android Webview3
Chrome Android3
Edge MobileYa
Firefox Android4
Opera AndroidYa
iOs SafariYa
Samsung InternetYa

Default CSS :

Browser yang support dengan element <audio>, biasanya mempunyai nilai default :
/* none */
Maksudnya adalah, tiap tiap browser memiliki bahasa tampilan yang berbeda untuk element ini
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.