Sebagian orang tentu sudah mengenal apa itu website, ada banyak sekali kategori, fungsi dan cara dalam pembuatan serta dengan framework framwork yang di gunakan ketika membuat sebuah website. Pada dasarnya semua website di bangun dengan bahasa dasar yaitu HTML.
Siiring perkembangan zaman, semua orang berlomba lomba untuk menjadikan websitenya sebagai website yang paling bagus dimata google atau di mata pengunjung websitenya.
Lalu ada banyak sekali hal yang ingin di terapkan pada website kalian supaya website kalian lebih menarik dan lebih seru untuk di kunjungi. Salah satunya yang akan saya bagikan adalah dengan menambahkan audio atau backsound pada website anda, yang nantinya audio ini akan otomatis berjalan ketika pengunjung pertama kali datang ke website kalian. Tentu ini akan memberikan suatu hal yang baik kepada pengunjung, tetapi perlu di ingat jangan menggunakan audio yang dapat mengganggu pengunjung ke website anda seperti memasang audio audio yang mengagetkan. Apabila ini yang anda lakukan kepada pengujung, maka sudah di pastikan ini adalah pengunjung pertama dan terakhir untuk website kamu, jadi bijak bijak lah dalam bertindak.
Berikut langkah langkah menambahkan audio pada website :
Hal yang perlu di ketahui tentang memasang audio pada web anda
Ada hal yang haru kalian pahami soal pemutaran audio secara otomatis
Pada website https://developer.chrome.com/blog/autoplay/ telah menjelaskan tentang kebijakannya tentang pemutaran audio/video secara otomatis.
Kebijakan putar otomatis Chrome berubah pada bulan April 2018 dan saya di sini untuk memberi tahu Anda mengapa dan bagaimana hal ini memengaruhi pemutaran video dengan suara.
Seperti yang mungkin telah Anda ketahui , browser web beralih ke kebijakan putar otomatis yang lebih ketat untuk meningkatkan pengalaman pengguna, meminimalkan insentif untuk memasang pemblokir iklan, dan mengurangi konsumsi data pada jaringan yang mahal dan/atau terbatas. Perubahan ini dimaksudkan untuk memberikan kontrol pemutaran yang lebih besar kepada pengguna dan untuk menguntungkan penayang dengan kasus penggunaan yang sah.
Inti dari penjelasannya
- Putar otomatis tanpa suara selalu diizinkan.
- Putar otomatis dengan suara diperbolehkan jika:
- Pengguna telah berinteraksi dengan domain (klik, ketuk, dll.)
- Di desktop, ambang Indeks Keterlibatan Media pengguna telah dilewati, artinya pengguna sebelumnya telah memutar video dengan suara.
- Pengguna telah menambahkan situs ke layar utama di ponsel atau menginstal PWA di desktop.
- Bingkai teratas dapat mendelegasikan izin putar otomatis ke iframe mereka untuk memungkinkan putar otomatis dengan suara.
Artinya tidak bisa memutar audio secara otomatis untuk pertama kalinya user mengunjungi website tersebut tanpa ada interaksi dari pengunjung.
Untuk melakukan atau menambahkan audio yang berjalan otomatis beberapa opsi yang bisa saya berikan ini :
Menambahkan Audio Dengan Iframe
Untuk menambahkan iframe pada website anda caranya dengan meletakkan kode ini di antara tag<head>
....
<head>
<iframe src="audio/source.mp3" allow="autoplay" style="display:none" id="iframeAudio">
</iframe>
</head>
....
Pada bagian src="audio/source.mp3" anda bisa menggantinya dengan lokasi file audio anda berada.
Perlu di ingat iframe ini akan berjalan ketika user sudah pernah mengunjungi halaman ini.
Menambahkan Tag Audio
Selain menggunakan iframe anda juga bisa menambahkan audio pada kode html anda.
Caranya dengan menambahkan kode beriikut di antara tag body
...
<body>
<audio autoplay loop id="playAudio">
<source src="audio/source.mp3">
</audio>
</body>
...
lalu ganti src="audio/source.mp3"> menjadi lokasi audio anda berada.
Cara ini pasti berhasil
Seperti yang sudah di jelaskan pada tulisan di atas, bahwa google melarang pemutaran audio secara otomatis untuk pertama kali pengunjung datang tanpa adanya interaksi users terhadap website.
Nah maksud interaksi ini apa ?. Mungkin ada yang masih bingung !.
Jadi maksud dari interaksi itu adalah tindakan dari users. Misalnya :
- Apabila user menekan suatu tombol maka mulai bunyikan suara.
- Apabila user melakukan scroll maka lakukan hal A
- Apabila user melakukan back terhadap halaman maka lakukan hal B.
- dan masih banyak lagi interaksi yang bisa di lakukan
Yang akan saya bahas adalah kita akan membuat sebuah tampilan selamat datang lalu ada tombol untuk di klik, Ketika user menekan tombol tersebut, website akan terbuka dan lagu akan di play di latar belakang.
Nah ini adalah contoh tampilan awal ketika user pertama kali mengunjungi website kalian. Ketika user menekan tombol lanjutkan maka tampilan card akan tertutup dan audio akan berjalan
Langkah langkah pemasangan script pada website
Buka file index.html kalian
lalu pastekan kode berikut di dalam tag html anda
<div class="tampil" id="tampil">
<div class="tampil-body">
<div>
<h1>SELAMAT DATANG DI WEBSITE SAYA</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus sunt impedit, illum? Porro sapiente voluptas maiores modi, fugit natus, hic, sunt, doloremque expedita eveniet alias amet. Hic provident placeat distinctio.</p>
<button onclick=" putarmusic()">LANJUTKAN</button>
</div>
</div>
</div>
Kemudian tambahkan css pada tag head atau di file css kalian
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
.tampil {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
}
.tampil-body {
display: flex;
height: 100vh;
width: 100%;
text-align: center;
justify-content: center;
}
.tampil-body div {
border-radius: 20px;
padding: 20px;
margin: auto;
width: 50%;
background-color: white;
}
.tampil-body button {
cursor: pointer;
font-size: 1.1em;
text-align: center;
border-radius: 20px;
background-color: #DC143C;
border: 0;
margin-top: 20px;
color: white;
padding: 10px;
}
Selanjutnya yang terpenting adalah menambahkan javascript, berikut kodenya
<script>
var a = document.getElementById('tampil');
function putarmusic(){
a.style.display = "none";
var audio = new Audio('audio.mp3');
audio.play();
}
</script>
Pastikan juga file audio kamu sudah tersedia di dalam folder.
Download Lengkap Kodenya
Jika kamu ingin mendapatkan assets lengkap dari website yang di atas, kamu bisa mendownloadnya melalui link berikut ini.
Download Full Source Audio Play Html
Mungkin sekian penjelasannya cara menambahkan audio pada website dan terima kasih