Memasang Audio Player di Website Anda

Menanggapi keinginan pembaca My Little Notes di Forum, tentang cara memasang audio player di website khususnya yang berbasis Joomla, alhamdulillah baru kali ini saya berkesempatan untuk menjawabnya.

Audio player yang tersebar di dunia maya, banyak jumlahnya. Akan tetapi yang cukup menonjol, customizeable dan gratis (jika tanpa iklan) adalah media playerberbasis flash dari Longtail Video. Kodenya cukup simpel dan andapun dapat mengkonfigurasinya langsung di halaman wizard, baik untuk file video maupun audio. Maka tak heran jika situs-situs developer terkenal pun menggunakan produk ini untuk mempublikasikan videonya.

Tulisan singkat kali ini akan mencoba membantu anda memasang (embed) script dari audio player agar bisa diterapkan di website anda. Karena Longtail terus menyempurnakan produknya, maka versi swf playernya pun berkembang, dan pada saat tulisan ini dibuat telah mencapai versi 5.7.

Komponen apa saja yang diperlukan? Untuk memasang media player diperlukan 4 komponen, yaitu:

1. Player.swf: merupakan flash file sebagai media player utama yang berfungsi untuk memainkan media yang dilengkapi dengan tombol utama seperti play, next, tempat playlist, dan volume. File ini tidak dapat dimodifikasi kecuali anda memiliki file rownya yang umumnya berekstensi .fla.
2. swfobject.js: adalah metode standar yang mudah digunakan untuk menanamkan konten Flash, dengan memanfaatkan satu file kecil JavaScript berekstensi .js. File ini merupakan file standar yang proyeknya dapat anda lihat di sini: http://code.google.com/p/swfobject/
3. configuration.xml: Merupakan File konfigurasi yang berisi data yang diperlukan untuk memodifikasi tampilan skin player anda, baik layout, warna, controlbar, dock maupun playlist.
4. Playlist.xml: Merupakan kumpulan file pendukung yang berisi url file media baik video maupun audio, lokasi gambar logo maupun informasi yang letaknya menentukan urutan file yang akan dimainkan di player utama.

Kombinasi penggunaan player ini cukup lengkap dan kompleks yang tidak meungkin saya jelaskan di tulisan singkat ini, penggunaan versi player yang berbeda pun terkadang menjadikan fungsi 'embeding' tidak berhasil. Untuk itu saya sarankan anda untuk memepelajarinya langsung di situs longtail dengan link fungsi utama seperti berikut:

• Komponen utama JW Player dapat anda download di sini.
• Konfigurasi XML skin.
• Konfigurasi XML Playlist.
• Download bagi pengguna advance (developer).

Jika anda mampu mempelajarinya, Insya Alloh penggunaan JW Media Player akan terasa mudah.

Pada contoh ini, saya masih menggunakan versi JW Player yang lama, yang hingga saat ini masih bisa bertahan dengan baik. Bagi anda yang berminat untuk memakainya silakan download di sini...

2. Modifikasi audio.html: merupakan file html yang bisa diklik untuk membuka player dengan browser, klik kanan pada audio.html dan pilih edit with notepad++, maka akan terlihat isi scriptnya sebagai berikut:

Pada contoh ini saya menganggap seluruh file anda ada di folder http://www.situsanda.com/audio_player/. Anda juga dapat merubah ukuran tinggi dan lebar player dengan merubah nilai yang ada di height="320" width="250".

3. Modifikasi config.xml: Konfigurasi ini berfungsi memberikan input untuk mengelola player sesuai dengan keinginan kita, baik mengenai start up player, repeat mode, display playlist atau link dan warna player.silakan isi filenya yang kurang lebih sebagai berikut:

<mp3config>

<!-- choose here if you want the mp3player to automatically start and shuffle songs (true or false) -->
<autostart>false</autostart>
<shuffle>false</shuffle> <!-- choose the mp3player repeat mode (none, one or all) -->
<repeat>all</repeat>

<!-- choose here if you want to show the display, playlist or link buttons (true' or false) -->
<showdisplay>true</showdisplay>
<showplaylist>true</showplaylist>

<!-- choose the mp3player colors (hexadecimal, from 0x000000 to 0xffffff) -->
<backcolor>0x000409</backcolor>
<frontcolor>0xEAF3FA</frontcolor>
<lightcolor>0xF3F5F7</lightcolor>

<jpgfile></jpgfile>

<callback></callback>

</mp3config>

Untuk memilih kode warna, silakan gunakan pemilih warna di link berikut ini.

4. Modifikasi playlist.xml: Sesuai dengan namanya, file ini berisi data audio yang akan dimainkan.Urutan audio pada playlist juga merupakan urutan audio pada player. Untukmemodifikasinya, klik kanan pada playlist dan pilih edit with notepad++, maka akan terlihat isi scriptnya sebagai berikut:

Silakan anda isi data di atas sesuai yang anda kehendaki...Sebanyak audio yang akan ditampilkan di player.

Memasang Player

Jika file telah siap di server anda yang pada contoh ini kita menganggap di link folder http://www.situsanda.com/audio_player/. Maka jika kita membuat link sesuai dengan file 1 di atas, maka link yang siap dipakai adalah http://www.situsanda.com/audio_player/audio.html.

Tetapi jika anda ingin memasukannya di modul Joomla, maka langkah yang harus anda lakukan adalah sebagai berikut:

3. Simpan module dan pilih lokasi yang sesuai anda kehendaki.

Jika semua berjalan normal maka akan terlihat seperti berikut ini:

COMMENTS  

Posted On

%b %31, %2011

Posted By

Taufiq

0 RE: Memasang Audio Player di Website Anda
afwan akh ini daftarnya website kita harus sudah online ya

syukron
==================================

Betul Akh... kalo sudah online dan berisi artikel baru kita daftarkan. Format link RSS yang didaftarkan kurang lebihnya seperti ini: http://www.agussuwasono.com/index.php?format=feed&type=rss
Ini step akhir dari pembuatan website. Sebagai opsi tambahan saja...

Quote

Posted On

%b %30, %2011

Posted By

Administrator

0 Create Artikel Langganan
Quoting Taufiq:

Assalamualaikum

akh ane mau tanya gimana cara membuat buat tool artikel berlangganan pada cms joomla, persis seperti website antum.
mohon pencerahannya

syukron katsiron.

wassalam....

Wa'alaikumussalam...
Kita bisa memakai Feed Burner, silakan daftar di sini: feedburner.google.com/

Selanjutnya masukan data link feed RSS situs antum dan ambil code formnya, kemudaian pasang di Situs joomla dengan menggunakan modul blank atau html module. Silakan pelajari di video berikut, atau yang semisalnya: www.youtube.com/watch?v=TSpxgXNzMBM

Semoga membantu...

Quote

Posted On

%b %30, %2011

Posted By

Taufiq

0 RE: Memasang Audio Player di Website Anda
Assalamualaikum

akh ane mau tanya gimana cara membuat buat tool artikel berlangganan pada cms joomla, persis seperti website antum.
mohon pencerahannya

syukron katsiron.

wassalam....

Quote

REFRESH
RSS

LEAVE A REPLY

Mohon Perhatian Anda...1). Kami berhak mengedit, menyortir bahkan mengeblok IP anda jika dipandang tidak sesuai dengan visi dan misi kami tanpa pemberitahuan terlebih dahulu. 2). Jika anda telah mengeklik tombol send dan komentar anda belum muncul, coba dulu klik tombol 'Refresh Comments List'. 3). Jika ikon anda ingin ditampilkan di kolom komentar, silakan daftarkan email anda di Gravatar.com. Terima kasih atas komentar dan perhatian anda.

Name

E-mail (required, but will not display)

Website

Title (required)

Refresh

Send

Cancel

JComments