How to use and Add Music Player On Plus Ui Theme Blogger

Table of Contents
How to use and Add Music Player On Plus Ui Theme Blogger

As we know. Plus Ui V2.6 has the music player feature, you can use your .mp3 files to play it through the Music Player. Take a look at following Music Player.

Add Music Player On Plus Ui Theme Blogger

Add the following codes in your post through HTML view to add a music player.

Replace the Track NameArtist NameTrack Cover and Track Source in the script.

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

Save the template and see the result.

ANDD
ANDD Daily workers

Post a Comment