Monday, December 28, 2015

Cara Mudah Memasang Lagu Pilihan Sendiri di Blogger dengan HTML 5

Advertisement
Cara Mudah Memasang Lagu Pilihan Sendiri di Blogger

Assalamu'alaikum warohmatullahi wabarokatuh. Nah, dalam posting kali ini saya akan membahas tentang bagaimana cara memasang lagu pilihan sendiri di blog. Sebenarnya beberapa saat lalu saya pernah membahas tentang hal yang sama tetapi dengan menggunakan bantuan dari pihak ketiga, artinya kode embed kita dapatkan dari situs lain. Tetapi disini yang saya gunakan sangat simpel dan tanpa perlu menggunakan bantuan dari situs lain. Terlebih dahulu silahkan lihat live demo untuk lagu yang terpasang di blog pada link berikut ini.


Nah, pada dasarnya disini kita hanya menggunakan tag HTML 5 yaitu tag audio. Lalu kemudian disisipkan di blog, baik itu langsung pada HTML posting blog maupun dengan memasang widgetnya di blog. Baiklah langsung saja kita mulai bagaimana cara memasangnya.
  • Pertama sobat harus mengerti dimana kode embed pemutar lagu tersebut akan dipasang, jika ingin memasangnya di widget blog, silahkan buka dashboard blogger anda kemudian pilih Tata Letak lalu pilih Tambah Gadget.
  • Tetapi jika ingin memasangnya langsung hanya di posting blog, silahkan ganti mode penulisan posting dari Compose ke HTML kemudian tambahkan kodenya.

Kode Embed Lagu

Silahkan tambahkan kode berikut ditempat yang sobat inginkan.
<audio controls>
<source src="url-of-audio-file" />
Jika anda tidak bisa melihat kontrol audio, browser anda tidak mendukung
</audio>

Hasilnya :


Untuk mengatur agar autoplay, cukup tambahkan kode autoplay dalam tag audio, sehingga jadinya seperti kode berikut ini.

<audio controls autoplay>
<source src="url-of-audio-file" />
Jika anda tidak bisa melihat kontrol audio, browser anda tidak mendukung
</audio>

Lalu untuk mengatur agar setelah lagunya habis maka akan diputar ulang (disebut looping) cukup tambahkan kode loop pada tag audio, sehingga kodenya menjadi seperti berikut ini.

<audio controls loop> 
<source src="url-lagu-anda" /> 
Jika anda tidak bisa melihat kontrol audio, browser anda tidak mendukung
</audio>

Selanjutnya silahkan ganti url-lagu-anda dengan URL lagu yang ingin sobat pasang pada kode tersebut, kode seperti apakah yang dipasang itu? Berikut akan saya jelaskan. Dan untuk mencoba melihat hasilnya sebelum dipasang di blog sobat, silahkan coba pasang kodenya pada halaman berikut.

Kode URL Lagu

Disini kita bisa memanfaatkan beberapa situs yang dapat ditempati untuk mendengarkan lagu atau download lagu misalnya Soundcloud, 4shared, Google Drive, Mediafire, dll, serta cara terakhir dengan menggunakan IDM. Berikut caranya.

Soundcloud
Silahkan cari atau upload lagu pilihan anda di soundcloud. Setelah itu buka alamat lagu tersebut, silahkan download lagu tersebut, maka sobat akan mendapatkan URLnya. Jika muncul tombol download pada lagu tersebut silahkan klik kanan lalu salin alamat tautan tersebut, itulah URLnya.


4shared
Jika menggunakan 4shared, hampir sama dengan sebelumnya silahkan cari atau upload lagu yang ingin sobat pasang. Setelah itu setelah proses download muncul anda boleh membatalkannya lalu klik kanan pada perintah untuk mengulang download, lalu salin alamat tautannya.


Cara umum berlaku untuk semua
Untuk cara berikut ini bisa sobat gunakan asal lagu tersebut bisa di download, caranya mudah, cukup download saja lagu tersebut. Jika menggunakan IDM sobat bisa langsung mendapatkan URL lagunya.


Jika tidak ada tombol download, silahkan klik tombol download Popup IDM yang biasanya muncul.


Jika tidak menggunakan IDM, cukup langsung download saja lagu tersebut, kemudian pada jendela download browser anda sudah bisa mendapatkan URL lagunya.


Selanjutnya setelah sobat sudah mendapatkan URL dari lagu yang ingin dipasang silahkan tempel pada kode embed yang ada diatas. Sobat juga bisa mendapatkan beberapa URL musik yang disediakan oleh Playlist Wikipedia silahkan lihat disini.

Mungkin cukup sekian dari saya, kalau ada yang ingin ditanyakan silahkan sampaikan pada kotak komentar dibawah atau bisa juga melalui halaman contact blog ini. Terima kasih, assalamu'alaikum.

Sumber :
http://blog.haekalfikri.net/2013/02/cara-mengambil-url-mp3-dari-4shared.html
http://www.bloggerbuster.com/2012/07/how-to-add-music-player-in-blogspot.html
https://en.wikipedia.org/wiki/Wikipedia:Sound/list/playlist
Disqus Comment
Parse Tool