Cara memasukan

Question

HTML element tagmerupakan tag HTML yang digunakan untuk menambahkan data audio ke dalam halaman HTML. HTML element tagakan mengenali dan memainkan file audio dalam bentuk suara atau musik. Secara default tagakan menampilkan pemutar audio yang dilengkapi dengan beberapa kontrol seperti tombol play, pause, volume, track bar, ataupun track position.

Table of Contents Show

Cara Menambahkan Audio ke HTML
Format Audio yang Didukung
Atribut Audio
Menyembunyikan Kontrol Pemutar Audio
Bagaimana cara memasukkan audio di HTML?
Apa elemen HTML yang digunakan untuk memainkan file audio?
Manakah yang termasuk atribut untuk link?

Setiap browser memiliki tampilan yang berbeda meskipun menggunakan HTML tagyang sama. Dukungan untuk memutar file audio pada media filenya setiap brwoser juga berbeda.

File audio file dengan dalam bentuk file .mp3 adalah file audio yang dapat dimainkan pada hampir semua browser. Kemudian disusul oleh audio file jenis .wav.

Penggunaan file audio dengan jenis .ogg dan .acc perlu dihindari karena hanya didukung oleh beberapa browser saja. Jadi jika anda ingin menambahkan file audio pada halaman HTML, sebaiknya menggunakan audio file jenis .mp3. Proses konversi file audio yang tidak didukung oleh browser ke dalam bentuk file .mp3 perlu dilakukan, jika file tersebut akan digunakan di dalam halaman HTML.

Anda dapat memasukkan beberapa file audio dengan format yang berbeda di dalam tagtepatnya di dalam tag. Browser akan memainkan file audio yang pertama secara default. Jika file audio pertama tidak didukung akan memainkan file audio yang kedua dan seterusnya. Namun jika file audio yang dimiliki hanya satu, dapat menggunakan atribut SRC dengan isi URL dimana file audio tersebut diletakkan.

Penggunaan Tag AUDIO

Hal yang perlu disiapkan pertama adalah file audio itu sendiri. File tersebut diletakkan sejajar dengan halaman HTML aktif. File audio tersebut dapat dipanggil dan dimainkan pada browser dengan menyertakan nama dan extensi file audio di dalam atribut SRC.

Berikut cara menggunakan audio player melalui tag:

Native audio playback is not supported.

Akan menghasilkan tampilan :

Native audio playback is not supported.

Atribut Khusus

HTML element tagmemiliki atribut yang dapat digunakan untuk menampilkan, memainkan dan menata pemutar fle pada halaman HTML.

Atribut khusus pada tag audio sangat berhubungan dengan audio player untuk memainkan file audio di dalam halaman HTML.

Saat membuat halaman HTML kadang kita perlu menambahkan audio sebagai pendukung konten jenis lain, entah itu audio musik, poadcast dan lainnya.

Untuk memasukkan audio ke HTML, kita perlu menggunakan tag khusus, kita tidak bisa menulis langsung path tanpa tag ini.

Lantas, bagaimana cara menambahkannya? Format audio apa saja yang didukung? atribut apa saja yang tersedia?

Mari kita pelajari lebih lanjut.

Cara Menambahkan Audio ke HTML

Untuk menambahkan file media audio, kita bisa menggunakan tag

<audio muted>
  <source src="lagu-balonku.mp3" type="audio/mpeg" />
</audio>

0, di dalam tag ini kita perlu menulis tag

<audio muted>
  <source src="lagu-balonku.mp3" type="audio/mpeg" />
</audio>

1 dengan atribut

<audio muted>
  <source src="lagu-balonku.mp3" type="audio/mpeg" />
</audio>

2 yang merujuk ke file audio yang ingin dimasukkan.

Kita bisa menambahkan lebih dari satu tag

<audio muted>
  <source src="lagu-balonku.mp3" type="audio/mpeg" />
</audio>

1 untuk menyematkan file audio dengan format yang berbeda, sehingga browser bisa menggunakan file audio yang lain jika salah satu format tidak didukung.

Di akhir tag penutup

<audio muted>
  <source src="lagu-balonku.mp3" type="audio/mpeg" />
</audio>

0 kita bisa menulis pesan untuk pengguna yang masih menggunakan browser lama yang tidak mendukung elemen audio.

Contoh:

<audio controls>
  <source src="lagu-balonku.mp3" type="audio/mpeg" />
  <source src="lagu-balonku.ogg" type="audio/ogg" />
  <source src="lagu-balonku.wav" type="audio/wav" />
  Ops! Browser Anda tidak mendukung audio.
</audio>

Hasil:

Format Audio yang Didukung

Ada banyak format audio yang bisa kita gunakan saat ini, tapi tidak semuanya didukung oleh browser.

Berikut daftar format audio yang paling sering digunakan dan didukung oleh browser populer seperti Chrome, Edge, Firefox, Safari, dan Opera:

FormatTipe MediaMP3audio/mpegOGGaudio/oggWAVaudio/wav

Khusus untuk Safari, saat artikel ini ditulis belum mendukung format OGG.

Atribut Audio

Tag

<audio muted>
  <source src="lagu-balonku.mp3" type="audio/mpeg" />
</audio>

0 memiliki beberapa atribut khusus yang memungkinkan kita mengontrol perilaku pemutaran audio.

Sebagian besar memiliki fungsi yang mirip dengan atribut tag

<audio muted>
  <source src="lagu-balonku.mp3" type="audio/mpeg" />
</audio>

6 yang sudah kita bahas sebelumnya.

Semua atribut yang akan kita bahas di sini membutuhkan nilai boolean.

Untuk menggunakannya kita hanya perlu menulis nama atribut tanpa nilai atau dengan nilai

<audio muted>
  <source src="lagu-balonku.mp3" type="audio/mpeg" />
</audio>

7, sedangkan untuk menonaktifkannya kita harus menghapus atribut tersebut.

Mari kita pelajari satu per satu.

`muted`

Atribut muted berfungsi untuk menentukan apakah suara audio akan dibungkam (mute) atau tidak.

Meskipun atribut ini digunakan, pengguna nantinya tetap bisa mengatur volume audio sesuai keinginan melalui kontrol pemutar audio.

Contoh:

<audio muted>
  <source src="lagu-balonku.mp3" type="audio/mpeg" />
</audio>

`autoplay`

Atribut autoplay berfungsi untuk menentukan apakah audio akan diputar secara otomatis atau tidak. Gunakan atribut ini dengan muted agar tidak mengganggu pengguna.

Coba bayangka, apa jadinya jika kita berselancar di internet kemudian membuka situs yang memutar audio secara otomatis.

Menjengkelkan bukan?, apalagi jika suara audio yang digunakan cukup mengganggu.

Oleh karena itu, atribut ini tidak bekerja di Google Chrome meskipun kita sudah menggunakan atribut muted, tapi di Firefox bekerja dengan baik.

Contoh:

<audio autoplay>
  <source src="lagu-balonku.mp3" type="audio/mpeg" />
</audio>

`controls`

Atribut controls berfungsi untuk menentukan apakah kita ingin menampilkan pengontrol audio atau tidak, termasuk tombol mulai/jeda, voulme dan lainnya.

Contoh:

<audio controls>
  <source src="lagu-balonku.mp3" type="audio/mpeg" />
</audio>

`loop`

Atribut loop berfungsi untuk menentukan apakah audio akan diputar secara berulang-ulang atau tidak.

Jadi, ketika berakhir, audio tersebut akan diputar ulang secara otomatis.

<audio loop>
  <source src="lagu-balonku.mp3" type="audio/mpeg" />
</audio>

Menyembunyikan Kontrol Pemutar Audio

Ketika kita menggunakan musik atau audio sebagai suara latar belakang halaman HTML, kita biasanya tidak memerlukan kontrol pemutar audio.

Untuk menghilangkan kontrol pemutar audio, kita bisa menggunakan atribut

<audio autoplay>
  <source src="lagu-balonku.mp3" type="audio/mpeg" />
</audio>

8 atau cukup hapus atribut controls (tanpa

<audio autoplay>
  <source src="lagu-balonku.mp3" type="audio/mpeg" />
</audio>

8).

Contoh:

<audio hidden>
  <source src="lagu-balonku.mp3" type="audio/mpeg" />
</audio>

<!-- atau -->

<audio>
  <source src="lagu-balonku.mp3" type="audio/mpeg" />
</audio>

Menyembunyikan kontrol pemutar autio berarti kita juga perlu menyematkan atribut autoplay, agar audio diputar secara otomatis.

Tapi, di Firefox kita juga perlu menggunakan atribut muted agar autoplay berfungsi, di Chrome ini tidak berfungsi sama sekali meskipun kedua atribut sudah disematkan.

Itu artinya, kita tetap membutuhkan kontrol pemutar audio setidaknya sekali untuk membantu pengguna mengatur volume suara.

Memutar audio secara otomatis tanpa intervensi penggunaa sebetulnya jarang dilakukan, bahkan situs penyedia musik seperti Spotify, Soundcloud, dan yang lainnya selalu menampilkan pengontrol audio.

Memutar audio sebagai latar belakang halaman web adalah gaya kuno, apalagi jika halaman web yang kita buat tidak berhubungan dengan musik dan tidak dibekali dengan pengotrol audio.

Jadi, sebisa mungkin hindari menyembunyikan kontrol pemutar audio, jika Anda tidak suka dengan tampilannya, buat sendiri menggunakan JavaScript.

Bagaimana cara memasukkan audio di HTML?

Cara Menambahkan Audio di HTML Tag <audio> adalah tag untuk membuat audio player. Lalu kita bisa memberikan file audio yang akan diputar dengan tag <source> . Perhatikan! Pada atribut src , kita menulis langsung nama file audio yang akan diputar.

Apa elemen HTML yang digunakan untuk memainkan file audio?

HTML element tag <audio> akan mengenali dan memainkan file audio dalam bentuk suara atau musik. Secara default tag <audio> akan menampilkan pemutar audio yang dilengkapi dengan beberapa kontrol seperti tombol play, pause, volume, track bar, ataupun track position.

Manakah yang termasuk atribut untuk link?

Atribut-atribut untuk Link Selain atribut href terdapat juga beberapa atribut yang sering ditambahkan pada link, seperti: target , title , rel , style , dan lain-lain.

kode html