Cara Membuat Music Player di Template Plus UI

Saifullah.id - Pada template blogger Plus UI versi terbaru, kita bisa memutar playlist musik dengan Player di dalam artikel. Selain tampilannya yang menarik, fiturnya juga cukup lengkap.

FITUR MUSIC PLAYER PLUS UI

1. Foto Album
   Bisa menambahkan cover album
2. Judul & Deskripsi
   Bisa ditambahkan judul, deskripsi, atau nama penyanyi sebuah lagu
3. Estimasi Waktu
   Terdapat keterangan lama waktu putar dan Progress Bar yang memungkinkan kita mempercepat atau memperlambat audio yang sedang diputar
4. Tombol "Back" dan "Next"
   Memudahkan kita mengganti nomor urut putar, baik ke sebelum atau sesudah.
5. Tombol "Play" dan "Pause"
   Untuk memainkan dan menjeda musik yang sedang berjalan.
6. Playlist
   Bisa menambahkan beberapa lagu sekaligus dalam Player

CARA MEMASANG PEMUTAR MUSIK

Musik yang diputar bisa 1 lagu atau lebih, begini caranya:

1. Pakai Satu Lagu

1. Buka Dashboard Blogger
2. Klik + POSTINGAN BARU
3. Tekan icon PENSIL dan pilih < > EDIT HTML
4. Salin kode berikut
   

   <center>><div id='musicPlayer'></div>

   <script>

     /*<![CDATA[*/

     /* Music Player Tracks */

     var playerTracks = [{

         name: "Live Fast",

         artist: "Alan Walker & ASAP Rocky",

         cover: "https://raw.githubusercontent.com/.../cover/1.png",

         source: "https://raw.githubusercontent.com/.../music/1.mp3"

       }

     ];

     /*]]>*/

   </script></center>
5. Ganti tulisan yang saya tandai warna kuning
   

   name: isi dengan judul lagu
   artist: isi dengan nama penyanyi atau musisi
   cover: isi dengan link foto album
   source: isi dengan link musik

6. Lalu tekan tombol Publikasikan

2. Pakai 2 Lagu atau Lebih

1. Jika ingin memasukkan banyak lagu dalam Player, kita bisa menambah kode berikut

,

    {

      name: "Judul Lagu2",

      artist: "Nama Penyanyi2",

      cover: "https://Link_Foto_Album2.png",

      source: "https://Link_File_Musik2.mp3"

    }

2. Cara menempatkannya seperti ini

<center><div id='musicPlayer'></div>

<script>

  /*<![CDATA[*/

  /* Music Player Tracks */

  var playerTracks = [{

      name: "Judul Lagu1",

      artist: "Nama Penyanyi1",

      cover: "https://Link_Foto_Album1.png",

      source: "https://Link_File_Musik1.mp3"

    },

    {

      name: "Judul Lagu2",

      artist: "Nama Penyanyi2",

      cover: "https://Link_Foto_Album2.png",

      source: "https://Link_File_Musik2.mp3"

    }

  ];

  /*]]>*/

</script></center>

3. Kalau mau menambahkan lebih banyak lagu seperti ini

<center><div id='musicPlayer'></div>

<script>

  /*<![CDATA[*/

  /* Music Player Tracks */

  var playerTracks = [{

      name: "Judul Lagu1",

      artist: "Nama Penyanyi1",

      cover: "https://Link_Foto_Album1.png",

      source: "https://Link_File_Musik1.mp3"

    },

    {

      name: "Judul Lagu2",

      artist: "Nama Penyanyi2",

      cover: "https://Link_Foto_Album2.png",

      source: "https://Link_File_Musik2.mp3"

    },

    {

      name: "Judul Lagu3",

      artist: "Nama Penyanyi3",

      cover: "https://Link_Foto_Album3.png",

      source: "https://Link_File_Musik3.mp3"

    }

  ];

  /*]]>*/

</script></center>

DEMO MUSIC PLAYER

Demikian Cara Pasang Music Player di Template Plus UI, semoga bermanfaat. Jika ada pertanyaan, jangan sungkan bertanya di kolom komentar.