#66 Cara membuat autoplay audio dan lainnya pada html

Pada tutorial ini kita akan belajar cara membuat autoplay audio dan lainnya 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.

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.

Browser	Mp3	Wav	Ogg
Chrome	YA	YA	YA
Safari	YA	YA	TIDAK
Edge/IE	YA	YA	YA
Firefox	YA	YA	YA
Opera	YA	YA	YA

Ya artinya di dukung oleh browser sedangkan tidak , tidak di dukung oleh browser

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>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="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>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="https://thohirdev.com/upload/bird.mp3" type="audio/mpeg">
    </audio>Code language: HTML, XML (xml)

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="https://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.

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>Code language: HTML, XML (xml)

Demikian tutorial cara membuat autoplay audio dan lainnya pada html, semoga bermanfaat bagi teman-teman dan sampai jumpa pada tutorial berikutnya 🙂

Pencarian di thohirdev:

tag audio html
embed audio html
hidden audio html
audio html 5
format audio html

byMuhammad Thohir S.Kom

Posted23 October 2021

Html