Cara Memasang File .MP3 ke Blog dengan JavaScript

Belum lama saya posting pada postingan sebelumnya tentang Software CorelDRAW X5 Portable Gratis , sekarang saya ingin berbagi tentang Cara Memasang File .MP3 di Blog dengan menggunakan sedikit sentuhan tag <audio> dan JavaScript , agar widget music ini terlihat simple! karena hanya akan terlihat icon/tombol play & pause nya saja .

Code Embed File .MP3 Custom ini sudah saya coba di beberapa Platform seperti Blogger, Wordpress, dsb.

Untuk sobat yang sudah tidak sabar ingin melihat demo-nya silahkan klik pada icon volume berikut untuk menghentikan/pause lagu-nya :

Apa beda-nya dengan Plugin-plugin mp3 embed lain-nya?

Ada beberapa hal yang harus sobat tau, kelebihan plugin ini adalah :

Mudah di gunakan!
Tidak perlu install ini itu!
Support di semua browser!
Ringan banget sob! gak bikin blog sobat lelet.
Tidak membutuhkan Flashplayer (karena bukan file .swf /flash)
Tinggal Copy-Paste!
Lagu bisa di sesuaikan / CUSTOM! ^_^ via Dropbox / Google Drive

Cara Pemasangan :

Langkah Pertama - Simpan kode di bawah ini tepat di atas kode</body> :

<!-- Ganti Alamat File MP3 dibawah ini -->
<audio autoplay="true" loop="true" width="0" height="0" id="sound" src="https://dl.dropboxusercontent.com/s/kpifw10mpvn9fgk/usher-burn.mp3" type="audio/mp3" ></audio>
<script type="text/javascript">
    // Rubah Script dibawah ini jika ada yang ingin dirubah :
function playpause() { var snd = document.getElementById("sound"); var snd_btn = document.getElementById("sound_button"); snd.muted = !snd.muted; if(snd.muted){ snd_btn.innerHTML = "<img title='Music Paused' src='http://i.imgur.com/vm55Fsg.png' />"; } else{ snd_btn.innerHTML = "<img title='Music Palying!' src='http://i.imgur.com/uJLe6iR.png' />"; } }
</script>

Keterangan : Ubah alamat file mp3 : https://dl.dropboxusercontent.com/s/kpifw10mpvn9fgk/usher-burn.mp3 dengan alamat file MP3 sobat yang sudah di hosting, disini saya menggunakan Dropbox.com dalam menyimpan file MP3 yang ingin saya embed.

Langkah Kedua - Panggil kode di atas dengan memasang markup html pada postingan / sidebar blog sobat! :

<div id='sound_button' onClick="playpause()" style='position:relative;' ><img title='Music Playing' src='http://i.imgur.com/uJLe6iR.png' /></div>

Langkah Terakhir - Gunakan Custom CSS untuk mengatur penempatan tombol/icon volume music ini, cara-nya simpan css dibawah ini tepat di atas kode </head>

<style type='text/css'>
#sound_button {
position:fixed;
z-index:+1000;
top:5px;
right:5px;
}
</style>

Coba langsung yuk? Klik Disini

Sekian tutorial tentang Cara Memasang File .MP3 di Blog yang saya bagikan kali ini, semoga bermanfaat untuk sobat yang sedang membutuhkan Trik Blogger ini. Terima kasih telah membaca postingan saya kali ini, salam blogger.