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
- Kunjungi website resmi nya Podbean.com
- Selanjutnya anda bisa melakukan login menggunakan akun google anda
- Setelah login silahkan buat episod baru seperti contoh gambar di bawah ini
- Kemudian Upload file khusus pembahasan kita kali ini adlah lagu atau musik
- Salin hasil upload lagu tersebut dan gunakan sesuai keperluan
Info: Temukan menu Episod di dalam menu dashboard
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
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
