Membuat Playlist Dan Embed Player Musik Di Podsnack

Pada postingan hari ini masih berbicara perihal musik. Seperti pepatah menyampaikan jika hidup menjadi tidak berwarna tanpa musik hehehe.... Kali ini kita akan menciptakan playlist musik sehingga nantinya pada player di blog akan memuat beberapa lagu yang kita pilih.

Di sini kita kita tidak akan mengupload lagu, tapi memanfaatkan Youtube untuk mencari lagu kesayangan kita. Karena kita tahu bahwa di Youtube sudah tersedia banyak sekali jenis musik. Kaprikornus kita menciptakan playlist dari lagu-lagu yang ada di Youtube. Dan alasannya ialah kini zamannya HTML5, nanti kita akan mencoba menimbulkan embed player-nya valid HTML5 sehingga dapat disimpan di sidebar.

Mari kita mulai menciptakan playlist dan embed player musiknya.

1. Silahkan masuk ke PodSnack dengan link ini http://www.podsnack.com/

2. Silahkan klik tombol "Build a playlist"

3. Silahkan sign in, dapat memakai akun FB, Twitter, atau Google Anda. Dan silahkan ikuti langkah-langkahnya hingga verifikasi email dan klik link yang dikirim ke email Anda lalu log in.

4. Setelah log in maka Anda akan disuguhi halaman ibarat gambar di bawah ini.

5. Silahkan klik tombol Youtube untuk mulai menciptakan playlist dari lagu-lagu yang ada di Youtube, silahkan ketikan nama penyanyi atau judul lagu favorite Anda. Setelah tersedia, Anda dapat memutarnya dahulu lagu pilihan Anda untuk memastikan bahwa lagu tersebut benar dan klik tombol plus (+) di sebelahnya untuk memasukan lagunya ke dalam playlist. Setelah final dengan lagu-lagu pilihan Anda silahkan klik tombol "Next" untuk melanjutkan ke tahap berikutnya, ibarat tampak pada gambar di bawah ini.

6. Pada halaman berikutnya ialah untuk kustomisasi player musiknya. Di sini Anda disediakan beberapa tema untuk player Anda, silahkan pilih tema kesukaan Anda. Kemudian Anda dapat menentukan atau menentukan size playernya, playback options ibarat loop, shuffle, dan auto play. Setelah final dengan kustomisasi player, silahkan klik tombol "Finish" untuk mendapat isyarat embed-nya.

7. Klik pada tombol "Embed for HTML" untuk mendapat isyarat embed-nya. Akan muncul obrolan box, silahkan pilih tombol "Use free (with watermark). Kemudian silahkan copy isyarat embed yang diberikan dan paste di notepad.

8. Biasanya isyarat embed-nya akan tampak ibarat di bawah ini.

<iframe style="border:none" src="http://files.podsnack.com/iframe/embed.html?hash=atiqr0wq&t=138015959" width="300" height="364" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

9. Agar valid HTML5, silahkan hapus isyarat yang berwarna merah. Ganti isyarat iframe dengan object dan tambahkan isyarat amp; pada isyarat & dan rubah juga isyarat src menjadi data. Seperti tampak pada isyarat di bawah ini.

<object data="http://files.podsnack.com/iframe/embed.html?hash=atiqr0wq&amp;t=138015959" width="300" height="364"></object>

10. Selesai. Selamat mencoba...

Untuk pola player dari PodSnack yang saya buat ibarat tampak di bawah ini. Karena kita memakai akun gratis, maka pada awal lagu akan ada bunyi watermark dari PodSnack heuheueheu... namanya juga gratisan... Silahkan nikmati lagu-lagu Pop Sunda dari Darso di bawah ini...

Sumber https://www.kompiajaib.com/

Share this post