Anak Males – Kali ini kita akan mencoba menampilkan audio di dalam html. Gimana caranya ? Makanya simak tutorial html berikut ini.
Seperti sebelumnya, Isi dari situs web tidak hanya terdiri dari teks dan gambar, tetapi juga dapat berupa media seperti audio dan video.
Dalam tutorial ini, kita akan mengulas tentang cara menambahkan audio ke HTML. Konten audio biasanya merupakan podcast, audiobook, atau musik. Jadi, bagaimana cara menambahkan audio ke HTML?
Mari kita bahas…
Cara Menambahkan Audio HTML
Untuk menambahkan audio ke halaman HTML, gunakan elemen <audio>. Anda bisa menggunakan atribut src untuk menentukan file audio yang akan dimainkan. Anda juga dapat menambahkan kontrol audio menggunakan atribut controls, seperti ini:
<audio src="audio.mp3" controls></audio>
Jika Anda ingin menambahkan audio ke halaman tanpa menampilkan kontrol audio, Anda dapat menggunakan elemen <audio> tanpa atribut controls. Kemudian, Anda dapat mengontrol audio dengan JavaScript.
<audio id="myAudio" src="audio.mp3"></audio>
Untuk memutar audio, gunakan perintah play() pada elemen audio:
var audio = document.getElementById("myAudio");
audio.play();
Untuk menghentikan audio, gunakan perintah pause():
var audio = document.getElementById("myAudio");
audio.pause();
Anda juga dapat menggunakan atribut loop untuk memutar audio secara berulang-ulang:
<audio src="audio.mp3" controls loop></audio>
Selain itu, Anda dapat menggunakan atribut autoplay untuk memutar audio secara otomatis saat halaman dimuat:
<audio src="audio.mp3" controls autoplay></audio>
Kita bahas selengkapnya dibawah.
Macam Macam Format Audio Yang Didukung
Beberapa format audio yang biasa didukung oleh browser adalah:
- MP3: format audio yang sangat populer dan sering digunakan di internet. MP3 merupakan format kompresi yang mengurangi ukuran file audio tanpa mengurangi kualitas suara yang signifikan.
- WAV: format audio yang tidak dikompresi yang biasa digunakan untuk menyimpan suara dengan kualitas yang tinggi. Walaupun ukurannya lebih besar daripada MP3, WAV sering digunakan untuk menyimpan suara yang tidak dapat dikompresi dengan baik, seperti suara musik instrumen.
- OGG: format audio yang dikembangkan oleh The Xiph.Org Foundation yang biasa digunakan untuk menyimpan suara dengan kualitas yang tinggi dengan ukuran file yang lebih kecil daripada WAV.
- M4A: format audio yang biasa digunakan untuk menyimpan suara di perangkat seluler, seperti iPhone. M4A merupakan format yang dikompresi dengan baik sehingga ukurannya lebih kecil daripada MP3 dengan kualitas suara yang sama.
Sebagian besar browser saat ini mendukung format MP3, WAV, dan OGG. Beberapa browser juga mendukung format M4A. Jadi, jika Anda ingin memastikan bahwa audio Anda dapat dimainkan di semua browser, disarankan untuk menyediakan file audio dalam beberapa format yang berbeda.
Macam Macam Atribut Audio HTML
Tag <audio> memiliki beberapa atribut yang sering digunakan dalam penambahan audio ke HTML, seperti src, controls, loop, dan preload.
1. Atribut Controls
Atribut controls pada elemen <audio> di HTML digunakan untuk menampilkan kontrol audio pada halaman web. Kontrol audio biasanya berisi tombol play/pause, tombol volume, dan slider seek (untuk mengatur posisi audio saat ini).
Dengan menambahkan atribut controls, Anda dapat memberikan akses ke kontrol audio kepada pengunjung situs Anda, sehingga mereka dapat memutar, menghentikan, atau mengatur volume audio sesuai keinginan mereka.
Contoh penggunaan atribut controls adalah seperti ini:
<audio src="audio.mp3" controls></audio>
Dengan atribut controls, kontrol audio akan muncul di halaman web Anda dan pengunjung situs dapat mengontrol audio dengan menggunakan kontrol tersebut.
Jika Anda tidak ingin menampilkan kontrol audio, Anda bisa menghilangkan atribut controls dari elemen <audio>. Anda juga dapat mengontrol audio dengan JavaScript tanpa menampilkan kontrol audio di halaman web.
2. Atribut Autoplay
Atribut autoplay pada elemen <audio> di HTML digunakan untuk memutar audio secara otomatis saat halaman web dimuat. Ini bisa sangat berguna jika Anda ingin memutar audio saat halaman dimuat tanpa harus menunggu pengunjung situs menekan tombol play.
Contoh penggunaan atribut autoplay adalah seperti ini:
<audio src="audio.mp3" controls autoplay></audio>
Dengan atribut autoplay, audio akan dimulai secara otomatis saat halaman web dimuat. Perhatikan bahwa atribut autoplay tidak akan bekerja jika browser mengizinkan audio untuk dimainkan secara otomatis.
Beberapa browser mungkin memblokir audio yang dimainkan secara otomatis untuk menghemat data atau untuk mencegah audio yang tidak diinginkan terputar secara otomatis.
Jadi, pastikan untuk menyediakan kontrol audio yang memungkinkan pengunjung situs untuk memutar atau menghentikan audio sesuai keinginan mereka.
3. Atribut Loop
Atribut loop pada elemen <audio> di HTML digunakan untuk memutar audio secara berulang-ulang. Ini bisa sangat berguna jika Anda ingin memutar audio secara terus-menerus tanpa harus menunggu pengunjung situs menekan tombol play kembali setelah audio selesai dimainkan.
Contoh penggunaan atribut loop adalah seperti ini:
<audio src="audio.mp3" controls loop></audio>
Dengan atribut loop, audio akan dimulai kembali setelah selesai dimainkan. Jika Anda juga menambahkan atribut autoplay, audio akan dimulai dan terus dimainkan secara berulang-ulang saat halaman web dimuat.
Perhatikan bahwa atribut loop hanya akan bekerja jika atribut controls juga ditambahkan. Jadi, pastikan untuk menyediakan kontrol audio yang memungkinkan pengunjung situs untuk memutar atau menghentikan audio sesuai keinginan mereka.
4. Atribut Muted
Atribut muted pada elemen <audio> di HTML digunakan untuk menonaktifkan suara audio saat dimainkan. Ini bisa sangat berguna jika Anda ingin memutar audio tanpa mengeluarkan suara, atau jika Anda ingin menonaktifkan suara audio secara sementara.
Contoh penggunaan atribut muted adalah seperti ini:
<audio src="audio.mp3" controls muted></audio>
Dengan atribut muted, audio akan dimainkan tanpa suara saat halaman web dimuat. Anda juga dapat menggunakan JavaScript untuk mengaktifkan atau menonaktifkan suara audio sesuai keinginan:
var audio = document.getElementById("myAudio");
audio.muted = true; // menonaktifkan suara
audio.muted = false; // mengaktifkan suara
Perhatikan bahwa atribut muted hanya akan bekerja jika atribut controls juga ditambahkan. Jadi, pastikan untuk menyediakan kontrol audio yang memungkinkan pengunjung situs untuk mengontrol suara audio sesuai keinginan mereka.
Cara Membuat Audio Sebagai Background
Untuk membuat audio sebagai background di halaman HTML, Anda dapat menggunakan elemen <audio> dengan atribut autoplay dan loop. Selain itu, Anda juga dapat menggunakan JavaScript untuk mengontrol audio. Berikut adalah contoh cara membuat audio sebagai background di halaman HTML:
1. Tambahkan elemen <audio> ke halaman HTML Anda dengan atribut autoplay dan loop:
<audio id="bgAudio" src="bg.mp3" autoplay loop></audio>
2. Tambahkan kode JavaScript untuk mengontrol audio:
var audio = document.getElementById("bgAudio");
// memutar audio
function playAudio() {
audio.play();
}
// menghentikan audio
function pauseAudio() {
audio.pause();
}
3. Tambahkan tombol atau elemen lain yang dapat digunakan untuk memutar atau menghentikan audio. Anda dapat menggunakan event listener untuk menjalankan fungsi playAudio() atau pauseAudio() sesuai kebutuhan:
<button onclick="playAudio()">Play</button>
<button onclick="pauseAudio()">Pause</button>
Dengan cara ini, Anda dapat membuat audio sebagai background di halaman HTML dan mengontrolnya dengan tombol atau elemen lain yang tersedia.
Perhatikan bahwa beberapa browser mungkin memblokir audio yang dimainkan secara otomatis untuk menghemat data atau untuk mencegah audio yang tidak diinginkan terputar secara otomatis.
Jadi, pastikan untuk menyediakan kontrol audio yang memungkinkan pengunjung situs untuk memutar atau menghentikan audio sesuai keinginan mereka.
Penutup
Elemen <audio> di HTML memungkinkan Anda untuk menambahkan audio ke halaman web dan mengontrolnya dengan menggunakan atribut seperti autoplay, loop, dan muted, atau dengan menggunakan JavaScript.
Audio dapat digunakan untuk memberikan suara tambahan pada halaman web, seperti musik latar atau suara efek, atau untuk memutar file audio yang tersimpan di server. Dengan demikian, elemen <audio> merupakan fitur yang berguna untuk membuat halaman web yang lebih interaktif dan menarik.
Sampai jumpa di tutorial html lainnya.