Langsung ke konten

Audio di HTML: Cara Menampilkan Pemutar Audio dengan `<audio>`

Pelajari cara menampilkan audio di HTML menggunakan tag <audio>. Pahami attribute controls, autoplay, loop, dan element <source> untuk multiple format.

Tutorial
Belajar HTML untuk Pemula
Belajar HTML untuk Pemula
Advertisement

Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah memahami semantic elements, kita masuk ke modul multimedia. Topik pertama: pemutar audio.

Tag <audio>

Tag <audio> digunakan untuk menampilkan pemutar audio di halaman web. Browser menyediakan kontrol default seperti tombol play, pause, dan volume.

<audio src="lagu.mp3" controls>
  Browser kamu tidak mendukung audio.
</audio>

Teks di dalam tag <audio> akan muncul jika browser tidak mendukung elemen ini.

Attribute pada <audio>

controls

Menampilkan kontrol pemutar (play, pause, volume, seek):

<audio src="lagu.mp3" controls></audio>

Tanpa controls, audio tidak menampilkan pemutar tapi tetap bisa dikontrol dengan JavaScript.

autoplay

Audio otomatis diputar saat halaman dimuat:

<audio src="lagu.mp3" controls autoplay></audio>

Hati-hati dengan autoplay. Banyak browser memblokir autoplay untuk pengalaman pengguna yang lebih baik.

loop

Audio diputar berulang-ulang:

<audio src="lagu.mp3" controls loop></audio>

Cocok untuk background music atau sound effect.

muted

Audio dimulai dalam keadaan mute:

<audio src="lagu.mp3" controls muted></audio>

Berguna untuk autoplay yang diizinkan browser (beberapa browser mengizinkan autoplay dalam keadaan muted).

preload

Mengontrol cara browser memuat audio:

<!-- Browser memuat seluruh file -->
<audio src="lagu.mp3" controls preload="auto"></audio>

<!-- Browser hanya memuat metadata -->
<audio src="lagu.mp3" controls preload="metadata"></audio>

<!-- Browser tidak memuat apa-apa -->
<audio src="lagu.mp3" controls preload="none"></audio>

Pilihan: auto, metadata, none. Default: auto.

Element <source>

Gunakan <source> untuk menyediakan beberapa format audio. Browser akan memilih format yang didukung:

<audio controls>
  <source src="lagu.mp3" type="audio/mpeg" />
  <source src="lagu.ogg" type="audio/ogg" />
  <source src="lagu.wav" type="audio/wav" />
  Browser kamu tidak mendukung audio.
</audio>

Format Audio Umum

FormatEkstensiKelebihanKekurangan
MP3.mp3Kompatibilitas luasKualitas sedikit berkurang
OGG.oggUkuran kecil, kualitas baikKompatibilitas terbatas
WAV.wavKualitas tinggiUkuran file sangat besar
AAC.aacKualitas baik, ukuran kecilKompatibilitas kurang dari MP3

Attribute type

type membantu browser menentukan format tanpa harus memuat file terlebih dahulu:

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

Contoh Audio Lengkap

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <title>Pemutar Audio</title>
    <style>
      audio {
        width: 100%;
        margin: 10px 0;
      }
      .player-container {
        max-width: 400px;
        padding: 20px;
        background: #f4f4f4;
        border-radius: 8px;
      }
    </style>
  </head>
  <body>
    <h1>Pemutar Audio</h1>

    <div class="player-container">
      <h3>Lagu Favorit</h3>
      <audio controls>
        <source src="lagu-favorit.mp3" type="audio/mpeg" />
        <source src="lagu-favorit.ogg" type="audio/ogg" />
        Browser kamu tidak mendukung audio.
      </audio>
    </div>

    <div class="player-container">
      <h3>Background Music (Autoplay, Loop)</h3>
      <audio controls autoplay loop muted>
        <source src="bgm.mp3" type="audio/mpeg" />
        Browser kamu tidak mendukung audio.
      </audio>
    </div>
  </body>
</html>

Kontrol Audio dengan JavaScript

Kamu bisa mengontrol audio dengan JavaScript:

<audio id="myAudio" src="lagu.mp3" controls></audio>

<button onclick="playAudio()">Play</button>
<button onclick="pauseAudio()">Pause</button>
<button onclick="stopAudio()">Stop</button>

<script>
  const audio = document.getElementById('myAudio');

  function playAudio() {
    audio.play();
  }

  function pauseAudio() {
    audio.pause();
  }

  function stopAudio() {
    audio.pause();
    audio.currentTime = 0;
  }
</script>

Properti JavaScript Penting

  • audio.play() — Mulai putar
  • audio.pause() — Jeda
  • audio.currentTime — Waktu saat ini (dalam detik)
  • audio.duration — Durasi total
  • audio.volume — Volume (0.0 sampai 1.0)
  • audio.muted — Mute/unmute

Best Practice Audio

  1. Sediakan multiple format — MP3 sebagai format utama, OGG sebagai alternatif
  2. Jangan paksa autoplay — Biarkan pengguna memilih kapan audio diputar
  3. Gunakan preload dengan bijak — none atau metadata untuk menghemat bandwidth
  4. Berikan fallback text — Untuk browser yang tidak mendukung
  5. Gunakan CSS untuk styling — Sesuaikan tampilan dengan desain website

Ringkasan

  • <audio> untuk menampilkan pemutar audio
  • Attribute: controls, autoplay, loop, muted, preload
  • Element <source> untuk multiple format
  • Format umum: MP3, OGG, WAV, AAC
  • Bisa dikontrol dengan JavaScript
  • Hindari autoplay tanpa izin pengguna

Langkah Selanjutnya

Kamu sudah memahami cara menampilkan audio. Artikel selanjutnya membahas video di HTML, cara menampilkan dan mengontrol pemutar video.