How to add Music Player in Blogger

Hello everyone, Welcome to Shiva Technic World, 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 (Shiva Technic World) */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

  • 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!

    How was it?

    Hi, I am Shiva I am a student I like to learn new things and share them with others.

    2 comments

    1. test
      1. Comment is working :)
    How was it? let us know with a comment!

    Cookies Consent

    This website uses cookies to ensure you get the best experience on our website.

    Cookies Policy

    We employ the use of cookies. By accessing this website, you agreed to use cookies in agreement with this website's Privacy Policy.

    Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by our website to enable the functionality of certain areas to make it easier for people visiting our website. Some of our affiliate/advertising partners may also use cookies.