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.

Konfigurasi JW Player 2.3

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...

Ada beberapa file di folder yang anda download yaitu: audio.html, config.xml, logoku.png, player.swf, playlist.xml dan swfobject.js. Sebelum melakukan modifikasi, saya sarankan anda menggunakan notepad++ untuk memudahkan pengeditan, silakan pelajari dulu di sini.

Berikut sedikit penjelasan dari komponen yang memerlukan modifikasi:

1. Upload seluruh file yang ada misalnya di folder http://www.situsanda.com/audio_player/

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:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="mp3player" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="320" width="250"> config=http://www.situsanda.com/audio_player/config.xml&file=http://www.situsanda.com/audio_player/fatawa.xml"> config=http://www.situsanda.com/audio_player/config.xml&file=http://www.situsanda.com/audio_player/playlist.xml" wmode="transparent" name="mp3player" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" height="320" width="250">

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:

1. Instal blank module, download pada link berikut... kemudian instal dan aktifkan.

2. Masukan script berikut ke dalam module blank yang telah diinstal:

<center><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="mp3player"codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="320" width="250">config=http://www.situsanda.com/Audio_Player/config.xml&file=http://www.situsanda.com/Audio_Player/playlist.xml">config=http://www.situsanda.com/Audio_Player/config.xml&file=http://www.situsanda.com/Audio_Player/playlist.xml" wmode="transparent" name="mp3player"type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" height="320" width="250">('http://www.situsanda.com/Audio_Player/audio.html','popup','width=200,height=270,scrollbars=no,resizable=yes,toolbar=no,directories=no,location=no,

menubar=no,status=no,left=0,top=0'); return false">Keluarkan Playerbox (pop up)</a></center>

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

Jika semua berjalan normal maka akan terlihat seperti berikut ini:

Mohon Perhatian! Bagi anda yang beragama Islam, saya hanya menyarankan penggunaan audio player ini hanya untuk kepentingan dakwah, berupa Audio Kajian. Jika anda menggunakannya untuk musik, saya berlepas diri dari dosa yang ditimbulkan. Silakan baca keterangannya tentang 'Terlarangnya Musik!'. Barokallohufiikum...

sumber : agussuwasono.com