audio merupakan sebuah konten suara yang di tanamkan dalam halaman website. audio bisa berisi satu atau lebih audio.
file audio dimasukan ke dalam tag <source> yang dibungkus oleh tag <audio>.
atribut controls wajib di berikan ke dalam tag audio untuk menampilkan tombol kontrol audio seperti play, pause, volume, stop dan mengatur menit audio.
Baca juga : Cara memisahkan elemen konten pada html
browser secara default menampilkan file audio dengan format yang pertama atau audio yang terlebih dahulu dipanggil, jika file pertama tidak didukung otomatis akan memainkan file audio yang kedua dan seterusnya.
tambahkan tag <p> berisi pemberitahuan jika format audio tidak di dukung oleh browser.
apabila hanya memiliki satu file bisa menggunakan satu format saja, disarankan menggunakan format .mp3
hanya ada tiga format audio yang didukung, mp3, wav, dan ogg.
BrowserMp3WavOggChromeYAYAYASafariYAYATIDAKEdge/IEYAYAYAFirefoxYAYAYAOperaYAYAYAYa artinya di dukung oleh browser sedangkan tidak , tidak di dukung oleh browserContoh kode audio
Coba Script
<!DOCTYPE html> <html> <head> <title> audio pada html </title> </head> <body> <audio controls> <source src="/folder/audio.wav" type="audio/wav"> <source src="/folder/audio.ogg" type="audio/ogg"> <source src="//thohirdev.com/upload/bird.mp3" type="audio/mpeg"> <!--Tulisan akan muncul jika tak ada file yang didukung oleh browser --> <p> Audio tidak disupport browser </p> </audio> </body> </html>
Code language: HTML, XML (xml)klik tombol coba script untuk mencobanya nanti akan muncul tampilan seperti diatas
tag <source> merupakan sumber file audio yang akan dimuat, ditambah atribut src=”folder/audio.wav” , src untuk menentukan lokasi file audio.
atribut type untuk mendefinisikan kode format medianya.
Membuat html audio autoplay
script audio html untuk membuat file audio berputar secara otomatis bisa menggunakan atribut autoplay.
ketika menambahkan atribut autoplay maka atribut itu bernilai true atau autoplay=”true”
sedangkan jika tidak ditambahkan akan bernilai false alias tidak ada atributnya.
coba tambahkan didalam tag <audio autoplay> maka ketika membuka pertama kali atau jalankan scriptnya audio akan secara otomatis memutar audionya.
<meta charset="utf-8"> <audio controls autoplay> <source src="//thohirdev.com/upload/bird.mp3" type="audio/mpeg"> <!--Tulisan akan muncul jika tak ada file yang didukung oleh browser --> <p> Audio tidak disupport browser </p> </audio>
Code language: HTML, XML (xml)Memutar audio berulang-ulang
kadang kita pernah mendengarkan alarm yang terus berulang sampai kita terbangun dalam tidur.
Dengan menambahkan atribut loop maka audio akan terus memutar berulangkali tanpa berhenti.
<audio controls loop> <source src="//thohirdev.com/upload/bird.mp3" type="audio/mpeg"> </audio>
ketika audio telah sampai ke detik 11, maka akan kembali lagi dimulai dari nol.
Menghilangkan suara audio
apabila kita ingin sebuah audio pertama kali di tampilkan dalam keadaan tidak ada suara, cara insert audio tersebut dengan menggunakan atribut muted.
cukup tambahkan atribut muted di tag audio, seperti dibawah ini.
<audio controls autoplay muted> <source src="//thohirdev.com/upload/bird.mp3" type="audio/mpeg"> </audio>
Code language: HTML, XML (xml)audio akan senyap walaupun audio dijalankan. secara default volume suara akan terlihat ikon centang untuk menandakan sebuah suara tidak berbunyi.
Hidden audio html
kadang kita ingin menambahkan audio ketika pertama kali pengguna membuka website, tetapi tidak ada kontrol audio untuk menghentikannya.
jika kita pernah membuka sebuah website yang di deface biasanya akan disisipi suara yang bermaksud untuk menyampaikan informasi atau maksud anonymous tersebut.