Hot News

News

Cara membuat Live Demo MP3 Player di Blogger

(Selamat Pagi, Selamat Siang, Selamat Sore, Selamat Malam) Silahkan anda pilih sesuai kondisi anda saat membuka postingan ini :)

Pada beberapa waktu yang lalu ada kawan kita yang request untuk membuatkan live mp3 di blogger, yang nantinya fitur live mp3 ini digunakan sebagai demo mp3 pada blognya karena ingin membangun situs bergenre download mp3, Oleh karena itu pada kesempatan kali ini InfoQta akan membagikan tutorial CSS Blogger cara membuat Live Demo Player MP3, cocok untuk Beginner, walaupun tidak seluruhnya tutorial ini menggunakan CSS, namun saya yakin anda dapat mengikuti langkah di bawah dengan sangat mudah dan cepat.

MP3 Live Demo Blogger

Oke langsung saja ke pokok permasalahannya, bahan yang harus anda siapkan adalah sebagai berikut:
  • web storage mp3 (mediafire, 4shared, GoogleSite)
  • file mp3

Hasil dari tutorial kali ini akan terdapat 2 versi seperti bawah ini :
Untuk yang versi pertama hanya work di desktop, versi kedua tested desktop(chrome,mozilla)/mobile(mozilla) work.  
Untuk bisa memutar player MP3 ini, Plugin Adobe Flash Player harus dalam keadaan aktif, sama halnya ketika anda ingin Streaming Youtube Via Browser. (kunjungi link ini untuk update/instal plugin adobe flash di browser anda https://get.adobe.com/flashplayer/ )


versi pertama



(bagi anda yang pertama kali mengunjungi laman ini, tampilan akan terlihat 2 kotak hitam memanjang, silahkan klik saja kotak tersebut dan pilih Allow And Remember, setelah itu akan muncul media player)

 

maka akan menjadi seperti gambar di bawah ini

 

versi kedua



1.Langkah Pertama

Pada langkah pertama ini kita akan membuat storage mp3 di GoogleSite. Kenapa saya memilih GoogleSite? jawabannya adalah karena Orang orang pemain Blogger pasti terhubung dengan Google dan pastinya punya akun Google, sehingga akan lebih mudah mengikuti tutorial ini dan tidak perlu membuat akun lagi dan akhirnya saya bisa langsung saja skip tahapan membuat akun Google, saya anggap saja anda semua yang membaca postingan ini sudah memiliki akun Google.

Note: GoogleSite hanya menyediakan space sebesar 100mb untuk tiap site serta 20mb per upload file

  • Masuk ke sini https://sites.google.com/
  • Pilih Create - In Classic Sites
  • Pilih Blank Template - Nama Sites - Cek Captcha - Create
  • Setelah masuk ke laman sites - Pilih Create page
  • Masukkkan nama Page - setting template page menjadi "File Cabinet" - Create
untuk lebih jelasnya perhatikan illustrasi bentuk gambar di bawah ini:

next....


next....


Selanjutnya kita pastikan bahwa File yang ada dalam site sudah bisa di akses oleh orang lain melalui web, dengan cara sebagai berikut:
  • Pilih Setting
  • Sharing and Permissions
  • Pilih Changes
  • Pilih On - Public on the web
  • Save

 

next....
 
 
next....

2.Langkah Kedua

Pada langkah kedua ini kita akan upload file mp3 yang digunakan sebagai Live Demo MP3
  • Masuk ke Page FileMP3 yang telah kita buat di tahap pertama
  • Klik Add File
  • Pilih MP3 yang anda inginkan
  • Setelah File MP3 anda berhasil di upload - Klik kanan pada tombol Download - Copy Link Location 
  • Simpan link location pada notepad untuk sementara

next....


next....


3.Langkah Ketiga

Pada langkah ini kita akan mulai bermain main dengan CSS di Blogger. Copy Code berikut dan Paste kan dalam Postingan anda.



Kode untuk Versi Pertama

<embed
flashvars="audioUrl=https://sites.google.com/site/infoqtadotcom/filemp3/Nidji%20Tak%20Akan%20Pernah%20Mati.mp3"
height="27"
pluginspage="http://www.macromedia.com/go/getflashplayer"
quality="best"
src="http://www.google.com/reader/ui/3523697345-audio-player.swf" type="application/x-shockwave-flash"
width="400"
wmode="transparent">
</embed>
<div>
<object type="application/x-shockwave-flash"
data="https://sites.google.com/site/infoqtadotcom/filemp3/dewplayer.swf" width="240" height="20" id="dewplayer"
name="dewplayer">
<param name="movie" value="dewplayer.swf" />
<param name="flashvars" value="mp3=https://sites.google.com/site/infoqtadotcom/filemp3/Nidji%20Tak%20Akan%20Pernah%20Mati.mp3" />
<param name="wmode" value="transparent" />
</object>
</div>




Kode untuk Versi Kedua

<audio controls="controls">
<source src="https://sites.google.com/site/infoqtadotcom/filemp3/Nidji%20Tak%20Akan%20Pernah%20Mati.mp3" type="audio/mpeg" />
Your browser does not support this audio
</audio>


Penjelasan Kode:
  • Kode yang berwarna merah : adalah link yang anda copy dari siteGoogle di langkah Kedua, Silahkan ganti dengan Link File MP3 tempat anda menyimpan
  • Untuk Versi Kedua, khusus untuk Browser yang sudah support HTML5.


Selesai, Silahkan Pilih Salah satu Sesuai selera.

Mudah bukan, Terimakasih untuk Kawan kawan infoqta yang bersedia menyumbangkan ide nya dengan cara request tutorial baik di kolom komentar, pada kontak blog , ataupun pada media sosial lainnya.

silahkan tinggalkan komentar di bawah ini jika dirasa sulit untuk menerapkan langkah di atas.
Cara membuat Live Demo MP3 Player di Blogger Reviewed by Oki Firmansyah on October 18, 2017 Rating: 5

6 comments:

  1. Wah kayanya keren nih kalau di pasang di blog mp3 ane om. Mantap deh!! Sangat berguna.

    ReplyDelete
  2. Wah kayanya keren nih kalau di pasang di blog mp3 ane om. Mantap deh!! Sangat berguna.

    ReplyDelete
  3. admin, ada contoh halaman Live Demo MP3 Player dan apakah ada effect samping mengenai kecepatan akses blog jika di pasangi mp3 player ?

    ReplyDelete
    Replies
    1. Hasil tutorial ada di awal postingan gan klo mau lihat Live Demo mP3 nya,
      seharunya enggak ngefek gan sama blognya, karna itu file mp3 nya tidak di simpan jadi sat dengan situsnya tapi dilokasi yang berbeda, kecuali klo mp3 nya dibuat autoplay ketika web dibuka.

      Delete
  4. Tutorialnya berhasil, dan sudah saya terapkan di blog baru saya terimakasih...

    ReplyDelete
  5. Lagunya itu didownload dulu apa bisa ambil dari online gitu gan?

    www.maxtips18.net

    ReplyDelete

All Rights Reserved by Sumber Ilmu © 2017
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.