Hallo temen temen, kali ini kita akan belajar menambahkan audio html. Audio merupakan element penting setelah video. Beberapa website seperti kursus online bahasa inggris, penyedia lagu-lagu online. tentunya perlu meletakan audio sebagai core konten nya. Secar umum ada tiga jenis file-file audio yang bisa di play yaitu audio digital, file music dan tex to speech. Selain itu, kita juga bisa menambahkan inline audio pada sebuah website.
Dulu sebelum adanya HTML 5, audio di html ditambahkan dengan program external seperti flash player. Untuk memberikan file video kita bisa menggunakan tag <audio>.
Untuk lebih lengkapnya seperti dibawah ini
Sebelum kalian mencobanya, buat yang kalian yang belum memiliki audio kalian bisa download audio nya di bendsound . Jika sudah kalian bisa mulai mencoba kode dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Audio di HTML</title>
</head>
<body>
<audio controls>
<source src="bensound-memories.mp3" type="audio/mpeg">
Browser anda tidak mendukung tag audio
</audio>
</body>
</html>
Disini filenya saya letakan di sejajar dengan file index.html.
Atribut Untuk Tag Audio Html
Seperti yang sudah kita singgung sebelumnya tag audio memiliki beberapa atribut khusus dan pendukungnya.
1. Controls
Seperti namanya digunakan untuk menampilkan atau mengaktifkan tombol control audio yang sudah defaultnya yaitu ada play, pause, stop, volume, dan minute scroll. Atribut ini memiliki nilai boolean yaitu false dan true, jika kalian menggunakan atribut ini defaultnya adalah true. Sehingga jika false bisa kita definisikan atau kita hilangkan atribut ini.
Contohnya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Audio di HTML</title>
</head>
<body>
<audio controls="true">
<source src="bensound-memories.mp3" type="audio/mpeg">
Browser anda tidak mendukung tag audio
</audio>
</body>
</html>Atau
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Audio di HTML</title>
</head>
<body>
<audio control>
<source src="bensound-memories.mp3" type="audio/mpeg">
Browser anda tidak mendukung tag audio
</audio>
</body>
</html>
2. Atribut autoplay
Atribut ini berguna jika kita menginginkan videnya berputar secara otomatis. Atribut ini memiliki dua nilai yaitu true dan false. Jika nilai yang dimasukkan true maka file audio akan diputar secara otomatis, sedangkan jika false maka tidak diputar secara otomatis.
Pendefinisianya sama dengan atribut controls dan juga penulisannya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Audio di HTML</title>
</head>
<body>
<audio controls="true" autoplay="true">
<source src="bensound-memories.mp3" type="audio/mpeg">
Browser anda tidak mendukung tag audio
</audio>
</body>
</html>Atau
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Audio di HTML</title>
</head>
<body>
<audio controls="true" autoplay>
<source src="bensound-memories.mp3" type="audio/mpeg">
Browser anda tidak mendukung tag audio
</audio>
</body>
</html>Buat temen temen yang gagal atau videonya tidak berputar secara otomatis ketika direload. Kemungkinan memang saat ini atribut autoplay tidak bekerja di google chrome karena ada beberapa kebijakan baru. Coba kalian jalanya pada browser seperti Mozilla Firefox, Microsoft Edge, dan lainnya
3. Atribut Loop
Atribut ini berfungsi untuk melooping atau mengulang ulang audio kita seperti di tag video tulisan saya sebelum ini.
Nilai yang bisa kita berikan adalah true dan false.
Contoh penulisannya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Audio di HTML</title>
</head>
<body>
<audio controls loop="true">
<source src="bensound-memories.mp3" type="audio/mpeg">
Browser anda tidak mendukung tag audio
</audio>
</body>
</html>Atau
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Audio di HTML</title>
</head>
<body>
<audio controls loop>
<source src="bensound-memories.mp3" type="audio/mpeg">
Browser anda tidak mendukung tag audio
</audio>
</body>
</html>
4. Atribut muted
Atribut muted digunakan untuk mensenyapkan audio. Jadi ketika atribut ini ditambahkan maka secara default volume dari file audio yang diputar beralih ke mode senyap. Memiliki nilai boolean, true dan false.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Audio di HTML</title>
</head>
<body>
<audio controls muted>
<source src="bensound-memories.mp3" type="audio/mpeg">
Browser anda tidak mendukung tag audio
</audio>
</body>
</html>Atau
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Audio di HTML</title>
</head>
<body>
<audio controls muted="true">
<source src="bensound-memories.mp3" type="audio/mpeg">
Browser anda tidak mendukung tag audio
</audio>
</body>
</html>5. Atribut Src
Seperti halnya tag <img/>tag src yang di audio ini juga sama yaitu untuk menentukan alamat lokasi atau sumber dari beberapa file media. Dipenulisan kita tadi kita meletakan atribut src di tag <source>, sebenarnya atribut src ini bisa kita berikan langsung di tag audio. Nah sekarang muncul pertanyaan pasti. Perbedaanya apa ?
Perbedaaya adalah ketika kita menggunakan tag <source> kita bisa menambahkan beberapa jenis format audio. yang mana ini akan membuat browser lebih leluasa untuk memilih file mana yang dapat diputar. contoh penggunaanya seperti ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Audio di HTML</title>
</head>
<body>
<audio controls>
<source src="bensound-memories.mp3" type="audio/mpeg">
<source src="bensound-memories.mp3" type="audio/wav">
<source src="bensound-memories.mp3" type="audio/aac">
<source src="bensound-memories.mp3" type="audio/ogg">
</audio>
</body>
</html>Jika kalian coba maka hasilnya akan tetap sama hanya satu file yang ditampilkan.
Format File Audio yang didukung HTML 5
| Format Container MIME type | ||||||||||
| PCM WAV audio/wav | ||||||||||
| MP3 MP3 audio/mpeg | ||||||||||
| AAC MP4 audio/mp4 | ||||||||||
| AAC AAC audio/aac | ||||||||||
| AAC AAC audio/aacp | ||||||||||
| Vorbis Ogg audio/ogg | ||||||||||
| Vorbis WebM audio/webm | ||||||||||
| Opus Ogg audio/ogg | ||||||||||
| Opus WebM audio/webm | ||||||||||
| FLAC FLAC audio/flac | ||||||||||
| FLAC Ogg audio/ogg |
Nah sampai sejauh ini kita sudah mempelajari banyak tag di html. Ini adalah tutorial terakhir dari mimin. Selanjutnya kalian bisa belajar css, javascript, dan php. Semangat terus belajarnya tunggu tutorial lainnya dari saya terimakasih.
