Belajar HTML Untuk Pemula Level 8


Halo sobat lautan, semoga sehat selalu ya. 
Kali ini lautan akan kembali membahas bahasa pemrograman website dasar, HTML. Sebuah bahasa website yang digunakan untuk membuat struktur website. Kita akan belajar mengenai Audio dan Video Element. Ya, lautan sebelumnya berharap anda memahami materi sebelumnya tentang Image Element. Bila anda belum mengerti sekali, anda dapat membaca artikel sebelumnya.


Pada awalnya, HTML hanya digunakan untuk tiga konten saja, yakni, teks, gambar, dan tabel. Namun perkembangan zaman telah memaksa HTML untuk lebih kreatif. Lebih kreatif dalam menampilkan tampilan web yang lebih bersifat multimedia guna menarik perhatian pengunjung. Sebelum kehadiran HTML5, untuk menjalankan file multimedia, web browser harus bergantung pada aplikasi pihak ketiga seperti adobe flash, jika tidak maka video yang hendak di putar tidak akan berjalan.

Keterbatasan ini mendorong badan tertinggi, W3C dan WHATWG untuk menyediakan tag <audio> dan tag <video>. Artikel ini akan membahas tentang Audio element, dengan atribut-atributnya. Contoh atribut sepert, Src, Controls, Autoplay, Loop, Mute, Preload.

Audio Element

Berikut cara penggunaan tag <audio>

<audio src="lagu.mp3"></audio>

Penulisan tag <audio> mirip dengan penulisan tag <img>. Jika anda coba menampilkannya, maka web browser tidak akan menampilkan apa-apa.

Atribut Src

Atribut ini digunakan untuk penunjuk lokasi file audio. File audio harus berada dalam folder yang sama dengan file HTML yang dibuat. Namun anda dapat membuat file audio dimana saja, dan mengaksesnya dengan memahami alamat relatif maupun alamat absolut.

Atribut Controls

Berikut adalah contoh skrip penggunaannya

<html>
<head>
<title>Belajar Audio Element</title>
</head>
<body>
<audio src="lagu.mp3" controls></audio>
</body>
</html>

Atribut ini berfungsi untuk menampilkan tombol control pada audio player, yakni tombol play/stop, slider, volume, timer, dll. Berikut adalah contoh hasilnya


Atribut Autoplay

Contoh penggunaan

<audio src="lagu.mp3" controls autoplay></audio>

Jika kode dijalankan, maka halaman web akan langsung memperdengarkan audionya. Namun apabila anda membuatnya tanpa atribut controls, maka halaman web akan memperdengarkan audio tanpa bisa kita menghentikannya. 

Atribut Loop

Atribut ini dapat memungkinkan audio untuk diputar dari awal lagi setelah selesai

Contoh penggunaan 

<audio src="lagu.mp3" loop controls></audio>

Atribut Mute

HTML menyediakan atribut untuk menjalankan audio dengan volume = 0. Contoh penggunaannya

<audio src="lagu.mp3" controls autoplay muted></audio>

Atribut Preload

Digunakan untuk mengatur cara web browser mendownload file audio ketika halaman web dijalankan. Atau dengan kata lain web browser mem-buffer file audio tersebut. Ada tiga nilai untuk atribut preload ini. 

Pertama, atribut preload="auto". Dapat memungkinkan web browser untuk mencoba mendownload seluruh file audio pada saat web ditampilkan pertama kali, terlepas apakah file audio tersebut di putar atau tidak. Hal ini sebaiknya kita gunakan apabila kita yakin pengguna akan memutar file tersebut. Karena jika halaman web di tampilkan berkali-kali, maka proses download langsung berjalan berkali-kali pula. Hal ini juga akan mengurangi kapasitas bandwidth

Kedua, atribut preload="none" akan memberikan isyarat pada web browser untuk tidak membuffer file audio hingga tombol play di klik. Metode ini cocok digunakan apabila kemungkinan besar file audio tidak akan dijalankan pengguna. Ini akan menghemat bandwidth.

Ketiga, atribut preload="meta". Atribut ini memberikan instruksi web browser untuk mendownload sedikit file audio pada saat halaman di tampilkan, hal ini cukup untuk mendapatkan informasi mengenai file tersebut. Dari hal itu, web browser bisa mengetahui dan menampilkan panjang durasi file audio, ketika halaman di load. Proses buffering sendiri akan berjalan pada saat kita men-klik tombol play.

<html>
<head>
<title>Belajar Audio Element</title>
</head>
<body>
<p>Tag audio atribut preload auto </p>
<audio src="lagu.mp3" controls preload="auto"></audio>
<hr>
<p>Tag audio atribut preload none </p>
<audio src="lagu.mp3" controls preload="none"></audio>
<hr>
<p>Tag audio atribut preload meta </p>
<audio src="lagu.mp3" controls preload="meta"></audio>
</body>
</html>

Ya, cukup sekian dulu pelajaran kali. Esok akan kita sambung dengan mengenal format audio. Semoga bermanfaat

Post a Comment

2 Comments