Jak wstawić dźwięk w HTML?

Aby wstawić dźwięk w HTML, należy wykorzystać nowoczesny znacznik <audio> wprowadzony w HTML5. Pozwala on na osadzanie na stronie plików dźwiękowych w kilku najpopularniejszych formatach, takich jak MP3, OGG czy WAV. Poniżej znajduje się szczegółowy poradnik krok po kroku, wraz z przykładami kodu i praktycznymi zastosowaniami.

Podstawowe użycie znacznika <audio>

Najprostszym sposobem dodania dźwięku do strony jest użycie znacznika <audio> z atrybutem src:

<audio src="dzwiek.mp3"></audio>

Aby użytkownik mógł sterować odtwarzaniem (np. włączać, pauzować, przeskakiwać fragmenty), należy dodać atrybut controls –

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

Obsługa różnych formatów audio

Różne przeglądarki mogą obsługiwać różne formaty plików audio. Aby zapewnić jak największą kompatybilność, warto udostępnić dźwięk w kilku formatach. Do tego służy wnętrze znacznika <audio>, w którym można umieścić kilka znaczników <source>:

<audio controls>
  <source src="sciezka.mp3" type="audio/mpeg">
  <source src="sciezka.ogg" type="audio/ogg">
  <source src="sciezka.wav" type="audio/wav">
  Twój odtwarzacz nie obsługuje elementu audio w HTML5.
</audio>

Dzięki temu przeglądarka wybierze pierwszy format, który potrafi odtworzyć.

Najważniejsze atrybuty znacznika <audio>

• Controls – wyświetla kontrolki odtwarzacza (play, pauza, głośność);
• Autoplay – dźwięk rozpocznie się automatycznie po załadowaniu strony;
• Loop – dźwięk będzie zapętlany;
• Preload – pozwala określić, czy plik ma zostać automatycznie załadowany („auto”, „metadata”, „none”).

Przykład z kilkoma atrybutami:

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

Przykłady praktycznego użycia

Odtwarzanie tła muzycznego na stronie (bez widocznych kontrolek, z automatycznym startem) –

<audio src="muzyka-tlo.mp3" autoplay loop hidden></audio>

(Uwaga: Automatyczne odtwarzanie i ukrywanie odtwarzacza może być zablokowane przez ustawienia przeglądarki. Zaleca się ostrożność, aby nie irytować użytkowników.)

Dźwięk powiązany z działaniem w JavaScript (np. odtwarzanie po kliknięciu) –

<audio id="klikdzwiek" src="klik.mp3" preload="auto"></audio>
<button onclick="document.getElementById('klikdzwiek').play();">Kliknij mnie!</button>

Podkast dostępny do odsłuchu i pobrania –

<audio controls>
  <source src="podkast.mp3" type="audio/mpeg">
  <source src="podkast.ogg" type="audio/ogg">
  <a href="podkast.mp3">Pobierz odcinek</a>
</audio>

Kompatybilność formatów audio

Dlatego warto zapewnić przynajmniej MP3 i OGG.

Starsze metody osadzania dźwięku

Przed rozpowszechnieniem HTML5 stosowano elementy <embed> lub <bgsound>, ale obecnie są one uznawane za niezalecane. Nowoczesne witryny powinny korzystać wyłącznie ze znacznika <audio>.

Najważniejsze wskazówki

• Dźwięk należy wykorzystywać z umiarem – zbyt nachalne odtwarzanie na starcie strony (autoplay) może zniechęcić użytkownika;
• Dbaj o dostępność – dodawaj alternatywne opisy, linki do pobierania i przemyślane sterowanie odtwarzaniem;
• Używaj kilku formatów audio dla maksymalnej kompatybilności z różnymi przeglądarkami.

Stosowanie powyższych zasad pozwala profesjonalnie i efektywnie wzbogacić serwis internetowy o dźwięk.