Menambah Background Music pada Halaman WEB atau Blog

Halaman-halaman web-site Anda akan lebih semarak dan interaktif apabila disertai dengan background musik. Terutama untuk halaman-halaman yang berisi sajak-sajak atau puisi, akan terasa lebih menyentuh dan romantis.

File-file musik yang bisa di embedded (ditempelkan) pada halaman HTML diantaranya:
1. File-file Sound MIDI, yaitu yang dihasilkan oleh alat synthesizer music instrument. Biasanya musik yang dihasilkan ini berupa instrumentalia, dan menggunakan file-extension .mid . File size dari sound MIDI tersebut relatif kecil ( tidak pernah lebih dari 50 kbyte), sehingga waktu proses down-loadingnya relatif singkat. Dan juga biasanya digunakan untuk ring-tone HP (polyphonic).
2. File-file sound WAV, yaitu hasil transfer sound dari piringan hitam, CD atau dari MP3. File musik yang berupa WAV adalah suara musik asli (plus vocalis). Tentu saja file sizenya relatif besar bisa mencapai 500 kbyte tergantung durasi dari musik yang direkamnya. Dan memerlukan waktu proses downloading yang agak lama. Kalau Anda menggunakan modem internet 56 kbps, dalam bandwith yang normal, untuk mendownload file sebesar 500 kbyte kira-kira memerlukan waktu 3 menit.

Mengapa untuk memainkan sound WAV menggunakan media player? Karena pada waktu downloading musik tidak akan mengganggu proses downloading halaman html-nya. Sementara menunggu file sound sedang di download, pengunjung Anda bisa membaca/melihat-lihat halaman html Anda.

File musik MIDI maupun WAV bisa Anda dapatkan di situs-situs internet melalui search engine.

CARA MEMBUAT BACK GROUND MUSIK MIDI PADA HTML

Pertama save file musik midi Anda kedalam folder/direktori dimana halaman html yang akan diberi background tersimpan. Bilamana perlu rename nama file sesingkat mungkin dan jangan menggunakan spasi. Disini saya mengambil contoh file musik : endlesslove02.mid

Back ground musik akan play secara otomatis tanpa menggunakan plug-in player . blok terlebih dahulu kode-kode HTML dibawah ini:

< src="endlesslove02.mid" loop="-1">

Kemudian COPY , selanjutnya PASTE ke halaman HTML anda. Terlebih dahulu buka file html yang akan diberi background musik menggunakan HTML-editor atau mengunakan Note Pad.

Paste kode tersebut diantara : ......<><>.... Sehingga kode html tersebut seperti dibawah ini :

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<>
<>
< src="endlesslove02.mid" loop="-1">
<>Endless Love< /title >

Kalau Anda merubah nama file sound/musik atau menganti dengan file midi yang lain, ganti juga nama file "endlesslove02.mid" sesuai dengan nama file seperti yang telah Anda rubah. (tanda petik " jangan dihilangkan !). Save file html Anda. Untuk mencobanya, buka halaman html tersebut menggunakan browser.


CARA MEMBUAT BACK GROUND MUSIK WAV MENGGUNAKAN EMBEDDING PLUG-IN AUDIO MEDIA PLAYER PADA HTML

Pertama save file musik WAV Anda ke folder/direktori dimana file html yang akan Anda isikan file musik tersebut disimpan. (Sama seperti langkah menggunakan file MIDI). Sebagai contoh disini menggunakan file releaseme.wav

Blok kode-kode dibawah ini kemudian copy :

< src="releaseme.wav" autostart="false" loop="false" volume="60">

Kode tersebut nantinya akan berupa gambar Media Player seperti terlihat diatas. Maka dari itu diperlukan lay-out untuk meletakkan Media Player tersebut.

Buka file halaman HTML yang akan diisi background musik dengan HTML Editor. Kalau Anda sudah menguasai kode-kode HTML, bisa menggunakan Note Pad. Disini saya menggunakan program Macromedia Dream Weaver untuk menentukan lay-out. Gunakan fasilitas TABLE. Insert Table ditempat yang Anda pilih. Tentukan Row = 1 Columns = 1, berikan Cell pad = 4, Cell space = 0 dan Border = 0, Align = Center. W (Width) = 100% , H (Height) = biarkan kosong.

Klik cursor didalam table yang baru saja Anda buat. Klik View pada menu tool bar, Klik Code , selanjutnya tampilan akan berubah menjadi kode-kode HTML. Jangan sekalipun meng klik disembarang tempat di halaman kode-kode tersebut. Biarkan kursor berada pada posisinya.

Selanjutnya Paste dengan menggunakan fasilitas Edit >> Paste kode HTML yang Anda copy tadi yaitu :

< src="releaseme.wav" autostart="false" loop="false" volume="60">

Apabila Anda menggunakan nama file WAV yang lain, gantilah nama file releaseme.wav sesuai dengan nama file tersebut. (tanda petik "....." jangan dihilangkan !)

Kembali ke View >> Design.

Untuk me review-nya tekan key F12. Perhatikan apakah gambar Media Player sudah tampil ditempat yang Anda tentukan. Didalam Media Player tersebut terdapat garis-bar yang merupakan indikator proses down-loading file musik yang Anda sertakan. Bar indicator tersebut akan terisi oleh warna tertentu. Kalau bar indikator sudah penuh terisi oleh warna tertentu, artinya bahwa file wav sudah terdownload semua dan siap di mainkan (Play).

Anda juga bisa memainkan file video MPEG, WMA dan lain-lain. Seperti contoh diatas. Cobalah klik tanda Play untuk memainkan file musik/video tersebut.

Save file HTML anda tersebut.

BACKGROUND MUSIK DIHALAMAN WEB-BLOG

Anda juga bisa membuat background musik pada halaman Web-Blog Anda ( blogger.com, blogspot.com, blogdrive.com dan sebagainya ). Sebaiknya gunakanlah metode EMBEDDING PLUG-IN MEDIA PLAYER. Terlebih dahulu copy kode HTML seperti yang diterangkan diatas. Selanjutnya buka HTML editor web-blog Anda. Tentukan tempat untuk meletakkan MEDIA PLAYER tersebut. Kemudian paste kode-kode tesrsebut ditempat yang telah Anda tentukan.

Biasanya Web-Blog server hanya menyediakan space untuk menyimpan file-file gambar saja yaitu ".jpg" dan ".gif" saja. Tidak menyediakan space untuk menyimpan file-file ".wav" maupun ".mid".

Untuk mendapatkan sumber file-musik, Anda harus membuat "link" ke situs lain yang menyediakan file-file musik ( .mid maupun .wav ). Dengan mengganti sumber file nya.

Sebagai contoh caranya adalah : pada bagian src="releaseme.wav" gantilah dengan src="http://url_music_kamu/endlesslove02.mid"

Anda bisa mencari situs-situs lain yang menyediakan lagu-lagu kesukaan Anda melalui search-engine baik musik MIDI maupun WAV. Copy alamat URL-nya kemudian paste ke kolom src tersebut.