Tutorial Belajar HTML 18 : Menambahkan Audio pada HTML
Menambahkan Audio pada HTML – Di
beberapa kasus, ada blog atau web yang memperdengarkan pengunjungnya musik atau
berupa siaran radio. Dan beberapa pengunjung juga ada yang suka dan tidak suka.
Tapi ini hanya optional saja, blog kita tidak harus menambahkan suara berupa
music atau yang lainnya.
Menambahkan File Audio atau Suara pada HTML
Pada pembahasan kali ini adalah
tentang bagaimana cara menambahkan file audio dengan html. Sebelum lanjut, ada
beberapa poin yang akan dibahas yaitu format file audio apa saja yang bisa kita
gunakan, atribut tambahannya apa saja dan browser apa saja yang mendukung tambahan
audio di html.
Dan sebelum lanjut ke poin yang akan
di bahas, setiap kita akan menambahkan objek baru ke dalam dokumen html kita harus
mendefinisikan terlebih dahulu objek yang akan kita tambahkan. Dalam hal ini adalah
audio, dalam menambahkan audio sendiri itu di definisikan dengan tag <audio>
dan </audio>. Adapun cara penggunaannya akan di uraikan secara detail
setiap poin yang akan di bahas.
Format Audio yang mendukung
Tidak semua format file audio bisa
digunakan di html. Dari sekian banyak alasan, salah satunya adalah ada beberapa
format file audio yang tidak mendukung di browser. Oleh karenanya, format file audio
yang di dukung itu ada 3 atau mungkin lebih. Tapi yang sangat recomended adalah
ada 3 format file audio yaitu mp3, ogg dan wav. Jadi contohnya file tersebut nanti
akan jadi seperti suarakucing.mp3, suaraguguk.ogg atau suaraayam.wav.
Attribut tambahan
Tag <audio> tidak akan
berdiri sendiri untuk bisa menampilkan file audio di dalam dokumen. Jadi tag
<audio> akan memiliki attribut tambahan. Apa saja attribut tambahan
tersebut? Berikut uraiannya
- attribut control = berfungsi
untuk mengontrol pemutaran audio seperti play, pause, mempercepat dan juga mengatur
volume. Perhatikan baris kode berikut ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Belajar HTML</title>
</head>
<body>
<audio controls>
</audio>
</body>
</html>
- attribut autoplay = untuk yang
ini sudah paham ya, jadi saat halaman web di buka maka file audio akan langsung
memutar dengan sendirinya tanpa ada kontrol. Perhatikan baris kode berikut ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Belajar HTML</title>
</head>
<body>
<audio controls autoplay>
</audio>
</body>
</html>
- attribut loop = sesuai namanya
yaitu dia akan terus mengulang file audio yang kita tambahkan namun tetap harus
di play terlebih dahulu alias tidak autoplay. Perhatikan baris kode berikut ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Belajar HTML</title>
</head>
<body>
<audio controls loop>
</audio>
</body>
</html>
- attribut muted = efek dari attribut
ini adalah dia akan automuted (autoredam / tak bersuara). Saat halaman web di
buka, objek audio akan langsung tak bersuara. Perhatikan baris kode berikut ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Belajar HTML</title>
</head>
<body>
<audio controls muted>
</audio>
</body>
</html>
- attribut src = digunakan untuk
mengambil sumber file yang akan kita tambahkan ke dokumen html kita. Perhatikan
baris kode berikut
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Belajar HTML</title>
</head>
<body>
<source src="music.mp3">
</body>
</html>Browser yang mendukung
Tag <audio> sendiri
mendukung di 5 browser yaitu firefox, chrome, IE (internet explorer), safari dan
opera. Adapun untuk format file audionya perhatikan tabel berikut ini
Browser
|
MP3
|
WAV
|
OGG
|
Firefox
|
Mendukung
|
Mendukung
|
Mendukung
|
Chrome
|
Mendukung
|
Mendukung
|
Mendukung
|
IE
|
Mendukung
|
Tidak
|
Tidak
|
Safari
|
Mendukung
|
Mendukung
|
Tidak
|
Opera
|
Mendukung
|
Mendukung
|
Mendukung
|