Cara memasang audio di HTML

Cara memasang audio di HTML

Tag audio di HTML

Tag audio berfungsi untuk mendefinisikan sebuah audio. Berikut cara penulisan tag audio di HTML

Atribut tag audio

Berikut adalah atribut opsional yang ada di tag video.

Atribut Value Keterangan
autoplay autoplay  audio akan di putar automatis ketika halaman dimuat  atau di refresh
controls controls  digunakan untuk menampilkan tombol control seperti tombol pause dan volume
loop loop  digunakan untuk memutar kembali secara automatis ketika audio selesai
muted muted  digunakan untuk membisukan suara dari audio
preload auto
metadata
none
 menentukan metode audio ketika halaman dimuat
src URL  digunakan untuk URL letak file audio di simpan

Value atribut preload

Value Keterangan
auto audio akan di buka automatis ketika halaman di muat/ refresh
metadata audio akan di buka secara meta data
none audio tidak akan di putar secara auto maupun secara metadata

Contoh penggunaan tag audio

Dari contoh di atas file html dan file audio disimpan dalam satu folder.

Format audio yang didukung browser

Browser MP3 Wav Ogg
Internet Explorer
Chrome
Firefox
Safari
Opera

Elemen source

Elemen source berfungsi untuk mendefinisikan lebih dari satu sumber media (audio). Berikut penulisan elemen source di HTML

Atribut tag source

Atribut Value Keterangan
src  URL digunakan untuk URL letak file audio di simpan
type audio/mpeg

audio/ogg

audio/wav

berfungsi untuk mendefinisikan format ekstensi file audio

Value atribut type

Type Format
audio/mpeg mp3
audio/ogg ogg
audio/wav wav

Contoh penggunaan elemen source di HTML

Dukungaan browser

Elemen / Tag

Elemen / Tag Chrome Safari Firefox Opera IE (Internet Explorer)
<audio> 4.0 4.0 3.5 10.5 9.0
<source> 4.0 4.0 3.5 10.5 9.0

Atribut

Atribut Chrome Internet Explorer Firefox Safari Opera
audio
autoplay 4.0 9.0 3.5 4.0 10.5
controls 4.0 9.0 3.5 4.0 10.5
loop 4.0 9.0 3.5 4.0 10.5
muted 4.0 10.0 11.0 7.1 10.5
preload 4.0 9.0 4.0 4.0 10.5
src 4.0 9.0 3.5 4.0 10.5
source
src 4.0 9.0 3.5 4.0 10.5
type 4.0 9.0 3.5 4.0 10.5

Referensi

LEAVE A REPLY

Please enter your comment!
Please enter your name here