🔔 Aktifkan notifikasi disini Google News

Cara Membuat Music Player di Template Plus UI

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>
Demikian Cara Pasang Music Player di Template Plus UI, semoga bermanfaat. Jika ada pertanyaan, jangan sungkan bertanya di kolom komentar.

Mau donasi lewat mana?

SeaBank - Saifullah (9016-9529-0071)

BRI - Saifullah (05680-10003-81533)

BCA Blu - Saifullah (007847464643)

JAGO - Saifullah (1060-2675-3868)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan memberikan DONASI. Tekan tombol merah.
PT Saifullah Digital Advantec

9 komentar

Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😪😭😱😇🤲🙏👈👉👆👇👌👍❌✅⭐
  1. Buatin tutorial fix button dark/light yg di samping profile dong bang biar berfungsi
    1. Button Dark/Light bawaan masih berfungsi kok. Kemarin memang sempat gak berfungsi karena gangguan.
  2. domain nya ko ganti min jadi tugasiswa?
    1. Ada kendala teknis dikit. Tapi tetap bisa diakses lewat Link lama www.saifullah.id kok.
  3. bg cara biar keterima adsen gimana, kronologi nya udah keterima tapi malah kebanned, udah nyoba daftar tapi ketolak terus, apaa harus ganti domain baru?
    1. Kalau udah ke banned, pindahkan artikel k blog lain. Lalu daftarkan pakai domain baru. Visitor sebaiknya dibanyakin.
  4. Upload file .mp3 dimana ya gan, biar bisa di play di post nya
    1. Dari github. kalau bingung nanti saya buatkan tutorialnya.
    2. oke gan, ditunggu tutorial nya
Centang Beri Tahu Saya untuk mendapatkan notifikasi ketika komentar kamu sudah di jawab.
Parse:

Gambar Quote Pre Kode



  • Home


  • Follow


  • MENU


  • Share


  • Comment
Cookie Consent
Kami menyajikan cookie di situs ini untuk menganalisis lalu lintas, mengingat preferensi Anda, dan mengoptimalkan pengalaman Anda.
Oops!
Sepertinya ada yang salah dengan koneksi internet Anda. Harap sambungkan ke internet dan mulai menjelajah lagi.