Monday, December 28, 2015

Cara Mudah Memasang Lagu Pilihan Sendiri di Blogger dengan HTML 5

Cara Mudah Memasang Lagu Pilihan Sendiri di Blogger

Pernah tidak anda mengunjungi sebuah blog dan mendengarkan sebuah lagu dilantunkan secara otomatis ketika anda membuka blog tersebut? Nah dalam posting kali ini saya akan mencoba membagikan sebuah tips sederhana tentang cara memasang lagu pilihan sendiri di Blogger. Banyak orang menganggap bahwa metode memasang lagu pada blog merupakan hal yang dapat mengganggu tingkat SEO sebuah blog dan mengganggu pengunjung, namun bagi saya sendiri hal tersebut sah-sah saja, hanya saja yang mungkin perlu jadi bahan pertimbangan adalah hal tersebut akan sedikit menguras data internet pengunjung sebuah blog dan berpotensi memperlambat proses loading halaman blog.

Namun itu bukanlah masalah besar, bagi saya mendengarkan sebuah lagu sambil membaca artikel sebuah blog adalah hal yang cukup menyenangkan. Anda bisa mencobanya melalui halaman demo yang saya sediakan berikut ini.


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 anda 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 anda 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 anda pasang pada kode tersebut, kode seperti apakah yang dipasang itu? Berikut akan saya jelaskan. Dan untuk mencoba melihat hasilnya sebelum dipasang di blog anda, 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 anda akan mendapatkan URLnya. Jika muncul tombol download pada lagu tersebut silahkan klik kanan lalu salin alamat tautan tersebut, itulah URLnya.

Cara Mudah Memasang Lagu Pilihan Sendiri di Blogger

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

Cara Mudah Memasang Lagu Pilihan Sendiri di Blogger

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

Cara Mudah Memasang Lagu Pilihan Sendiri di Blogger

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

Cara Mudah Memasang Lagu Pilihan Sendiri di Blogger

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

Cara Mudah Memasang Lagu Pilihan Sendiri di Blogger

Selanjutnya setelah mendapatkan URL dari lagu yang ingin dipasang silahkan salin dan tempel URL tersebut pada kode embed yang ada diatas pada bagian url-lagu-anda. Anda juga bisa mencoba beberapa URL yang saya peroleh dari Playlist Wikipedia berikut ini

http://upload.wikimedia.org/wikipedia/commons/3/3c/01_-_Vivaldi_Spring_mvt_1_Allegro_-_John_Harrison_violin.ogg
http://upload.wikimedia.org/wikipedia/commons/4/4e/02_-_Vivaldi_Spring_mvt_2_Largo_-_John_Harrison_violin.ogg
http://upload.wikimedia.org/wikipedia/commons/f/fa/03_-_Vivaldi_Spring_mvt_3_Allegro_-_John_Harrison_violin.ogg
http://upload.wikimedia.org/wikipedia/commons/1/19/04_-_Vivaldi_Summer_mvt_1_Allegro_non_molto_-_John_Harrison_violin.ogg
http://upload.wikimedia.org/wikipedia/commons/6/63/Corelli-Trio_Sonata_11-1.ogg
http://upload.wikimedia.org/wikipedia/commons/a/a6/Corelli-Trio_Sonata_11-2.ogg
http://upload.wikimedia.org/wikipedia/commons/0/0a/Corelli-Trio_Sonata_11-3.ogg
http://upload.wikimedia.org/wikipedia/commons/d/d5/Martinu_-_Sonata_for_cello_and_piano_1-1.ogg
http://upload.wikimedia.org/wikipedia/commons/c/cf/Martinu_-_Sonata_for_cello_and_piano_1-2.ogg
http://upload.wikimedia.org/wikipedia/commons/3/36/Martinu_-_Sonata_for_cello_and_piano_1-3.ogg
http://upload.wikimedia.org/wikipedia/commons/0/00/Martinu-_Concerto_for_2_Pianos_and_Orchestra-1.ogg
http://upload.wikimedia.org/wikipedia/commons/9/94/Martinu-_Concerto_for_2_Pianos_and_Orchestra-2.ogg
http://upload.wikimedia.org/wikipedia/commons/e/e8/Martinu-_Concerto_for_2_Pianos_and_Orchestra-3.ogg
http://upload.wikimedia.org/wikipedia/commons/6/69/Bartok_-_Op.4b_-1.ogg
http://upload.wikimedia.org/wikipedia/commons/4/48/Bartok_-_Out-of-Doors_Suite2.ogg
http://upload.wikimedia.org/wikipedia/commons/c/c8/Debussy_-_Mazurka.ogg
http://upload.wikimedia.org/wikipedia/commons/e/e0/Monteverdi-cor_mio_mentre_vi_miro.ogg
http://upload.wikimedia.org/wikipedia/commons/b/b0/Monteverdi_-_cruda_amarilli.ogg
http://upload.wikimedia.org/wikipedia/commons/2/21/Festa-ogni_belta_madonna.ogg
http://upload.wikimedia.org/wikipedia/commons/2/2d/Festa_-_si_come_sete_bella.ogg
http://upload.wikimedia.org/wikipedia/commons/f/fe/Festa_-_una_donna.ogg
http://upload.wikimedia.org/wikipedia/commons/f/fc/Home_on_the_range.ogg

Itulah beberapa langkah yang dapat anda coba untuk memasang lagu pilihan sendiri di blogger. Anda bisa mencoba membuat kreasi anda dengan kode-kode di atas dan semoga bisa bermanfaat. Anda dapat menyampaikan tanggapan anda melalui kotak komentar yang ada di bagian bawah halaman ini, sistem komentar blog ini menggunakan layanan Disqus namun anda tidak harus memiliki akun untuk dapat berkomentar, silakan gunakan komentar sebagai tamu (guest comment). Atau anda juga dapat membuat kiriman melalui halaman contact blog ini, jika tidak sedang sibuk admin akan segera menjawab kiriman anda. Terima kasih dan sampai jumpa.

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

Next

Related