Membuat Playlist Dan Embed Player Musik Di PodSnack

Playlist Dan Embed Player Musik Di PodSnack
Pada postingan hari ini masih berbicara tentang musik. Seperti pepatah mengatakan kalau hidup menjadi tidak berwarna tanpa musik hehehe.... Kali ini kita akan membuat 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 berbagai jenis musik. Jadi kita membuat playlist dari lagu-lagu yang ada di Youtube. Dan karena sekarang zamannya HTML5, nanti kita akan mencoba menjadikan embed player-nya valid HTML5 sehingga bisa disimpan di sidebar.

Mari kita mulai membuat 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, bisa menggunakan akun FB, Twitter, atau Google Anda. Dan silahkan ikuti langkah-langkahnya sampai verifikasi email dan klik link yang dikirim ke email Anda kemudian log in.

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

Membuat Playlist Dan Embed Player Musik Di PodSnack 1

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

Membuat Playlist Dan Embed Player Musik Di PodSnack 2

6. Pada halaman berikutnya adalah untuk kustomisasi player musiknya. Di sini Anda disediakan beberapa tema untuk player Anda, silahkan pilih tema kesukaan Anda. Kemudian Anda bisa memilih atau menentukan size playernya, playback options seperti loop, shuffle, dan auto play. Setelah selesai dengan kustomisasi player, silahkan klik tombol "Finish" untuk mendapatkan kode embed-nya.

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

8. Biasanya kode embed-nya akan tampak seperti 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 kode yang berwarna merah. Ganti kode iframe dengan object dan tambahkan kode amp; pada kode & dan rubah juga kode src menjadi data. Seperti tampak pada kode 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 contoh player dari PodSnack yang saya buat seperti tampak di bawah ini. Karena kita menggunakan akun gratis, maka pada awal lagu akan ada suara watermark dari PodSnack heuheueheu... namanya juga gratisan... Silahkan nikmati lagu-lagu Pop Sunda dari Darso di bawah ini...

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments