Membuat tombol Preloader Audio di Blog

Preloader audio ini berfungsi buat memuat file adio baik mp3,acc,wav,ogg dan sebagainya dilatar belakang. Sehingga ketika pengguna menekan tombol play, maka secara otomatis akan langsung diputar tanpa harus menunggu pemuatan file. Biasanya kebanyakan digunakan pada wehesite podcast.

Siapa yang nggak kenal dengan podcast? Hampir semua orang pernah mendengarkan podcast. Yaps podcast adalah konten berbasis audio yang bisa didengarkan kapanpun (onDemand). Kemarin saya sempat mencoba membuat podcast cerita, dan ternyata lumayan mudah dibandingkan memproduksi video Youtube.

Hanya dengan bermodalkan Microphone, Aplikasi recorder dan editor audio sudah bisa membuat podcast. Dalam artikel kali ini aku mau sharing sebuah kode tombol button yang bisa melakukan preloader terhadap file audio ke browser dari latar belakang, sehingga ketika kita mengklik tombol play maka secara otomatis audio akan diputar pada latar belakang.

Catatan: Kamu harus menyimpan file audio kamu pada hosting yang bisa mengakses sumber file secara langsung. Jadi nggak bisa disimpan pada Google drive, Sfile.mobi, File Upload, ataupun Mediafire. Sediakan hosting khusus buat menyimpan file audio kamu, gunakan cache CDN khusus untuk menyimpan file pada berbagai server guna mempercepat pendistribusian (lebih cepat dimuat). Saya merekomendasikan CloudFlare.

Sebelum mulai aku mau kasih Demo nya dulu nih, Coba kamu klik salah satu tombol yang ada dibawah ini. Tombol dibawah ini hanya demo, sementara untuk audio mp3 nya saya belum menemukan hosting yang tepat.

Penasaran kan Gimana cara bikin nya? Gampang banget, pertama kamu harus menyimpan file audio pada hosting dulu. Misal contoh nih, dan kamu wajib buat akses ke link file. Contoh nih:
https://domain-kamu.com/uploads/berkarya.mp3

Langkah selanjutnya, salin dan tempel kode javascript dibawah. Letakan di atas tag <body>

<script>

var sound = new Audio();

function playSound(audioUrl) {

  sound.src = audioUrl.getAttribute('data-url'); //mengambil URL Musik

  sound.play();

}

function preloadAudio()

{

  var audioButtons = document.querySelectorAll("button[data-type='audio']") //menandai semua tombol dengan data atribut audio

  for (var i = 0; i < audioButtons.length; i++)

  {

    //loop all audio elements

    audioButtons[i].setAttribute("disabled", true); //mematikan tombol agar tidak bisa di klik

    var preloader = new Audio();

    preloader.addEventListener("loadeddata", enableAudioButton.bind(audioButtons[i]), true); // gunakan fungsi bind untuk mengsmbil url pada tombol

    preloader.src = audioButtons[i].getAttribute("data-url"); //memulai pengunduhan dilatar belakang

  }

}

function enableAudioButton()

{

  this.removeAttribute("disabled");  //mengaktifkan kembali tombol

}

document.body.addEventListener("load", preloadAudio, true);

</script>

Sekarang kode tombol button nya, kamu bisa menambahkan lebih dari satu tombol Button dengan URL file audio yang berbeda.

<button type="button" data-type="audio" data-url="https://domain-kamu.com/uploads/judul1.mp3" onclick="playSound(this)">Putar Audio A</button><br/><br/>

<button type="button" data-type="audio" data-url="https://domain-kamu.com/uploads/judul2.mp3" onclick="playSound(this)">Putar Audio B</button><br/><br/>

Saat halaman dimuat, semua file audio yang ada pada button akan dimuat ke Browser ( preload audio ). Dalam kata lain sumber file akan di unduh otomatis di latar belakang dan disimpan sebagai cache browser. Terus apabila tombol button di klik maka akan langsung diputar otomatis tanpa harus memuat file dari server.

Teknik ini juga digunakan oleh beberapa situs web streaming musik seperti Spotify, SoundClud, dan lain-lain.

Silakan temen-temen modifikasi sendiri kodenya bisa digabung dengan kode lain. Tambahkan css atau bisa juga di aplikasikan pada website streaming audio online. Kalau mau coba pastikan kamu mempunyai hosting dengan bandwidth bulanan yang unlimited ya, faktanya setiap kali halaman dimuat semua visitor akan mengunduh file meskipun tanpa diputar.

Solusi lain gunakan CDN yang bisa menyimpan file pada cache server lain, sehingga tidak membebani server hosting kita sendiri. Plugin cache control juga bisa menyimpan file dalam browser selama setahun jika pengguna tidak menghapus data browsing mereka, sehingga ketika browser mengakses URL yang mengandung file audio mereka tidak perlu mengunduhnya lagi.

Kelemahan dari teknik ini adalah tidak cocok buat blog biasa, sebab pastinya bakalan menghabiskan resource yang besar. Selain itu juga visitor bisa menghabiskan lebih banyak kuota ketika browsing pada halaman web kita. Hanya cocok digunakan pada website khusus podcast.

Kode mungkin cuma berlaku bagi programer atau developer yang ingin mengembangkan website podcast sendiri. Bagi pemula kamu bisa langsung menggunakan layanan SoundCloud atau layanan premium buzzproud.com (berbayar) untuk mendistribusikan sekaligus menghosting file audio kita.

Kode ini menjadi sumber kode terbuka bebas lisensi, kamu bisa memodifikasinya dan juga menyebarkan ulang kode tanpa perlu menyertakan lisensi. Demikianlah untuk posting kode kali ini, semoga bisa bermanfaat di kemudian hari. Jangan lupa follow terus blog kak ryan buat mendapatkan sumber kode terbaru.

Ryan

Membuat tombol Preloader Audio di Blog

Post a Comment for "Membuat tombol Preloader Audio di Blog"

Post a Comment

Menu Halaman Statis