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:
- 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.
- 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/
- configuration.xml: Merupakan File konfigurasi yang berisi data yang diperlukan untuk memodifikasi tampilan skin player anda, baik layout, warna, controlbar, dock maupun playlist.
- 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:
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:
0 komentar:
Posting Komentar