Membuat pemutar musik di blogger

Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai cara membuat player music di blogger dengan tampilan keren dan juga menarik tentunya

Info: Oke jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Player Music

Apakah itu player music? dan untuk apakah fungsi serta kegunaannya, oke pasti dari kamu pernah mendengarkan musik melalui aplikasi, jika iya aplikasi tersebutlah sebagai Player musik alias pemutar musik, nah di dalam player musik tersebut menampilkan berbagai informasi mengenai lagu yang sedang di putar seperti judul, artis, album dan lain sebaginya, dan tampilan seperti itulah yang ingin di terapkan pada website

Upload file

Sangat di sarankan bahwa sebelum kamu memasang dan menginstall seluruh source kode, kamu harus terlebih dahulu meng-upload lagu ataupun musik ke dalam sebuah platform, yang mana link dari hasil upload tersebut lah yang di gunakan sebagai source kode langsung untuk memutar lagu tersebut

Menggunakan Podbean

Platform terbaik untuk mengapload file dan mendapatkan akses link direct langsung ke dalam file adalah podbean.com, admin sangat merekomendasikan agar kamu menggunakan platform tersebut, silahkan lihat penjabaran cara menggunakan podbean untuk mengupload file dibawah ini

1. Kunjungi website resmi nya Podbean.com
2. Selanjutnya anda bisa melakukan login menggunakan akun google anda
3. Setelah login silahkan buat episod baru seperti contoh gambar di bawah ini


Info: Temukan menu Episod di dalam menu dashboard

4. Kemudian Upload file khusus pembahasan kita kali ini adlah lagu atau musik
5. Salin hasil upload lagu tersebut dan gunakan sesuai keperluan

Info: Untuk mendapatkan link, setelah selesai meng-upload file, silahkan scroll tampilan website ke bawah hingga menemukan link yang dimaksud seperti contoh gambar di atas

Contoh Tampilan

Jika kamu penasaran dengan bagaimana kah contoh tampilan dari player musik di blogger silahkan periksa menggunakan tombol di bawah ini ok

• Periksa

Info: Bagiamana sobat dengan contoh tampilan nya keren sekali yak, ya pastilah...

Cara pembuatan

Baiklah sekarang saatnya admin bakalan menjabarkan mengenai bagaimana caranya membuat player music di blogger, silahkan baca dan ikuti setiap arahan yang bakalan admin jabarkan di bawah ini ok

Kode CSS

Seperti biasanya kamu bisa langsung menyalin kode CSS di bawah ini kemudian letakkan di atas kode ]]></b:skin>

.rahPlyrMs{transform:translate(0%,0%);width:330px;height:500px;border-radius:15px;background-color:#fff;box-shadow:0 15px 20px 0 #dadada;}.rahPlyrMs input[type=range]{-webkit-appearance:none!important;margin:0px;padding:0px;background:#e7e8ff;height:5px;width:150px;outline:none;cursor:pointer;overflow:hidden;border-radius:5px;}.rahPlyrMs input[type=range]::-ms-fill-lower{background:#0505ff;opacity:.2}.rahPlyrMs input[type=range]::-ms-fill-upper{background:#0505ff;opacity:.2}.rahPlyrMs input[type=range]::-moz-range-track{border:none;background:#0505ff;opacity:.2}.rahPlyrMs input[type=range]::-webkit-slider-thumb{-webkit-appearance:none!important;background:#0505ff;height:5px;width:5px;border-radius:50%;box-shadow:-100vw 0 0 100vw #0505ff;}.rahPlyrMs input[type=range]::-moz-range-thumb{background:#0505ff;height:8px;width:8px;border-radius:100%;}.rahPlyrMs input[type=range]::-ms-thumb{-webkit-appearance:none!important;background:#0505ff;height:8px;width:8px;border-radius:100%;}.rahPlyrMs .rahcvrMs{width:150px;height:150px;border-radius:50%;overflow:hidden;position:absolute;left:50%;top:50px;transform:translateX(-50%)}.rahPlyrMs .rahcvrMs img{width:100%;height:100%;object-fit:rahcvrMs;}.rahPlyrMs .rahinfoMs{position:absolute;left:50%;top:240px;transform:translateX(-50%);text-align:center;}.rahPlyrMs .rahinfoMs .rahtitleMs{font-size:20px;font-weight:700;margin-bottom:2px;}.rahPlyrMs .rahinfoMs .rahsingerMs{font-size:12px;}.rahPlyrMs .rahbtnMs{position:absolute;top:330px;width:100%;display:flex;justify-content:center;}.rahPlyrMs .rahbtnMs i{font-size:24px;color:#72646f;margin:0 30px;cursor:pointer;}.rahPlyrMs .rahbtnMs i.active{color:#0505ff;}.rahPlyrMs .rahVolume{display:none;position:absolute;left:50%;top:295px;transform:translateX(-50%);z-index:1;padding:0 20px;}.rahPlyrMs .rahVolume .volume-down{position:absolute;left:-15px;top:50%;transform:translateY(-50%);cursor:pointer;color:#72646f;}.rahPlyrMs .rahVolume .rahvlmUpMs{position:absolute;right:-15px;top:50%;transform:translateY(-50%);cursor:pointer;color:#72646f;}.rahPlyrMs .rahVolume .rahvlmUpMs::selection{background-color:unset;}.rahPlyrMs .rahVolume input[type=range]{height:5px;width:150px;margin:0 0 15px 0;}.rahPlyrMs .rahVolume.active{display:block;}.rahPlyrMs .rahbxMs{position:absolute;left:50%;top:385px;transform:translateX(-50%);}.rahPlyrMs .rahbxMs input[type=range]{height:5px;width:230px;margin:0 0 10px 0;}.rahPlyrMs .rahbxMs input[type=range]::-webkit-slider-thumb{height:5px;width:7px;}.rahPlyrMs .rahbxMs .current-time{position:absolute;left:-35px;top:50%;transform:translateY(-50%);font-size:12px}.rahPlyrMs .rahbxMs .duration{position:absolute;right:-35px;top:50%;transform:translateY(-50%);font-size:12px}.rahPlyrMs .rahbxMs .play,.rahPlyrMs .rahbxMs .pause{position:absolute;left:50%;top:55px;transform:translateX(-50%);width:50px;height:50px;border-radius:50px;background-color:#0505ff;cursor:pointer;transition:all 0.4s;}.rahPlyrMs .rahbxMs .play i,.rahPlyrMs .rahbxMs .pause i{font-size:36px;color:#fff;position:absolute;left:50%;top:50%;transform:translate(-48%,-50%);}.rahPlyrMs .rahbxMs .pause i{font-size:32px;transform:translate(-50%,-50%);}.drK .rahPlyrMs{background:#2d2d30; box-shadow:none} .drK .rahPlyrMs .rahbxMs .play,.drK .rahPlyrMs .rahbxMs .pause {background-color:#5442f5}.drK.rahPlyrMs input[type=range]::-ms-fill-lower{background:#5442f5;opacity:.2}.drK .rahPlyrMs input[type=range]::-ms-fill-upper{background:#5442f5;opacity:.2}.drK .rahPlyrMs input[type=range]::-moz-range-track{border:none;background:#0505ff;opacity:.2}.drK .rahPlyrMs input[type=range]::-webkit-slider-thumb{-webkit-appearance:none!important;background:#0505ff);height:5px;width:5px;border-radius:50%;box-shadow:-100vw 0 0 100vw #0505ff;}.drK.rahPlyrMs input[type=range]::-moz-range-thumb{background:#0505ff;height:8px;width:8px;border-radius:100%;}.drK.rahPlyrMs input[type=range]::-ms-thumb{-webkit-appearance:none!important;background:#0505ff;height:8px;width:8px;border-radius:100%;}.drK .rahPlyrMs .rahbtnMs i.active{color:#0505ff;}.drK.rahPlyrMs input[type=range]::-ms-thumb{-webkit-appearance:none!important;background:#0505ff;height:8px;width:8px;border-radius:100%;}

Info: Atau sobat bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas

Kode Javascript

Langkah selanjutnya yang bisa kamu lakukan adalah menyalin lagi kode javascript di bawah ini kemudian letakkan atas kode </body>

<script>/*<![CDATA[*/
/* Music Player by ICloudice.com */
var _0x3a1a=["\x2E\x6D\x75\x73\x69\x63\x2D\x65\x6C\x65\x6D\x65\x6E\x74","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72","\x2E\x70\x6C\x61\x79","\x2E\x73\x65\x65\x6B\x62\x61\x72","\x2E\x63\x75\x72\x72\x65\x6E\x74\x2D\x74\x69\x6D\x65","\x2E\x64\x75\x72\x61\x74\x69\x6F\x6E","\x70\x61\x75\x73\x65\x64","\x70\x6C\x61\x79","\x63\x6C\x61\x73\x73\x4E\x61\x6D\x65","\x70\x61\x75\x73\x65","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x3C\x69\x20\x63\x6C\x61\x73\x73\x3D\x22\x6D\x61\x74\x65\x72\x69\x61\x6C\x2D\x69\x63\x6F\x6E\x73\x22\x3E\x70\x61\x75\x73\x65\x3C\x2F\x69\x3E","\x3C\x69\x20\x63\x6C\x61\x73\x73\x3D\x22\x6D\x61\x74\x65\x72\x69\x61\x6C\x2D\x69\x63\x6F\x6E\x73\x22\x3E\x70\x6C\x61\x79\x5F\x61\x72\x72\x6F\x77\x3C\x2F\x69\x3E","\x65\x6E\x64\x65\x64","\x63\x75\x72\x72\x65\x6E\x74\x54\x69\x6D\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x6F\x6E\x6C\x6F\x61\x64\x65\x64\x64\x61\x74\x61","\x6D\x61\x78","\x64\x75\x72\x61\x74\x69\x6F\x6E","\x3A","\x6F\x6E\x74\x69\x6D\x65\x75\x70\x64\x61\x74\x65","\x76\x61\x6C\x75\x65","\x74\x69\x6D\x65\x75\x70\x64\x61\x74\x65","\x2E\x66\x61\x76\x6F\x72\x69\x74\x65","\x61\x63\x74\x69\x76\x65","\x74\x6F\x67\x67\x6C\x65","\x63\x6C\x61\x73\x73\x4C\x69\x73\x74","\x2E\x72\x65\x70\x65\x61\x74","\x6C\x6F\x6F\x70","\x2E\x76\x6F\x6C\x75\x6D\x65","\x2E\x72\x61\x68\x56\x6F\x6C\x75\x6D\x65","\x2E\x72\x61\x68\x72\x61\x6E\x67\x65\x4D\x73","\x2E\x76\x6F\x6C\x75\x6D\x65\x2D\x64\x6F\x77\x6E","\x2E\x72\x61\x68\x76\x6C\x6D\x55\x70\x4D\x73","\x76\x6F\x6C\x75\x6D\x65","\x63\x6C\x69\x63\x6B"];var music=document[_0x3a1a[1]](_0x3a1a[0]),playBtn=document[_0x3a1a[1]](_0x3a1a[2]),seekbar=document[_0x3a1a[1]](_0x3a1a[3]),currentTime=document[_0x3a1a[1]](_0x3a1a[4]),duration=document[_0x3a1a[1]](_0x3a1a[5]);function rahplayMs(){music[_0x3a1a[6]]?(music[_0x3a1a[7]](),playBtn[_0x3a1a[8]]= _0x3a1a[9],playBtn[_0x3a1a[10]]= _0x3a1a[11]):(music[_0x3a1a[9]](),playBtn[_0x3a1a[8]]= _0x3a1a[7],playBtn[_0x3a1a[10]]= _0x3a1a[12]),music[_0x3a1a[15]](_0x3a1a[13],function(){playBtn[_0x3a1a[8]]= _0x3a1a[7],playBtn[_0x3a1a[10]]= _0x3a1a[12],music[_0x3a1a[14]]= 0})}music[_0x3a1a[16]]= function(){seekbar[_0x3a1a[17]]= music[_0x3a1a[18]];var _0x2a8dx7=parseInt(music[_0x3a1a[18]]% 60),_0x2a8dx8=parseInt(music[_0x3a1a[18]]/ 60% 60);duration[_0x3a1a[10]]= _0x2a8dx8+ _0x3a1a[19]+ _0x2a8dx7},music[_0x3a1a[20]]= function(){seekbar[_0x3a1a[21]]= music[_0x3a1a[14]]},rahseekBar= function(){music[_0x3a1a[14]]= seekbar[_0x3a1a[21]]},music[_0x3a1a[15]](_0x3a1a[22],function(){var _0x2a8dx7=parseInt(music[_0x3a1a[14]]% 60),_0x2a8dx8=parseInt(music[_0x3a1a[14]]/ 60% 60);currentTime[_0x3a1a[10]]= _0x2a8dx8+ _0x3a1a[19]+ _0x2a8dx7},!1);var favIcon=document[_0x3a1a[1]](_0x3a1a[23]);function rahfavorite(){favIcon[_0x3a1a[26]][_0x3a1a[25]](_0x3a1a[24])}var repIcon=document[_0x3a1a[1]](_0x3a1a[27]);function handleRepeat(){1== music[_0x3a1a[28]]?(music[_0x3a1a[28]]=!1,repIcon[_0x3a1a[26]][_0x3a1a[25]](_0x3a1a[24])):(music[_0x3a1a[28]]=!0,repIcon[_0x3a1a[26]][_0x3a1a[25]](_0x3a1a[24]))}var volIcon=document[_0x3a1a[1]](_0x3a1a[29]),volBox=document[_0x3a1a[1]](_0x3a1a[30]),volumeRange=document[_0x3a1a[1]](_0x3a1a[31]),volumeDown=document[_0x3a1a[1]](_0x3a1a[32]),volumeUp=document[_0x3a1a[1]](_0x3a1a[33]);function rahvolume(){volIcon[_0x3a1a[26]][_0x3a1a[25]](_0x3a1a[24]),volBox[_0x3a1a[26]][_0x3a1a[25]](_0x3a1a[24])}function rahvolumeDown(){volumeRange[_0x3a1a[21]]= Number(volumeRange[_0x3a1a[21]])- 20,music[_0x3a1a[34]]= volumeRange[_0x3a1a[21]]/ 100}function rahvolumeUp(){volumeRange[_0x3a1a[21]]= Number(volumeRange[_0x3a1a[21]])+ 20,music[_0x3a1a[34]]= volumeRange[_0x3a1a[21]]/ 100}volumeDown[_0x3a1a[15]](_0x3a1a[35],rahvolumeDown),volumeUp[_0x3a1a[15]](_0x3a1a[35],rahvolumeUp)/*]]>*/</script>

Info: Kode javascript di atas sudah di enkripsi, jika kamu ingin mengenkripsi kode javascript gunakan tools milik ICloudice.com, silahkan klik disini

Cara Penggunaan

Setelah meng-install kode CSS dan javascript yang admin berikan sebelumnya di dalam template kamu, selanjutnya untuk menampilkan pemutar musik di blogger, silahkan salin kode HTML di bawah ini sesuai kebutuhan kamu aja, misal di dalam postingan atau sebagainya

<div align="center">
<div class="rahPlyrMs">
<div class="rahcvrMs">
<img alt="alt_here" src="add_image_here" title="title_here">
</div>
<div class="rahinfoMs">
<div class="rahtitleMs">song_title_here</div>
<div class="rahsingerMs">creator_name_here</div>
</div>
<div class="rahVolume">
<span class="volume-down"><i class="material-icons">remove</i></span>
<input type="range" class="rahrangeMs" step="1" value="80" min="0" max="100"
oninput="music.volume = this.value/100">
<span class="rahvlmUpMs"><i class="material-icons">add</i></span>
</div>
<div class="rahbtnMs">
<i class="material-icons repeat" onclick="handleRepeat()">repeat</i>
<i class="material-icons favorite active" onclick="rahfavorite()">favorite</i>
<i class="material-icons volume" onclick="rahvolume()">volume_up</i>
</div>

<div class="rahbxMs">
<input type="range" step="1" class="seekbar" value="0" min="0" max="100" oninput="rahseekBar()">

<audio class="music-element">
<source src="song_src_here">
</audio>
<span class="current-time">0:0</span><span class="duration">0:0</span>
<span class="play" onclick="rahplayMs()">
<i class="material-icons">play_arrow</i>
</span>
</div>
</div>
</div>
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>

Info: Silahkan ubah link gambar, link musik, judul, dan sebagainya di dalam kode HTML di atas Ok

Sing Me To Sleep

Alan Walker

remove add

repeat favorite volume_up

0:00:0 play_arrow