Hallo semuanya selamat datang kembali di blog saya ini,pada artikel kali ini saya akan memberikan sebuah tutorial Cara Membuat Audio Auto Play Pada HTML
jika kita perhatikan website biasanya hanya menampilkan gambar dan teks, jarang menampilkan audio.
tanpa disadari html juga telah menyediakan tag khusus untuk menyematkan atau embed audio.
sebelum membuat autoplay kita harus tahu dulu apa itu audio pada html.
Deskripsi
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.
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.
Contoh Kode Audio
<!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="https://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>
Kalian 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 Auto play
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.
kasih <meta charset="utf-8"> <audio controls autoplay>
<source src="https://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>
Memutar Audio secara 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="https://thohirdev.com/upload/bird.mp3" type="audio/mpeg">
</audio>
Code language: HTML, XML (xml)
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="https://thohirdev.com/upload/bird.mp3" type="audio/mpeg">
</audio>
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.
cara membuat suara atau musik berjalan dibackground dengan menambahkan atribut autoplay dan hidden
<meta charset="utf-8"> <audio controls autoplay hidden>
<source src="https://thohirdev.com/upload/bird.mp3" type="audio/mpeg">
</audio>