How to add a music player to your website?

Introduction

Welcome to my blog Freeplay!
Today the topic is How to add a music player to your website?! Hope this post might be useful to you and please stay tuned to our blog for further updates. Remember the end contains surprises!

---

Resultant Output

View Demo

Starting off, hello! Hope everyone is fine enough !
Let's start the tutorial.
Adding a music player was hard until this tutorial was released. This works for all themes.

Code

1. Go to blogger dashboard and click on THEMES. Then click on the dropdown menu and click EDIT HTMLbutton.
2. Paste this css code before </b:skin>

   .main-wrapper{background-color:#2d2d30; color: white; height: 90vh; width: 80vw; max-width: 300px; max-height: 500px; margin: auto; border-radius: 1rem; display: flex; flex-flow: column wrap; justify-content: space-between;}.header1{display: flex; box-sizing: border-box; justify-content: space-between; margin: 1.5rem; color: #f0f0f0;}.header > i{cursor: pointer;}.song-wrapper{display: flex; flex-flow: column wrap; align-items: center; justify-content: center;}.song-thumb-wrapper{position: relative; width: 200px; height: 200px;}.song-thumb{width: 160px; height: 160px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background-color: white; background-position: center center; background-size: cover; transition: all ease-in-out 0.5s;}.song-progress{transform: rotate(-90deg); transition: all linear 0.1s;}svg.song-progress{width:100%; height:100%;}.song-info{text-align: center; margin-top: 1rem;}.song-info-title{display: inline-block; color: rgba(174, 128, 214, 1); text-transform: uppercase; letter-spacing: 10px; margin-right: -10px; font-size: 20px; font-weight: bold; font-family: "Vibes", cursive;}.song-info-artist,.song-info-album{color: #f0f0f0; letter-spacing: 1px; font-size: 16px;}.song-info-album{color: #8f8f8f;}.player-wrapper{display: flex; justify-content: space-evenly; align-items: center; font-size: 1rem; color: #8f8f8f;}.player-wrapper > i{cursor: pointer;}.player-move-btn{font-size: 2.5rem; color: #f0f0f0;}.player-state-btn{font-size: 3rem; color: #ae80d6;}.player-load-btn{animation: spin 2s linear infinite;}.volume-wrapper{display: flex; justify-content: space-evenly; align-items: center; margin: 1.5rem;}.volume-wrapper > i{width: 20px; cursor: pointer;}.volume-bar{width: 60%; position: relative;}.volume-bar #volume-slider{-webkit-appearance: none; outline: none; margin: 0; width: 100%; height: 5px; border-radius: 10px; background-color: #4d3f61;}.volume-bar #volume-slider::-webkit-slider-thumb{-webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; background-color: #ae80d6; box-shadow: 0 0 3px #1f1f1f; cursor: pointer;}.volume-bar .volume-trail{position: absolute; top: 7px; left: 0; width: 48%; height: 5px; border-radius: 10px; background-color: #ae80d6; transition: width linear 0.1s;}@keyframes spin{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}

3. Paste this js before </body>

   <script type="text/javascript">//<![CDATA[
   eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('j z(d,e){8 f=A();B z=j(a,b){a=a-M;8 c=f[a];B c},z(d,e)}8 4=z;(j(a,b){8 c=z,C=a();1K(!![]){1L{8 d=-9(c(1M))/W*(-9(c(1N))/1a)+9(c(1O))/1P*(9(c(1Q))/1R)+-9(c(1S))/1T+9(c(1U))/1V+9(c(1W))/1X*(-9(c(1Y))/1Z)+9(c(20))/21*(9(c(22))/23)+9(c(24))/25*(-9(c(26))/27);N(d===b)28;X C[\'1b\'](C[\'1c\']())}29(2a){C[\'1b\'](C[\'1c\']())}}}(A,2b));8 1d=4(2c);m[\'2d\'](\'1e\')[4(O)]=1d;8 h=Y,D=![],P=!![],k=2e 2f(n[h][4(1f)]),1g=m[4(o)](\'.E-Q\'),1h=m[4(o)](\'.E-r-Z\'),1i=m[4(o)](4(2g)),1j=m[4(o)](4(2h)),s=m[4(o)](4(2i)),10=m[4(o)](4(2j)),1k=m[4(o)](4(2k)),11=m[4(o)](\'.F-1l\');R();j R(){8 a=4;P=!![],D=![],s[a(M)]=a(2l),s[a(G)][\'1m\']=a(2m),1h[a(O)]=n[h][a(2n)],1i[a(O)]=n[h][a(2o)],1j[a(O)]=n[h][a(2p)],1g[a(G)][\'2q\']=a(2r)+n[h][a(2s)]+\')\',k[a(2t)]=n[h][a(1f)],k[\'12\']()}j 2u(){h=(h+W)%n[\'1n\'],R()}j 2v(){8 a=4;h=(h-W)%n[a(2w)],R()}j A(){8 a=[\'1n\',\'F\',\'2x-1o\',\'2y\',\'2z\',\'2A\',\'1m\',\'13\',\'14\\g-12-u\\t-H-p\',\'2B\',\'.E-r-15\',\'2C\',\'2D\',\'.E-r-13\',\'2E\',\'15\',\'2F\',\'2G\',\'2H\',\'12\',\'#F-16\',\'2I\',\'2J\',\'2K\',\'2L\',\'2M\',\'Z\',\'17\',\'0\\1p\',\'2N\',\'.E-S-T\',\'14\\g-2O\\t-H-p\\t-2P-p\',\'2Q\',\'2R(\',\'14\\g-18-u\\t-H-p\',\'2S\',\'Q\',\'2T\',\'2U\',\'2V\',\'.1e-H-p\',\'T\',\'<7\\6=\\2W-I\\2>\\3<7\\6=\\2X\\2>\\3<i\\6=\\q\\g-2Y-1q\\2></i>\\3<i\\6=\\2Z\\g-30\\2></i>\\3</7><7\\6=\\l-I\\2>\\3<7\\6=\\l-Q-I\\2>\\3<1r\\6=\\l-S\\2\\31=\\1s\\2\\32=\\1s\\2\\33=\\J\\34\\1t\\1t\\2>\\3<u\\6=\\l-S-35\\2\\1u=\\U\\2\\1v=\\U\\2\\1w=\\1x\\2\\v=\\2#36\\2\\v-17=\\1y\\2\\37=\\1z\\2/>\\3<u\\6=\\l-S-T\\2\\1u=\\U\\2\\1v=\\U\\2\\1w=\\1x\\2\\v=\\2#38\\2\\v-17=\\1y\\39=\\1z\\2\\v-1o=\\J\\1p\\2\\v-3a=\\3b\\2/>\\3</1r>\\3<7\\6=\\l-Q\\2></7></7><7\\6=\\l-r\\2>\\3<w\\6=\\l-r-Z\\2></w><1A/>\\3<w\\6=\\l-r-13\\2></w><1A/>\\3<w\\6=\\l-r-15\\2></w>\\3</7></7><7\\6=\\3c-I\\2>\\3<i\\6=\\q\\g-u-3d\\2></i>\\3<i\\6=\\q\\g-1B-1q\\t-1C-p\\2\\K=\\3e()\\2></i>\\3<i\\6=\\q\\g-18-u\\t-H-p\\2\\K=\\3f()\\2\\3></i>\\3<i\\6=\\q\\g-1B-3g\\t-1C-p\\2\\K=\\3h()\\2></i>\\3<i\\6=\\q\\g-3i\\2></i>\\3</7><7\\6=\\L-I\\2>\\3<i\\6=\\q\\g-F-3j\\2\\3k=\\3l-3m:\\3n\\2\\K=\\19(0)\\2\\3></i>\\3<7\\6=\\L-3o\\2>\\3<3p\\3q=\\3r\\2\\3s=\\L-16\\2\\3t=\\L-16\\2\\3u=\\J\\2\\3v=\\3w\\2\\3x=\\J.1\\2\\3y=\\J.5\\2\\3z=\\19(3A.3B.T)\\2/>\\3<7\\6=\\L-1l\\2></7></7><i\\6=\\q\\g-F-3C\\2\\K=\\19(1)\\2></i>\\3</7></7>\',\'1D\',\'3D\',\'1E\'];A=j(){B a};B A()}j 3E(){8 a=4;N(P)B;D?(k[a(3F)](),s[a(M)]=a(1F)):(k[\'18\'](),s[\'1D\']=a(3G)),D=!D}j 3H(a){8 b=4;k[b(3I)]=a,3J[\'3K\'](a,a!==\'0\',a!==Y);N(a!==\'0\'&&a!==Y)11[b(G)][b(1G)]=a*3L-1a+\'%\';X 11[b(G)][b(1G)]=\'0%\';1k[b(3M)]=a}k[4(1H)](4(3N),()=>{8 x=4;3O V=k[\'3P\']/k[x(3Q)]*1I;N(!3R(V))10[x(3S)](x(1J),V+\'\\3\'+(1I-V));X 10[\'1E\'](x(1J),x(3T))}),k[4(1H)](\'3U\',3V=>{8 y=4;P=![],s[y(M)]=y(1F),s[y(G)][y(3W)]=y(3X)});',62,246,'||x27|x20|_0x456659||x20class|div|var|parseInt|||||||x20fa|currIndex||function|currSong|x27song|document|songsList|0x13f|btn|x27fas|info|stateButton|x20player|circle|x20stroke|span|_0x9a48dc|_0x227a78|_0x56ac|_0x42b6|return|_0x267a71|isPlaying|song|volume|0x118|state|wrapper|x270|x20onclick|x27volume|0x117|if|0x137|isPlayDisabled|thumb|setSong|progress|value|x27100|_0x3f2f5d|0x1|else|0x0|title|songProgressBar|volumeTrail|pause|artist|fas|album|slider|width|play|x27adjustVolume|0x2|push|shift|mp|player|0x130|songThumb|songTitle|songArtist|songAlbum|volumeSlider|trail|cursor|length|dasharray|x20600|left|svg|x27200|x20200|x20cx|x20cy|x20r|x2790|x2710|x27none|br|caret|move|classList|setAttribute|0x13c|0x135|0x133|0x258|0x11c|while|try|0x12b|0x12f|0x125|0x3|0x11f|0x4|0x13d|0x5|0x141|0x6|0x12a|0x7|0x132|0x8|0x123|0x9|0x126|0xa|0x11d|0xb|0x140|0xc|break|catch|_0x3a0630|0xbf3ab|0x144|getElementById|new|Audio|0x127|0x124|0x142|0x138|0x12e|0x139|0x131|0x134|0x121|0x129|backgroundImage|0x13b|0x13e|0x13a|nextSong|prevSong|0x11a|stroke|34364GbzdkL|timeupdate|406996EoKlYT|63243LxUJql|24yYNuPc|1690dJQokc|pointer|511VImsMd|403753PnHnmZ|duration|2RNsJyP|link|wait|96648xcWWTv|addEventListener|innerHTML|spinner|load|src|url|3819075JaQbkg|querySelector|5892AYrsdh|9345474sMjNPl|x27main|x27header1|chevron|x27far|heart|x20width|x20height|x20viewBox|x200|meter|4d3f61|x20fill|ae80d6|x27fill|linecap|x27round|x27player|notch|x27prevSong|x27toggleState|right|x27nextSong|random|off|x20style|x27text|align|x20right|bar|input|x20type|x27range|x20name|x20id|x20min|x20max|x271|x20step|x20value|x20onchange|event|target|up|style|toggleState|0x12d|0x122|adjustVolume|0x11b|console|log|0x64|0x143|0x11e|let|currentTime|0x12c|isNaN|0x119|0x136|canplay|_0x2a9191|0x120|0x128'.split('|'),0,{}))
   //]]></script>
   

On your page

1. Create a new page or open an old page where you want to add music player widget.
2. Click on EDIT HTML and use this following code:
   

         
      <script src="https://kit.fontawesome.com/e04ccf61b7.js" crossorigin="anonymous"></script>
      <div id="player"></div>
       <script>
         var songsList = [
           {
             title: "Alone",
             artist: "Marshmellow",
             album: "Alone (The Remixes), 2016",
             thumb: "https://raw.githubusercontent.com/.../cover/8.png",
             link: "https://raw.githubusercontent.com/.../main/music/8.mp3",
           },
           {
             title: "On my Way",
             artist: "Alan Walker",
             album: "On my Way",
             link: "https://raw.githubusercontent.com/..../main/music/3.mp3",
             thumb: "https://raw.githubusercontent.com/..../main/cover/3.png",
           },
           {
             title: "Faded",
             artist: "Alan Walker",
             album: "Alan Walker, 2017",
             link: "https://github.com/shivatechnicworld/..../Faded.mp3?raw=true",
             thumb: "https://raw.githubusercontent.com/..../main/cover/faded.png",
           },
         ];
   
       </script>
         

   Conclusion

   I expressed my views on the topic 'How to add a music player to your website?'. Hope you are furnished my opinion. The post mustn't be copied without prior permission by emailing or telegram.

   Source:
   https://www.freeplayus.in/2022/08/how-to-add-music-player-to-your-website.html

   Go to Link