How to add Music Player in Blogger

You might be seen many websites with music player and you want to add a music player to your website? Then this tutorial is for you, in this article we are going to show you How to add Music Player in Blogger, So without wasting much time let's check how to add it!

How o add Music Player to Blogger?

First, go to your Blogger dashboard
Then click on the Theme option
Then click on the drop-down icon near Customize option
Then click on the Edit HTML option
Now find ]]></b:skin> and paste the following CSS just above it or under any style tag

/* Music player */.player-STLH{transform:translate(0%,0%);width:330px;height:500px;border-radius:15px;background-color:#fff;box-shadow:0 15px 20px 0 #dadada;}.player-STLH 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;}.player-STLH input[type=range]::-ms-fill-lower{background:#0505ff;opacity:.2}.player-STLH input[type=range]::-ms-fill-upper{background:#0505ff;opacity:.2}.player-STLH input[type=range]::-moz-range-track{border:none;background:#0505ff;opacity:.2}.player-STLH 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;}.player-STLH input[type=range]::-moz-range-thumb{background:#0505ff;height:8px;width:8px;border-radius:100%;}.player-STLH input[type=range]::-ms-thumb{-webkit-appearance:none!important;background:#0505ff;height:8px;width:8px;border-radius:100%;}.player-STLH .cover-PS{width:150px;height:150px;border-radius:50%;overflow:hidden;position:absolute;left:50%;top:50px;transform:translateX(-50%)}.player-STLH .cover-PS img{width:100%;height:100%;object-fit:cover-PS;}.player-STLH .info-MS{position:absolute;left:50%;top:240px;transform:translateX(-50%);text-align:center;}.player-STLH .info-MS .title-MS{font-size:20px;font-weight:700;margin-bottom:2px;}.player-STLH .info-MS .singer-MS{font-size:12px;}.player-STLH .btn-box{position:absolute;top:330px;width:100%;display:flex;justify-content:center;}.player-STLH .btn-box i{font-size:24px;color:#72646f;margin:0 30px;cursor:pointer;}.player-STLH .btn-box i.active{color:#0505ff;}.player-STLH .volume-box{display:none;position:absolute;left:50%;top:295px;transform:translateX(-50%);z-index:1;padding:0 20px;}.player-STLH .volume-box .volume-down{position:absolute;left:-15px;top:50%;transform:translateY(-50%);cursor:pointer;color:#72646f;}.player-STLH .volume-box .volume-up{position:absolute;right:-15px;top:50%;transform:translateY(-50%);cursor:pointer;color:#72646f;}.player-STLH .volume-box .volume-up::selection{background-color:unset;}.player-STLH .volume-box input[type=range]{height:5px;width:150px;margin:0 0 15px 0;}.player-STLH .volume-box.active{display:block;}.player-STLH .music-box{position:absolute;left:50%;top:385px;transform:translateX(-50%);}.player-STLH .music-box input[type=range]{height:5px;width:230px;margin:0 0 10px 0;}.player-STLH .music-box input[type=range]::-webkit-slider-thumb{height:5px;width:7px;}.player-STLH .music-box .current-time{position:absolute;left:-35px;top:50%;transform:translateY(-50%);font-size:12px}.player-STLH .music-box .duration{position:absolute;right:-35px;top:50%;transform:translateY(-50%);font-size:12px}.player-STLH .music-box .play,.player-STLH .music-box .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;}.player-STLH .music-box .play i,.player-STLH .music-box .pause i{font-size:36px;color:#fff;position:absolute;left:50%;top:50%;transform:translate(-48%,-50%);}.player-STLH .music-box .pause i{font-size:32px;transform:translate(-50%,-50%);}.drK .player-STLH{background:#2d2d30; box-shadow:none} .drK .player-STLH .music-box .play,.drK .player-STLH .music-box .pause {background-color:#5442f5}.drK.player-STLH input[type=range]::-ms-fill-lower{background:#5442f5;opacity:.2}.drK .player-STLH input[type=range]::-ms-fill-upper{background:#5442f5;opacity:.2}.drK .player-STLH input[type=range]::-moz-range-track{border:none;background:#0505ff;opacity:.2}.drK .player-STLH 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.player-STLH input[type=range]::-moz-range-thumb{background:#0505ff;height:8px;width:8px;border-radius:100%;}.drK.player-STLH input[type=range]::-ms-thumb{-webkit-appearance:none!important;background:#0505ff;height:8px;width:8px;border-radius:100%;}.drK .player-STLH .btn-box i.active{color:#0505ff;}.drK.player-STLH input[type=range]::-ms-thumb{-webkit-appearance:none!important;background:#0505ff;height:8px;width:8px;border-radius:100%;}

Change highlighted .drK with your template dark mode class, if your template doesn't have a dark mode, keep the default.

Then find </body> and paste this JS just above it

<script>/*<![CDATA[*//* Music Player (KYEYIT) */var music=document.querySelector(".music-element"),playBtn=document.querySelector(".play"),seekbar=document.querySelector(".seekbar"),currentTime=document.querySelector(".current-time"),duration=document.querySelector(".duration");function handlePlay(){music.paused?(music.play(),playBtn.className="pause",playBtn.innerHTML='<i class="material-icons">pause</i>'):(music.pause(),playBtn.className="play",playBtn.innerHTML='<i class="material-icons">play_arrow</i>'),music.addEventListener("ended",function(){playBtn.className="play",playBtn.innerHTML='<i class="material-icons">play_arrow</i>',music.currentTime=0})}music.onloadeddata=function(){seekbar.max=music.duration;var e=parseInt(music.duration%60),n=parseInt(music.duration/60%60);duration.innerHTML=n+":"+e},music.ontimeupdate=function(){seekbar.value=music.currentTime},handleSeekBar=function(){music.currentTime=seekbar.value},music.addEventListener("timeupdate",function(){var e=parseInt(music.currentTime%60),n=parseInt(music.currentTime/60%60);currentTime.innerHTML=n+":"+e},!1);var favIcon=document.querySelector(".favorite");function handleFavorite(){favIcon.classList.toggle("active")}var repIcon=document.querySelector(".repeat");function handleRepeat(){1==music.loop?(music.loop=!1,repIcon.classList.toggle("active")):(music.loop=!0,repIcon.classList.toggle("active"))}var volIcon=document.querySelector(".volume"),volBox=document.querySelector(".volume-box"),volumeRange=document.querySelector(".volume-range"),volumeDown=document.querySelector(".volume-down"),volumeUp=document.querySelector(".volume-up");function handleVolume(){volIcon.classList.toggle("active"),volBox.classList.toggle("active")}function handleVolumeDown(){volumeRange.value=Number(volumeRange.value)-20,music.volume=volumeRange.value/100}function handleVolumeUp(){volumeRange.value=Number(volumeRange.value)+20,music.volume=volumeRange.value/100}volumeDown.addEventListener("click",handleVolumeDown),volumeUp.addEventListener("click",handleVolumeUp);/*]]>*/</script>

Then Save HTML

Then go to the post or page where you want to add a Music player

Then make sure that you switched Compose view to the HTML view in the post or page

Then paste the following code on it

<div align="center">
<div class="player-STLH">
        <div class="cover-PS">
            <img alt="alt_here" src="add_image_here" title="title_here">
        </div>
        <div class="info-MS">
            <div class="title-MS">song_title_here</div>
            <div class="singer-MS">creator_name_here</div>
        </div>
        <div class="volume-box">
            <span class="volume-down"><i class="material-icons">remove</i></span>
            <input type="range" class="volume-range" step="1" value="80" min="0" max="100"
                oninput="music.volume = this.value/100">
            <span class="volume-up"><i class="material-icons">add</i></span>
        </div>
        <div class="btn-box">
            <i class="material-icons repeat" onclick="handleRepeat()">repeat</i>
            <i class="material-icons favorite active" onclick="handleFavorite()">favorite</i>
            <i class="material-icons volume" onclick="handleVolume()">volume_up</i>
        </div>
        
  <div class="music-box">
            <input type="range" step="1" class="seekbar" value="0" min="0" max="100" oninput="handleSeekBar()">

            <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="handlePlay()">
                <i class="material-icons">play_arrow</i>
            </span>
        </div>
    </div>
</div>
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>

Don't forget to change highlighted parts in the code.

Then Publish the post or page to save changes and publish the post

NOTE; Put Direct link music not page

Now you successfully installed a music player on your Blogger website!

Want to see how it looks?

View demo

Conclusion

Hope you successfully installed a music player in your Blogger website, If you have any doubts related tot this article ask me in the comment, Do share with your friends, Thanks for visiting, Have a nice day!

KYEYIT

How to add Music Player in Blogger

How o add Music Player to Blogger?

Conclusion

About the Author

Post a Comment

2023 Airtel Unlimited Free Internet Trick

Download HERO DNSTT v1.1 APK Get Free Unlimited Internet Access

Halotel Free Internet Unlimited Tanzania 2023

HA Tunnel Plus Config Files Download For Free Internet All Country [Updated 2023]

New Premium Working BIN Canva Pro 2023

KYEYIT