Assalamualaikum Wr. Wb
Hallo men temen semuanyahhh, kabarnya sehat gak nih? semoga sehat ya. Kangen gak nih sama mimin wkwk. Oke tak perlu banyak basa basi ya.. Nah kali ini kita akan membahas tentang cara menyajikan komponen Audio dan juga Video di HTML ya gengs. Ini yang akan dibahas hari ini
> Memasukan Audio
> Memasukan Video
> Part Bonus (Karya mimin)
1. Memasukan Audio
Nih contoh codingannya ya
<!DOCTYPE html>
<html>
<head>
<title>Audio</title>
</head>
<body>
<p>Deen assalam</p>
<audio src="Bahan/Deen-assalam.mp3" controls></audio>
</body>
</html>
<html>
<head>
<title>Audio</title>
</head>
<body>
<p>Deen assalam</p>
<audio src="Bahan/Deen-assalam.mp3" controls></audio>
</body>
</html>
Jika di buka di browser maka akan tampil seperti ini:
Tg tag yang bisa digunakan pada audio:
> autoplay berfungsi agar audio otomatis di-play setelah siap untuk dimainkan
> controls berfungsi menampilkan tombol play,pause,volume, dll.
> loop berfungsi agar audio dimainkan berulang-ulang
> muted apakah audionya mau di-mute atau tidak
> preload (auto, metadata, none) apakah audionya load pada saat pagenya sedang diload?
Dan juga src menunjukkan URL dari audio yang akan dimainkan (yang ini tidak diperlukan kalau sudah ada <source>)
*note: Tiap browser berbeda beda tampilannya geng disini saya memakai chrome jadi tampilannya akan seperti gambar diatas tadi.
Mimin kasi contoh dari browser lain yaa
 |
| Browser Firefox |
 |
| Browser Edge |
 |
| Browser explorer |
Nah ternyata pas saya buka di browser internet Explorer itu tidak mendukung format pemutaran audio jadi akan muncul tulisan "Audio playback was aborted" ya geng
2. Memasukan Video
Sebenarnya dalam memasukan video hampir sama sih dengan musik. Mau tau apa bedanya yuk kita bahas gengs. Nih Codingannya:
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
<link rel="stylesheet" href="">
</head>
<body>
<center><h1><p>Video klip Ya maulana</p></h1></center>
<center><video src="Bahan/Ya maulana.mp4" controls width="480px"></video></center>
</body>
</html>
<html>
<head>
<title>Video</title>
<link rel="stylesheet" href="">
</head>
<body>
<center><h1><p>Video klip Ya maulana</p></h1></center>
<center><video src="Bahan/Ya maulana.mp4" controls width="480px"></video></center>
</body>
</html>
Jika dibuka di browser maka hasilnya akan:
Format video harus mp4 atau webM atau ogg (lagi, setiap browser mendukung format yang berbeda-beda)
Untuk properti, semuanya sama dengan untuk <audio>, hanya saja ada beberapa properti yang ada di <video> tapi tidak ada di <audio>
width & height untuk mendefiniskan lebar dan tinggi video
poster mendefinisikan URL gambar yang akan dimunculkan saat videonya sedang buffer, atau sebelum di-play oleh user
Kita coba ya di browser lain cekidot:
 |
| Browser edge |
 |
| Browser Explorer |
 |
| Browser Firefox |
Ternyata setelah dicoba bisa semua ya gengs.
3. Part Bonus
Nah disini mimin juga membuat sebuah karya yang berhubungan tentang audio dan video nih mau tau ini dia:
<!DOCTYPE html>
<html>
<head>
<title>Sabyan</title>
</head>
<body bgcolor="black">
<fieldset>
<font face="Tw Cen MT" color="white">
<center><h1><hr width="300" color="white">Sabyan Gambus <hr width="300" color="white"></h1></center>
<table border="0" cellspacing="7" align="center">
<tr>
<th><font size="+1">Video klip</th></font>
<td rowspan="3">
<center><font size="+2"><b>Profile</font></b></center>
<fieldset>
<img src="Bahan/sabyan.jpg" width="600px" height="320px" align="center" valign="top">
<p>Grup : Sabyan Gambus</p>
<p>Anggota :</p>
<ul>
<li>Nissa (Vokalis)</li>
<li>Anisa Rahman (Baking Vocal)</li>
<li>Ayus (Keyboard)</li>
<li>Sofwan (Kecrek)</li>
<li>Tebe (Biola)</li>
<li>Kamal (Perkusi)</li>
</ul>
Label rekaman : Sabyan music <br>
Channel youtube : Sabyan channel/Official sabyan gambus <br>
Genre : Religi,Pop,Gambus(Timur tengah) <br>
Terbentuk : Tahun 2017-sekarang <br>
</fieldset>
</td>
</tr>
<tr align="center" valign="top">
<td>
<fieldset>
<video src="Bahan/Ya maulana.mp4" controls width="360px" ></video>
<p>Lirik lagu Ya Maulana</p>
<div style="overflow:auto;width:360px;height:150px;padding:10px;border:1px solid #black">
Tidadari didadam <br>
Tidadari didadam<br>
Tidadari didadam<br>
Tidam...<br><br>
Dengan kasihmu ya Robbi<br>
Berkahi hidup ini<br>
Dengan cintamu ya Robbi<br>
Damaikan mati ini<br><br>
Saat salahku melangkah<br>
Gelap hati penuh dosa<br>
Beriku jalan berarah<br>
Temuimu di surga<br><br>
Terima sembah sujudku<br>
Terimalah doaku<br>
Terima sembah sujudku<br>
Izinkan ku bertaubat<br><br>
Maulana ya maulana<br>
Ya sami' duana<br>
Maulana ya maulana<br>
Ya sami' duana<br>
=>Diulang lagi ke awal<=
</div>
</fieldset>
</td>
</tr>
<tr align="left" valign="top">
<td>
<center><p><b>Cover</p></b></center>
<div style="overflow:auto;width:400px;height:100px;padding:10px;border:1px solid gray">
<p>Deen Assalam</p>
<audio src="Bahan/Deen-assalam.mp3" controls></audio>
<p>Ya Asyiqal</p>
<audio src="Bahan/Ya asyiqal.mp3" controls></audio>
<p>Ya Jamaluna</p>
<audio src="Bahan/Ya jamaluna.mp3" controls></audio>
<p>Ya Habibal Qolbi</p>
<audio src="Bahan/Ya habibal qolbi.mp3" controls></audio>
</div>
</td>
</tr>
<tr>
<td colspan="2"><center><hr color="white" width="300">Create by: Annisarhy ♥</td></center>
</tr>
</table>
</fieldset>
</font>
</body>
</html>
<html>
<head>
<title>Sabyan</title>
</head>
<body bgcolor="black">
<fieldset>
<font face="Tw Cen MT" color="white">
<center><h1><hr width="300" color="white">Sabyan Gambus <hr width="300" color="white"></h1></center>
<table border="0" cellspacing="7" align="center">
<tr>
<th><font size="+1">Video klip</th></font>
<td rowspan="3">
<center><font size="+2"><b>Profile</font></b></center>
<fieldset>
<img src="Bahan/sabyan.jpg" width="600px" height="320px" align="center" valign="top">
<p>Grup : Sabyan Gambus</p>
<p>Anggota :</p>
<ul>
<li>Nissa (Vokalis)</li>
<li>Anisa Rahman (Baking Vocal)</li>
<li>Ayus (Keyboard)</li>
<li>Sofwan (Kecrek)</li>
<li>Tebe (Biola)</li>
<li>Kamal (Perkusi)</li>
</ul>
Label rekaman : Sabyan music <br>
Channel youtube : Sabyan channel/Official sabyan gambus <br>
Genre : Religi,Pop,Gambus(Timur tengah) <br>
Terbentuk : Tahun 2017-sekarang <br>
</fieldset>
</td>
</tr>
<tr align="center" valign="top">
<td>
<fieldset>
<video src="Bahan/Ya maulana.mp4" controls width="360px" ></video>
<p>Lirik lagu Ya Maulana</p>
<div style="overflow:auto;width:360px;height:150px;padding:10px;border:1px solid #black">
Tidadari didadam <br>
Tidadari didadam<br>
Tidadari didadam<br>
Tidam...<br><br>
Dengan kasihmu ya Robbi<br>
Berkahi hidup ini<br>
Dengan cintamu ya Robbi<br>
Damaikan mati ini<br><br>
Saat salahku melangkah<br>
Gelap hati penuh dosa<br>
Beriku jalan berarah<br>
Temuimu di surga<br><br>
Terima sembah sujudku<br>
Terimalah doaku<br>
Terima sembah sujudku<br>
Izinkan ku bertaubat<br><br>
Maulana ya maulana<br>
Ya sami' duana<br>
Maulana ya maulana<br>
Ya sami' duana<br>
=>Diulang lagi ke awal<=
</div>
</fieldset>
</td>
</tr>
<tr align="left" valign="top">
<td>
<center><p><b>Cover</p></b></center>
<div style="overflow:auto;width:400px;height:100px;padding:10px;border:1px solid gray">
<p>Deen Assalam</p>
<audio src="Bahan/Deen-assalam.mp3" controls></audio>
<p>Ya Asyiqal</p>
<audio src="Bahan/Ya asyiqal.mp3" controls></audio>
<p>Ya Jamaluna</p>
<audio src="Bahan/Ya jamaluna.mp3" controls></audio>
<p>Ya Habibal Qolbi</p>
<audio src="Bahan/Ya habibal qolbi.mp3" controls></audio>
</div>
</td>
</tr>
<tr>
<td colspan="2"><center><hr color="white" width="300">Create by: Annisarhy ♥</td></center>
</tr>
</table>
</fieldset>
</font>
</body>
</html>
Hasilnya akan jadi:
Mimin juga masi belajar ya gengs jadi maklum lah bila hasilnya belum memuaskan, kita sama sama belajar yoook eaaa. Mungkin itu saja yang bisa dibahas di pertemuan kali ini, mohon maaf bila ada typo/salah kata karena mimin hanya manusia ya gengs. See you in the next time yuhu..
Jangan pernah malu,untuk selalu memperbaiki diri
0 Komentar