Embed MP3 Dengan Upload File Musik Di Google Drive

Embed MP3
Sebelumnya sudah ada beberapa postingan yang saya share yang membahas tentang embed musik untuk disimpan di blog. Untuk mengingatnya kembali silahkan lihat-lihat lagi postingannya pada link-link di bawah ini.

Baca juga:

Nah kali ini akan saya share lagi tentang cara embed musik untuk disimpan di blog. Dari sekian yang saya posting tentang embed musik, postingan yang sekarang ini yang saya bilang paling mudah. 

Selain kode embed-nya yang mudah dan valid HTML5, juga kita mudah dalam membuat dan menguplaod file MP3 favorite kita untuk dibuat playlist pada player-nya karena kali ini kita mengupload file MP3 di Google Drive.

Sebagai demonya silahkan lihat pada player musik di bawah ini yang saya setting dengan memutar otomatis ketika Anda membuka halaman ini.


Jika Anda tertarik untuk mencobanya silahkan ikuti langkah-langkahnya di bawah ini.

1. Langkah Pertama
Silahkan siapkan file MP3 favorite Anda, kemudian silahkan upload file MP3 ke akun Google Drive Anda. Bagi yang belum mengetahui cara upload file ke Google Drive silahkan simak dulu postingannya di bawah ini.

Baca juga: Cara Upload File, HTML, CSS, Javascript Di Google Drive

Jangan lupa silahkan copy kode/url dari file-file MP3 yang Anda upload di Google Drive.

2. Silahkan copy kode embed di bawah ini.


<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_multi.swf" width="200" height="100">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_multi.swf" />
    <param name="bgcolor" value="#ffffff" />
    <param name="FlashVars" value="mp3=https%3A//googledrive.com/host/KODE UNIK GOOGLE DRIVE MUSIK 1/|https%3A//googledrive.com/host/KODE UNIK GOOGLE DRIVE MUSIK 2/&amp;title=Music 1|Music 2&amp;autoplay=1&amp;loop=1" />
</object>

Silahkan ganti Kode Unik di atas dengan Kode Unik dari masing-masing file MP3 yang diupload di Google Drive. Pada kode di atas sudah terdapat 2 buah lagu, silahkan buat lagi atau simpan lagi untuk URL file musik dari Google Drive lainnya jika Anda ingin menambahkan lagu pada playlist-nya dengan dipisahkan tanda | (silahkan perhatikan contoh di atas).

Untuk kode title=Music 1|Music 2 adalah untuk title musik pada playlist, tambahkan Music 3 untuk musik selanjutnya dengan dipisahkan dengan tanda |

autoplay=1 untuk otomatis memutar musik. Ganti dengan 0 jika Anda tidak menginginkan memutar otomatis.

loop=1 adalah otomatis ke lagu berikutnya. Ganti dengan 0 jika Anda tidak ingin melanjutkan otomatis ke lagu selanjutnya.

Jika Anda tidak ingin menampilkan playlistnya, silahkan ganti angka pada kode height="100" dengan angka 20 dan tambahkan kode &amp;height=20 dibelakang kode &amp;loop=1 sehingga keseluruhannya kodenya akan seperti di bawah ini.


<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_multi.swf" width="200" height="20">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_multi.swf" />
    <param name="bgcolor" value="#ffffff" />
    <param name="FlashVars" value="mp3=https%3A//googledrive.com/host/KODE UNIK GOOGLE DRIVE MUSIK 1/|https%3A//googledrive.com/host/KODE UNIK GOOGLE DRIVE MUSIK 2/&amp;title=Music 1|Music 2&amp;autoplay=1&amp;loop=1&amp;height=20" />
</object>


Untuk mengatur warna background playernya silahkan tambahkan kode di bawah ini dan silahkan sesuaikan warna-warnanya sesuai keinginan Anda.

&amp;bgcolor=2e6eff&amp;bgcolor1=008ff5&amp;bgcolor2=007ac7&amp;slidercolor1=00deeb&amp;slidercolor2=00d6f0&amp;sliderovercolor=ffe600

Sehingga kodenya akan seperti di bawah ini.


<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_multi.swf" width="200" height="100">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_multi.swf" />
    <param name="bgcolor" value="#ffffff" />
    <param name="FlashVars" value="mp3=https%3A//googledrive.com/host/KODE UNIK GOOGLE DRIVE MUSIK 1/|https%3A//googledrive.com/host/KODE UNIK GOOGLE DRIVE MUSIK 2/&amp;title=Music 1|Music 2&amp;autoplay=1&amp;loop=1&amp;bgcolor=2e6eff&amp;bgcolor1=008ff5&amp;bgcolor2=007ac7&amp;slidercolor1=00deeb&amp;slidercolor2=00d6f0&amp;sliderovercolor=ffe600" />
</object>

Dan tampilannya akan seperti di bawah ini.


Selamat mencoba.... dan semoga bermanfaat.

Credit to: http://flash-mp3-player.net/

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