Poznaj Programowanie

Tagi HTML: audio

Piotr Grochal 6 min. czytania

W dzisiejszym wpisie na naszym blogu o HTML, CSS i JavaScript przyglądamy się w praktyce tagowi <audio>. To natywny element HTML5, który pozwala osadzać dźwięk bez wtyczek (np. Flash) i bez dodatkowych bibliotek. Dzięki niemu łatwo dodasz muzykę, podcasty, efekty czy narrację do strony.

W artykule znajdziesz omówienie składni, atrybutów, formatów audio, przykłady kodu, stylizację CSS oraz kontrolę odtwarzania w JavaScript.

Podstawowa składnia tagu <audio>

Tag <audio> służy do osadzania treści dźwiękowych w dokumencie HTML. Najprościej wskazać plik przez src, ale zaleca się używać wielu <source>, aby zapewnić kompatybilność między przeglądarkami. Oto podstawowy przykład odtwarzacza z kontrolkami:

<audio controls>
<source src="muzyka.mp3" type="audio/mpeg">
<source src="muzyka.ogg" type="audio/ogg">
Twoja przeglądarka nie obsługuje elementu audio.
</audio>

Co tu się dzieje:

  • atrybut controls – wyświetla natywne przyciski (play/pause, głośność, pasek postępu);
  • elementy <source> – z typami MIME (audio/mpeg dla MP3, audio/ogg dla Ogg Vorbis) zwiększają kompatybilność;
  • tekst fallback – pokazuje się w przeglądarkach bez wsparcia elementu audio.

Dlaczego wiele źródeł? Różne przeglądarki obsługują różne kodeki: Chrome i Firefox często wspierają Ogg, a Safari i Edge – MP3. Zawsze testuj na kilku platformach i urządzeniach.

Kluczowe atrybuty tagu <audio>

Poniżej znajdziesz najczęściej używane atrybuty i ich działanie:

Atrybut Wartości Opis
controls controls Wyświetla interfejs użytkownika (play, pause, volume, timeline).
autoplay autoplay Automatycznie odtwarza po załadowaniu (zwykle blokowane bez interakcji użytkownika).
loop loop Odtwarza plik od początku po zakończeniu (pętla).
muted muted Domyślnie wycisza dźwięk (często wymagane przy autoplay).
preload auto / metadata / none Kontroluje ładowanie: auto (cały plik), metadata (tylko metadane), none (brak wstępnego ładowania).
src URL pliku Bezpośrednie źródło jako alternatywa dla wielu <source>.

Tak dodasz autoplay z pętlą i zgodnością polityk odtwarzania:

<audio controls autoplay loop muted preload="metadata" src="tlo-muzyczne.ogg">
Muzyka w tle nie jest obsługiwana.
</audio>

Uwaga: nowoczesne przeglądarki (np. Chrome, Firefox) zwykle blokują autoplay z dźwiękiem bez uprzedniej akcji użytkownika, dlatego łącz autoplay z muted.

Obsługa formatów audio i typy MIME

Najpopularniejsze formaty i ich zastosowanie to:

  • MP3 – audio/mpeg – bardzo szeroka kompatybilność (większość przeglądarek);
  • Ogg Vorbis – audio/ogg; codecs="vorbis" – otwarty kodek, dobry stosunek jakości do rozmiaru;
  • WAV – audio/wav – nieskompresowany, wysoka jakość kosztem rozmiaru;
  • AAC – audio/mp4 – często wspierany w Safari/iOS.

Przykład z wieloma źródłami i linkiem do pobrania:

<audio id="podcast" controls preload="metadata">
<source src="podcast.mp3" type="audio/mpeg">
<source src="podcast.ogg" type="audio/ogg; codecs=vorbis">
<source src="podcast.aac" type="audio/mp4">
<a href="podcast.mp3">Pobierz podcast (MP3)</a>
</audio>

Dla większej precyzji podawaj kodeki w typie MIME, np. audio/ogg; codecs="vorbis".

Stylizacja odtwarzacza z CSS

Domyślny wygląd <audio> różni się w zależności od przeglądarki. Poniżej przykład prostej stylizacji i użycia pseudo-elementów WebKit:

audio {
width: 100%;
max-width: 400px;
height: 40px;
background: linear-gradient(to right, #f0f0f0, #ccc);
border-radius: 8px;
}
audio::-webkit-media-controls-panel {
background-color: #085c68;
border-radius: 8px;
}
audio::-webkit-media-controls-play-button {
background-color: #fff;
border-radius: 50%;
}

Minimalny szablon HTML z podpiętym odtwarzaczem:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Audio demo</title>
<style>/* CSS z przykładu powyżej */</style>
</head>
<body>
<audio controls src="przykladowy-utwor.mp3"></audio>
</body>
</html>

Kontrola programistyczna z JavaScriptem

Element <audio> współpracuje z interfejsem HTMLAudioElement. Poniższe właściwości i metody przydadzą się najczęściej:

  • play() / pause() – rozpoczyna i zatrzymuje odtwarzanie;
  • currentTime – aktualna pozycja w sekundach;
  • volume – głośność w zakresie 0–1;
  • muted – flaga wyciszenia dźwięku;
  • addEventListener(’ended’, …) – reagowanie na zakończenie utworu.

Przykład prostego niestandardowego playera sterowanego JS:

<audio id="mojAudio">
<source src="utwor.mp3" type="audio/mpeg">
</audio>

<button id="playBtn">Odtwórz</button>
<button id="pauseBtn">Pauza</button>
<span id="czas">0:00 / 0:00</span>

<script>
const audio = document.getElementById('mojAudio');
const playBtn = document.getElementById('playBtn');
const pauseBtn = document.getElementById('pauseBtn');
const czas = document.getElementById('czas');

playBtn.addEventListener('click', () => audio.play());
pauseBtn.addEventListener('click', () => audio.pause());

function mmss(t) {
const m = Math.floor(t / 60);
const s = String(Math.floor(t % 60)).padStart(2, '0');
return `${m}:${s}`;
}

audio.addEventListener('timeupdate', () => {
const aktualny = audio.currentTime || 0;
const caly = isNaN(audio.duration) ? 0 : audio.duration;
czas.textContent = `${mmss(aktualny)} / ${mmss(caly)}`;
});

audio.addEventListener('ended', () => alert('Koniec utworu!'));
</script>

Dla zaawansowanych efektów i analizy widma użyj Web Audio API z AudioContext.

Kompatybilność i fallbacki dla starszych przeglądarek

Element <audio> jest wspierany od IE9+. Dla starszych przeglądarek lub braku wsparcia formatu dodaj alternatywy, np. link do pobrania pliku. Historyczne fallbacki oparte na Flashu nie są dziś zalecane, ale dla kompletności przykład wygląda tak:

<audio controls>
<source src="test.mp3" type="audio/mpeg">
<source src="test.ogg" type="audio/ogg">
<object type="application/x-shockwave-flash" data="player.swf">
<param name="FlashVars" value="mp3=test.mp3">
</object>
<a href="test.mp3">Pobierz MP3</a>
</audio>

Aby programistycznie sprawdzić wsparcie formatu, skorzystaj z canPlayType:

if (!document.createElement('audio').canPlayType('audio/mpeg')) {
// Fallback: ukryj audio, pokaż alternatywę
document.getElementById('audio').style.display = 'none';
}

Najlepsze praktyki i pułapki

Poniższe wskazówki pomogą poprawić doświadczenie użytkownika i wydajność:

  • zawsze używaj controls lub JS – bez interfejsu użytkownik nie ma jak sterować odtwarzaniem;
  • autoplay łącz z muted – zwiększa szansę, że odtwarzanie w tle ruszy bez blokad;
  • dobierz preload świadomie – metadata dla list, none dla oszczędzania transferu;
  • dbaj o dostępność – dodaj aria-label, opisy i transkrypty treści;
  • zapewnij responsywność – ustaw w CSS width: 100% dla odtwarzacza;
  • kontroluj wydajność – unikaj wielu równocześnie odtwarzanych elementów audio.

Przykład prostej listy odcinków (demonstracyjny):

<h2>Podcasty</h2>
<audio controls>
<source src="odc1.mp3" type="audio/mpeg">
Twoja przeglądarka nie obsługuje elementu audio.
</audio>
<ul>
<li>Odcinek 1 – odc1.mp3</li>
<li>Odcinek 2 – odc2.mp3</li>
</ul>