profile picture

Menambahkan Audio Pada HTML

03 May 2025 -

Penjelasan

1. Dasar: Tag

Struktur Umum:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>
controls akan menampilkan tombol Play, Pause, Volume.

2. Atribut Penting pada

Atribut Fungsi controls Menampilkan kontrol audio standar (play, pause, volume) autoplay Audio otomatis diputar saat halaman dibuka loop Mengulang audio terus-menerus setelah selesai muted Audio dimulai dalam keadaan mute preload Mengatur kapan audio dimuat (auto, metadata, none)

<audio controls autoplay loop muted preload="auto">
  <source src="lagu.mp3" type="audio/mpeg">
</audio>

3. Preload pada

preload mengontrol kapan browser harus mulai mengunduh audio: • auto : Browser memutuskan sendiri. • metadata : Hanya meta informasi (seperti durasi). • none : Tidak memuat audio sebelum user menekan play.

<audio controls preload="metadata">
  <source src="musik.mp3" type="audio/mpeg">
</audio>

4. Event (JavaScript) untuk

Dengan JavaScript, kita bisa mengendalikan audio:

CopyEdit
<audio id="audioKu" src="lagu.mp3"></audio>

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

<script>
  var audio = document.getElementById("audioKu");
  
  function playAudio() {
    audio.play();
  }

  function pauseAudio() {
    audio.pause();
  }
</script>
Event yang tersedia:
•	play
•	pause
•	ended
•	volumechange
•	timeupdate
•	loadeddata

5. Styling

Tag 

<style>
  audio {
    width: 300px;
    background-color: #f0f0f0;
    border-radius: 10px;
    padding: 5px;
  }
</style>

<audio controls>
  <source src="musik.mp3" type="audio/mpeg">
</audio>
Kalau mau full custom player (dengan tombol sendiri), lebih banyak pakai JavaScript + CSS.

6. Format Audio yang Didukung Browser

Format Tipe MIME Browser MP3 audio/mpeg Semua browser modern OGG audio/ogg Chrome, Firefox, Opera WAV audio/wav Semua browser modern ⚡ Saran: Utamakan MP3 karena paling kompatibel!

7. Embed dari Layanan Streaming

Kalau mau embed dari Spotify atau SoundCloud, biasanya pakai iframe:

<iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/TRACK_ID" width="300" height="80" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"></iframe>

Ringkasan