HTML audio Tag

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.

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`

Chrome	`3`
Safari	`3.1`
Firefox	`3.5`
Opera	`10.5`
IE	`9`
Edge	Ya

`Mobile`

Android Webview	`3`
Chrome Android	`3`
Edge Mobile	Ya
Firefox Android	`4`
Opera Android	Ya
iOs Safari	Ya
Samsung Internet	Ya

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

Judul	`HTML audio Tag`
Label	`HTML`
Diposting pada	`3 November 2016 - 03:35`
Diperbaharui pada	`24 Mei 2018 - 07:59`

Attribute:

autoplay

Contoh :

controls

Contoh 1 :

Contoh 2 :

loop

Contoh :

muted

Contoh :

preload

Contoh :

src

Global Attributes:

Event Attributes:

Browser Support :

`Desktop`

`Mobile`

Default CSS :

Post Info

HTML ELEMENT

Populer Post

Arsip Blog

Label