Selasa, Maret 26, 2019

Belajar HTML (19): Menyematkan File Multimedia pada Halaman Web

HTML Tutorial Web

Kalau sebelumnya kemaren kita buat teks yang bisa berjalan menggunakan marquee, kali ini kita akan memasukkan file multimedia ke dalam halaman web. Masih tetap dalam bahasa standar web yaitu HTML.

Tidak semua file multimedia yang akan kita sematkan di halaman web. Kita hanya akan mencoba tutorial untuk 2 jenis file multimedia saja, yaitu audio dan video. Teknologi yang digunakan adalah HTML5.

Bagaimana ceritanya? Tentu Anda pasti pernah mendapati sebuah web yang ketika dibuka memperdengarkan suara, entah apapun itu suaranya. Biasanya sih berupa lagu atau apa lah begitu. Terkadang kita lihat ada player atau pemutar lagu tersebut, kadang tidak ada. Ada juga yang tidak diputar sebelum kita klik tombol play. Paling banyak adalah yang ketika web diakses langsung memutar suara secara otomatis. Demikian juga dengan video, sama.

Audio

Untuk memuat dan memutar file audio, kita gunakan tag <audio> dengan struktur dasar seperti ini:

<audio>
   <source src="nama_file_audio.ext">
</audio>

Nah pada tag <audio> ini ada beberapa atribut yang bisa digunakan, saya masukkan 3 saja. Lihat tabel.

Atribut Keterangan
controls untuk menampilkan playernya
loop mengaktifkan pengulangan jika durasi audio sudah berakhir
autoplay langsung memutar audio secara otomatis tanpa mengklik tombol play

Ayo kita coba latihannya, buat file baru menggunakan editor kesayangan Anda, atau bisa juga dengan melakukan save-as dari file-file latihan sebelumnya.

Simpan dulu filenya dengan nama 44-html-audio.html, kemudian sesuaikan kodenya agar menjadi seperti di bawah ini:

<!DOCTYPE html>
<html>
<head>
   <title>Audio</title>
</head>
<body>
   <h2>Memutar file audio</h2>
   <audio controls>
      <source src="habib_syech_almadad.mp3">
      Browser Anda tidak mendukung audio.
   </audio>
</body>
</html>

Sebelum dicoba, pastikan dulu file audionya ada ya, dan diletakkan pada folder yang sama dengan file latihan ini. Silakan ganti nama file audionya sesuai yang Anda punya. Setelah dijalankan hasilnya akan menampilkan player, klik tombol play dan dengarkan audionya 😎

Tampilan hasilnya punya saya seperti gambar-gambar berikut ini, saya gunakan 4 browser agar bisa dilihat perbedaan playernya.

Selanjutnya →

Halaman : 1 2 3

Mari sebarkan manfaat kepada orang lain...

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *