Subscribe my YouTube channel: Click to Subscribe!

How to add a beautiful Music Player in your Blogger Blogpost | Satya Ki Pathshala

how to add a music player to a Blogger Website. If you are using Plus UI Blogger Template version 2.6, you can add this feature to your Blogger
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
In today's article, I will tell you how to add a music player to a Blogger Website. If you are using Plus UI Blogger Template version 2.6, you can add this feature to your Blogger Website. As we know that Plus UI Ver. 2.6 comes with an inbuilt Music Player function. So, I'll show you how to add this music player feature to your Blogger Website.

How to add a beautiful Music Player in your Blogger Blogpost | Satya Ki Pathshala

You can add your .mp3 file to play online on your blogger website. Take a look at the following music player.

Note: The Music Player is not available in the Standard Version.


How to add a music player to Blogger Website

Add the following codes to your blog post in HTML view to add a music player to Blogger Website.

<div id='musicPlayer'></div>
<script>
  /*<![CDATA[*/
  /* Music Player Tracks */
  var playerTracks = [{
      name: "Live Fast",
      artist: "Alan Walker & A$AP Rocky",
      cover: "https://raw.githubusercontent.com/.../cover/1.png",
      source: "https://raw.githubusercontent.com/.../music/1.mp3"
    },
    {
      name: "Man On The Moon",
      artist: "Alan Walker & Benjamin Ingrosso",
      cover: "https://raw.githubusercontent.com/.../cover/2.png",
      source: "https://raw.githubusercontent.com/.../music/2.mp3"
    },
    {
      name: "On My Way",
      artist: "Alan Walker, Farruko & Sabrina Carpenter",
      cover: "https://raw.githubusercontent.com/.../cover/3.png",
      source: "https://raw.githubusercontent.com/.../music/3.mp3"
    },
    {
      name: "Sing Me To Sleep",
      artist: "Alan Walker",
      cover: "https://raw.githubusercontent.com/.../cover/4.png",
      source: "https://raw.githubusercontent.com/.../music/4.mp3"
    },
    {
      name: "Alone",
      artist: "Alan Walker",
      cover: "https://raw.githubusercontent.com/.../cover/5.png",
      source: "https://raw.githubusercontent.com/.../music/5.mp3"
    },
    {
      name: "Bewajah",
      artist: "Himesh Reshammiya",
      cover: "https://raw.githubusercontent.com/.../cover/6.png",
      source: "https://raw.githubusercontent.com/.../music/6.mp3"
    },
    {
      name: "Hymn For The Weekend",
      artist: "Coldplay",
      cover: "https://raw.githubusercontent.com/.../cover/7.png",
      source: "https://raw.githubusercontent.com/.../music/7.mp3"
    },
    {
      name: "Alone",
      artist: "Marshmello",
      cover: "https://raw.githubusercontent.com/.../cover/8.png",
      source: "https://raw.githubusercontent.com/.../music/8.mp3"
    }
  ];
  /*]]>*/
</script>

Don't forget to replace the Track Name, Artist Name, Track Cover, and Track Source in the Script.

Source:
plus-ui.fineshopdesign.com

Post a Comment

Please don't enter any spam link in the Comment Section. All comments are reviewed by the Admin!
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.