Menambahkan Audio Pada HTML

Belajar Web Design

Assalamualaikum Wr. Wb.
Sahabat Webhozz dimanapun berada, semoga sehat selalu ya, amin.

Oke pada kesempatan kali ini kita akan belajar memasang audio pada html.

Jadi, kita bisa memutar audio pada website. Selain itu, dilengkapi juga dengan controlnya.

Controlnya, seperti tombol pause, play, info durasi, bahkan setting volume suaranya.

Nah, penasaran gimana caranya??? Yuk kita coba sama-sama.

  1. Silahkan buat file html terlebih dahulu. Lalu ketikkan script html dasar seperti biasanya.
<!DOCTYPE html>
<html>
<head>
	<title>Audio pada HTML</title>
</head>
<body>

	<h1>Audio pada HTML</h1>

</body>
</html>

2. Siapkan file audio yang akan dimasukkan. Dan pastikan file tersebut satu folder dengan file html yang sudah kita siapkan.

3. Setelah tag , ketikkan script pemanggil audio sebagai berikut.

<audio controls>
	<source src="musik.mp3" type="audio/mp3">
</audio>

4. Ini kode keseluruhan.

<!DOCTYPE html>
<html>
<head>
	<title>Audio pada HTML</title>
</head>
<body>

	<h1>Audio pada HTML</h1>

	<audio controls>
		<source src="musik.mp3" type="audio/mp3">
	</audio>

</body>
</html>

5. Maka seperti inilah saat di browser. Ini adalah saat audio belum dimainkan.

6. Dan ini adalah kondisi saat audio sudah dimainkan.

Nah mudah bukan???

GIMANA SIH CARA KERJANYA???

  1. Tag <audio></audio>, itu berfungsi untuk membuat tag pemutar audio.
  2. Atribut controls, berfungsi untuk membuat kontrol pada pemutar audionya, seperti tombol pause, play, info durasi, bahkan setting volume suaranya.
  3. Tag <source> di antara tag <audio></audio>, dilengkapi dengan atribut src dan type yang berfungsi untuk memanggil file audionya beserta format audio.
  4. Sangat mendukung untuk file dengan format .mp3, .wav, .ogg.

Demikianlah postingan kita kali ini. Selamat mencoba dan Semoga bermanfaat ya, amin.

Wassalamualaikum Wr. Wb.

No related posts.