Cara pasang audio dan video di web / blog dengan kode HTML

Audio atau musik bisa berupa lagu dengan format mp3, ogg, dll, serta Video baik mp4 maupun 3gp dapat dipasang di blog atau website dengan menggunakan tag kode html.

Layaknya pemutar musik di smarthpone, pada web / blog juga dapat memainkan lagu yang dapat di-play, di-stop, atau di-pause oleh pengunjung.

Sedangkan untuk video meski saat ini Blogger cenderung memasang video dari Youtube maupun Facebook namun adakalanya diperlukan juga memasang video sendiri secara manual.

Asik-kan bisa pasang itu, jadi mendapat hiburan plus-plus, hiburan dari ngeblog dan juga dari mendengarkan musik, apalagi ditambah pasang TV online dan Game online juga di blog biar seperti dirumah, wkwk.

Sebetulnya ini hanya koleksi saja buat postingan blog ini tapi buat pengunjung yang tertarik bisa juga mencobanya dan berikut ini kodenya.

Element Tag HTML Audio

Elemen kode aslinya/default seperti ini:

<audio controls>

  <source src="horse.ogg" type="audio/ogg">

  <source src="horse.mp3" type="audio/mpeg">

  Your browser does not support the audio element.

</audio>

Tapi berhubung audio format .ogg jarang dipakai dan lebih sering menggunakan format .mp3 maka kode htmlnya kita pangkas saja disederhanakan.

Demikian juga dengan notifikasi: "Your browser does not support the audio element.", kita buang juga sebab semua browser sepertinya rata-rata sudah mendukung memutar audio jadi tidak memerlukan notifikasi itu lagi.

Setelah disederhanakan jadilah seperti ini:

<audio controls>

  <source src="isi-dengan-url-lagu-mp3-disini" type="audio/mpeg">

</audio>

Dan setelah di-isi url mp3 menjadi seperti berikut:

<audio controls>

<source src="https://ia802803.us.archive.org/16/items/SuryaChildrenChoirMerpatiChoirIndonesiaRaya/Surya%20Children%20Choir%20%26%20Merpati%20Choir%20-%20Indonesia%20Raya.mp3" type="audio/mpeg">

</audio>

Hasilnya:

Tag Kode Html diatas sudah selesai dan dapat langsung dipasang di blog namun masih mode manual yang jika ingin memutar musiknya perlu di play manual.

Dan agar memutar musik secara otomatis perlu di-tambah lagi dengan attribute lain, pada bagian ininya:

autoplay: otomatis memainkan audio.

<audio controls autoplay>

loop: memainkan audio terus-menerus.

<audio controls loop>

muted: 

<audio controls muted>

preload:

<audio controls preload>

Tapi pada dasarnya attribute loop, muted dan preload tidak begitu diperlukan sebab semuanya sudah terwakilkan oleh kode defaultnya, cukup memasang begini saja maka otomatis dapat di "mute" dan juga memainkan audio terus menerus meski tak memasang attribute "loop".

Saya rasa cukup pasang begini saja.

<audio controls autoplay>

  <source src="isi-dengan-url-lagu-mp3-disini" type="audio/mpeg">

</audio>

Element Tag HTML Video

Contoh kode beserta poster/thumbnail:

<video width="320" height="240" poster="/images/w3schools_green.jpg" controls>

   <source src="movie.mp4" type="video/mp4">

   <source src="movie.ogg" type="video/ogg">

   Your browser does not support the video tag.

</video>

Untuk Attributenya sama persis dengan kode Audio. Tapi khusus Element Tag video ini sepertinya ada secara otomatis tampil di Blogger jika kita mengunggah video di Blogger jadi tidak perlu repot lagi memasang itu secara manual kecuali untuk situs wap/web selain Blogger

Selesai dan yang tersulit disini mungkin url lagunya harus mengambilnya darimana. Tidak seperti video yang sudah disediakan tempatnya dapat diunggah langsung di Blogger, kalau punya website pribadi mungkin mudah upload lagu dng url publik, tapi kalau mengunggah lagu dilayanan pihak lain pasti bakal dipersulit untuk meminjam urlnya karena berkaitan dengan hak cipta.

Namun sepertinya masih ada salah satu situs tempat upload berbagai file seperti mp3, video, ebook, dll yang masih bisa dibilang longgar peraturannya karena non-profit katanya dan yang paling penting url filenya type publik yang diperbolehkan dipakai siapapun dan kita juga diperbolehkan mengunggah disana atau pakai saja sesuatu yang sudah ada disana di situs web www.archive.org.