2012/10/06

Menambah Audio ke Blog atau Web dengan HTML5

Menambah Audio ke Blog atau Web dengan HTML5 -

Menambah Audio ke Blog atau Web dengan HTML5
Player di Halaman Blog
Anda mungkin sudah bisa menambahkan lagu kedalam seuah halaman blog. Saya pernah membuat tutorial tentang menyisipkan file MP3 kedalam sebuah halaman blog atau web tetapi menggunakan sebuah player berbasis swf (silahkan baca artikel MENAMBAHKAN LAGU DI BLOG - EMBED MP3 DI WEB). disitu terlihat ketergantungan kita terhadap sebuah player swf yang dihosting di suatu tempat(server) yang akan digunakan sebagai alat untuk memutar file MP3 yang juga di hosting disuatu tempat yang lain. Jika suatu saat ternyata file SWF yang digunakan tersebut ternyata hilang/terhapus atau ada sebab yang lain yang menyebabkannya hilang bagaimana? atau ternyata browsernya tidak terinstall flashplayer bagaimana?



Ada cara baru untuk menyisipkan lagu kedalam Blog, yakni menggunakan TAG dari HTML5 yakni <audio>. Caranya kurang lebih sama dengan artikel embed-ing mp3 sebelumnya, hanya saja ada yang berubah dengan pembungkus file mp3-nya. Dengan menggunakan Tag  <audio>file mp3 yang sudah saya upload ke situs indowebster berikut:
http://xover3.jkt.3d.x.indowebster.com/download-vip/10/p16f7khggh1fhrhukl9r16941d627.mp3/Adele-SomeOneLikeYou-idlohulhaqDOTcom.mp3
file diatas akan kita bungkus dengan dengan TAG  <audio>
Lihat kode berikut:
<audio controls="controls">
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
di kode tersebut terdapat Tag  <audio> yang diikuti atribut controls yang meyatakan untuk menyertakan control default kepada browser.
di sana juga terdapat Tag  <source> yang diikuti atribut src yang di dalamnya terdapat lokasi file audio dan atribut type untuk menyatakan tipe file audio yang digunakan. Anda bisa menggunakan salah satu saja diantaranya, yakni.
ogg = file audio berformat ogg vorbis atau mpeg = file audio berformat mp3

Jika sudah memahami Tag dan Atribut-nya Anda bisa mencoba menuliskan kode berikut dalan halaman blog menggunakan mode HTML dalam editor blog anda.
<audio controls="controls">
  <source src="http://xover3.jkt.3d.x.indowebster.com/download-vip/10/p16f7khggh1fhrhukl9r16941d627.mp3/Adele-SomeOneLikeYou-idlohulhaqDOTcom.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Bisa anda lihat, di dalam atribut src saya menuliskan lokasi file MP3 yang sebelumnya sudah saya upload ke sebuah file hosting (dalam hal ini adalah indowebster) dan saya juga sudah mendapatkan link absolut-nya
Karena file yang kita gunakan adalah file ber-extensi MP3 maka pada type kita tuliskan sebagai "audio/mpeg"
dan hasilnya akan terlihat seperti dibawah ini



Tambahan: Anda bisa menambahkan atribut loop dengan nilai loop pada Tag audio untuk mengulang secara otomatis file yang diputar lihat kode berikut
<audio controls="controls" loop="loop">
  <source src="http://xover3.jkt.3d.x.indowebster.com/download-vip/10/p16f7khggh1fhrhukl9r16941d627.mp3/Adele-SomeOneLikeYou-idlohulhaqDOTcom.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Bagaimana? mudah kan Menambah Audio ke Blog atau Web dengan HTML5? Jika Anda sudah berhasil, selamat! Atau jika belum berhasil, silahkan berkomentar atau bertanya.

2 komentar

nanya nih, selain indowebster ada gak?

saya luruskan pertanyaannya. "selain dari indowebster bisa tidak?"
itu yang lebih tepat. karena mau dari manapun file-nya asal itu link file audio bisa disisipkan dalam kode tersebut asal hosting-nya mendukung direct link untuk di-streaming.

ringkasnya "bisa"

Tinggalkan komentar dan ikutan mejeng di Recent Comments.
- Komentar dimoderasi untuk mencegah komentar spam dan double post. Jadi komentar tidak akan langsung muncul.
- Daftarkan nama di profil blogger agar tidak tampil Unknown.
- Jangan pernah menuliskan no. HP maupun e-mail, komentar akan dihapus/tidak di publikasikan demi keamanan anda sendiri.
- Lihat halaman kontak untuk berkomunikasi secara intens dengan penulis artikel.
Kamus EmoticonSembunyikan