Cara menggunakan autoplay audio html

Question

Tahukah kalian selain teks dan gambar, yang namanya konten website juga dapat berupa audio. Dalam dunia digital yang perkembangannya semakin pesat ini banyak sekali bermunculan konten audio seperti musik, audiobook, hingga yang sedang trend saat ini yaitu podcast.

Table of Contents Show

Menambahkan Audio di HTML
Atribut Untuk Tag <audio>
Atribut controls
Atribut autoplay
Atribut loop
Atribut muted
Atribut preload
Atribut src
Mengenal Tag <source>
Format File Audio yang Didukung HTML 5
Apa elemen HTML yang benar untuk memutar file audio?
Tag apa yang digunakan untuk menyisipkan audio kedalam dokumen HTML?

Semua konten audio tersebut sangat memungkinkan bisa diputar melalui web browser.

Lantas, bagaimana caranya?

Simak pembahasan berikut 🙂

Menambahkan Audio di HTML

Dahulu sebelum dikembangkannya HTML menjadi HTML 5, para pengguna yang ingin menikmati audio diwajibkan untuk menginstal software eksternal seperti flash player.

Namun sekarang kita tidak memerlukan hal itu, karena dalam HTML 5 sudah tersedia tag tersendiri untuk memutar audio, yaitu dengan menggunakan tag <audio>.

Tag <audio> digunakan untuk membuat atau menambahkan audio player di browser.

Untuk lebih lengkapnya perhatikan gambar di bawah ini.

Sebelum mencoba untuk menerapkan kalian bisa download dulu audionya di sini Bensound.

Buka teks editor, tulis kode di bawah ini, dan simpan dengan nama index.html.


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Audio HTML 5</title>
</head>
<body>
	<h1>Tutorial Audio di HTML 5</h1>
	<audio controls>
		<source src="creativeminds.mp3" type="audio/mpeg" />
	</audio>
</body>
</html>

Untuk file audionya saya rename menjadi creativeminds.mp3 dan pastikan file index.html beserta file audio terletak satu folder agar mudah untuk menentukan alamat filenya.

Hasilnya,

Atribut Untuk Tag <audio>

Ada 6 atribut yang dapat digunakan untuk mengatur tag <audio>, antara lain:

Atribut controls

Atribut controls digunakan untuk menampilkan atau mengaktifkan tombol kontrol audio seperti tombol play, pause, stop, volume, dan minute scroll.

Karena nilai atribut controls berupa nilai boolean maka kita dapat mendefinisikannya dengan dua cara yaitu seperti di bawah ini.


<audio controls>
    <source src="creativeminds.mp3" type="audio/mpeg">
</audio>

<!-- Atau -->

<audio controls="true">
    <source src="creativeminds.mp3" type="audio/mpeg">
</audio>

Hasilnya akan sama saja.

Atribut autoplay

Atribut autoplay akan membuat file audio berputar secara otomatis. Nilai masukan dari atribut autoplay adalah nilai boolean yaitu true dan false.

Jika nilai yang dimasukkan true maka file audio akan diputar secara otomatis, sedangkan jika false maka tidak diputar secara otomatis.

Atribut autoplay juga memiliki dua cara pendefinisian bila bernilai true.


<audio controls autoplay>
    <source src="creativeminds.mp3" type="audio/mpeg" />
</audio>

<!-- Atau -->

<audio controls autoplay="true">
    <source src="creativeminds.mp3" type="audio/mpeg" />
</audio>

Keluaran:

Sebagai catatan, kemungkinan atribut autoplay tidak bekerja di Google Chrome karena ada beberapa kebijakan baru dalam memutar audio. Sebagai gantinya coba kalian jalankan pada browser seperti Mozilla Firefox, Microsoft Edge, dan lain-lain.

Atribut loop

Atribut loop akan membuat file audio diputar secara berulang-ulang. Cara kerja atribut ini sama dengan fitur repeat one di pemutar audio handphone kita.

Sama seperti atribut yang lain, nilai atribut loop juga berupa boolean yang berarti hanya ada dua true dan false.

Contoh penerapan


<audio controls loop>
    <source src="creativeminds.mp3" type="audio/mpeg" />
</audio>

<!-- Atau -->

<audio controls loop="true">
    <source src="creativeminds.mp3" type="audio/mpeg" />
</audio>

Keluaran:

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.

Nilai yang diberikan juga berupa nilai boolean, true dan false.


<audio controls muted>
    <source src="creativeminds.mp3" type="audio/mpeg" />
</audio>

<!-- Atau -->

<audio controls muted="true">
    <source src="creativeminds.mp3" type="audio/mpeg" />
</audio>

Keluaran,

Atribut preload

Atribut preload akan menunjukkan seberapa penting file audio harus dimuat ketika halaman web yang terkait juga akan dimuat.

Atribut preload memiliki tiga nilai yaitu auto, metadata, dan none.


<audio controls preload="none">
    <source src="creativeminds.mp3" type="audio/mpeg" />
</audio>

Keluaran:

Atribut src

Sudah sering kali dijelaskan bahwa atribut ini berfungsi untuk menentukan alamat lokasi atau sumber dari beberapa file media seperti gambar, audio, dan lain-lain.

Dalam penerapan sebelumnya atribut ini disisipkan ke dalam tag <source>, namun sebenarnya atribut ini juga dapat disisipkan ke dalam tag <audio>.


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Audio HTML 5</title>
</head>
<body>
	<h1>Tutorial Audio di HTML 5</h1>
	<audio controls src="creativeminds.mp3"></audio>
</body>
</html>

Keluaran:

Nah sekarang pertanyaannya,

Apa perbedaan kita menyisipkan atribut src pada tag audio dan tag source?

Untuk menjawab pertanyaan di atas kita perlu mengenal tag <source> terlebih dahulu.

Mengenal Tag <source>

Ketika kita ingin menambahkan audio ke file atau dokumen HTML, ada beberapa poin yang perlu diperhatikan supaya audio yang ditambahkan nantinya bisa diputar secara benar oleh pengguna.

Dari beberapa poin tersebut yang paling utama adalah apakah browser yang dipakai oleh pengguna dapat memutar file audio secara benar dan tanpa masalah?

Karena beberapa browser open source contohnya Firefox tidak mendukung format file audio tertutup seperti WMV dan hanya dapat memutar format file audio OGG.

Maka dari itu peran tag <source> sangat dibutuhkan di sini.

Tag <source> merupakan jenis tag yang berdiri sendiri atau dalam konteks elemen yang berarti elemen kosong (empty elemen).


<h1>Tutorial Audio di HTML 5</h1>
<audio controls>
    <source src="creativeminds.mp3" type="audio/ogg">
</audio>

Tag <source> memungkinkan kita untuk menambahkan beberapa jenis format file audio sekaligus ke dalam elemen <audio> yang mana ini akan membuat browser lebih leluasa untuk memilih format file mana yang dapat ia putar.


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Audio HTML 5</title>
</head>
<body>
	<h1>Tutorial Audio di HTML 5</h1>
	<audio controls>
		<source src="creativeminds.mp3" type="audio/ogg">
		<source src="creativeminds.mp3" type="audio/mpeg">
	</audio>
</body>
</html>

Keluaran:

Hasil yang dikeluarkan tetap memutar satu file audio, karena browser hanya memilih satu dari sekian banyak format file audio yang tersedia, yang mana mungkin saja hanya format file tersebutlah yang dapat ia putar.

Ada dua atribut penting yang perlu diingat untuk menentukan file audio beserta formatnya, antara lain.

src – berfungsi untuk menentukan alamat lokasi atau sumber dari suatu file media seperti gambar, audio, dan lain-lain. Atribut ini selain dapat ditambahkan ke dalam tag <img>, ia juga dapat ditambahkan ke dalam tag <audio> dan <source>.
type – mendefinisikan kode media internet (MIME), dalam konteks audio berfungsi untuk mendefinisikan jenis atau tipe dari format file audio yang ditentukan pada tag <source>.

Format File Audio yang Didukung HTML 5

Tidak semua format file atau ekstensi audio didukung oleh HTML 5, tercatat hanya beberapa format file berikut yang didukung oleh HTML 5.

FormatContainerMIME TypeAACAACaudio/aacAACAACaudio/aacpAACMP4audio/mp4FLACFLACaudio/flacFLACOggaudio/oggMP3MP3audio/mpegOpusOggaudio/oggOpusWebMaudio/webmPCMWAVaudio/wavVorbisOggaudio/oggVorbisWebMaudio/webm

Format file MP3 dan MP4 merupakan format yang sering digunakan karena ukuran filenya relatif kecil. Sedangkan untuk file FLAC memiliki ukuran yang relatif besar karena kualitas tinggi yang dimilikinya.

Apa elemen HTML yang benar untuk memutar file audio?

Attributes.

autoplay. Menentukkan bahwa audio akan diputar secara otomatis (langsung ketika halaman telah dimuat). ... .

controls. Menentukkan bahwa controls audio ditampilkan. ... .

loop. Digunakan untuk memutar ulang audio ketika selesai. ... .

muted. ... .

preload. ... .

Tag apa yang digunakan untuk menyisipkan audio kedalam dokumen HTML?

Cara Menambahkan Audio di HTML Namun, kini HTML sudah punya tag sendiri yakni <audio> . Tag <audio> adalah tag untuk membuat audio player. Lalu kita bisa memberikan file audio yang akan diputar dengan tag <source> .

kode html