Cara Membuat Music Player di Template Plus UI | Aku Genius

Cara Membuat Music Player di Template Plus UI

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

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

Sumber : https://saifullah.id

Go to Link