Podstawowe użycie tagu <audio>
Prawidłowym i zalecanym elementem HTML do odtwarzania plików audio na stronie internetowej jest tag <audio>. Jest to standardowy element HTML5, który umożliwia umieszczanie i odtwarzanie dźwięku bez konieczności instalowania dodatkowych wtyczek czy technologii zewnętrznych.
Najprostsza forma użycia wygląda następująco:
<audio src="sciezka-do-pliku.mp3" controls> Twoja przeglądarka nie obsługuje elementu audio. </audio> src– ścieżka do pliku audio, np. mp3, ogg, wav;controls– dodaje podstawowe elementy sterujące odtwarzaniem (start, pauza, głośność);- tekst między otwierającym i zamykającym tagiem
<audio>wyświetli się, jeśli przeglądarka nie obsługuje tego elementu.
Obsługa różnych formatów audio
Aby zapewnić kompatybilność z różnymi przeglądarkami, zaleca się używanie kilku źródeł dźwięku wewnątrz tagu <audio>. Można to osiągnąć za pomocą podtagów <source>:
<audio controls> <source src="sciezka-do-pliku.mp3" type="audio/mpeg"> <source src="sciezka-do-pliku.ogg" type="audio/ogg"> <source src="sciezka-do-pliku.wav" type="audio/wav"> Twoja przeglądarka nie obsługuje elementu audio. </audio> W powyższym przykładzie przeglądarka wybierze pierwszy format, który potrafi odtworzyć. Najszerszą obsługą cieszą się pliki MP3, ale nie wszystkie przeglądarki obsługują format OGG czy WAV, stąd warto podać kilka źródeł.
Najważniejsze atrybuty tagu <audio>
- controls – pokazuje natywne przyciski sterujące;
- autoplay – rozpoczyna odtwarzanie zaraz po załadowaniu strony (niezalecane, bo przeglądarki często to blokują);
- loop – powoduje zapętlanie dźwięku;
- muted – dźwięk startuje wyciszony;
- preload – kontroluje, czy i jak plik jest ładowany przy starcie strony (opcje: auto, metadata, none).
Przykład z większą liczbą atrybutów:
<audio controls loop preload="auto"> <source src="muzyka.mp3" type="audio/mpeg"> <source src="muzyka.ogg" type="audio/ogg"> Twoja przeglądarka nie obsługuje elementu audio. </audio> Przykłady zastosowań w praktyce
- Podcasty – wstawianie audycji radiowych lub wywiadów;
<audio controls> <source src="podcast.mp3" type="audio/mpeg"> Twój podcast nie może być odtworzony. </audio> - Fragmenty utworów muzycznych – do odsłuchu na stronie zespołu lub sklepu muzycznego;
- Pliki instruktażowe – nagrania lektora omawiającego prezentację lub wideo;
- Dźwięki powiadomień – efekty akustyczne użyte np. w grach online, systemach kontroli.
Obsługa przez przeglądarki
Większość nowoczesnych przeglądarek obsługuje pliki MP3, OGG i WAV – ale ich wsparcie może się różnić. Najlepszą praktyką jest zawsze podawanie kilku formatów dźwięku w tagu <audio>.
Alternatywne sterowanie za pomocą JavaScript
Tag <audio> pozwala na nawiązanie interakcji za pomocą skryptów. Można programistycznie sterować odtwarzaniem, pauzowaniem, zmianą głośności czy czasem trwania audio.
Przykładowe sterowanie w JavaScript:
<audio id="myAudio" src="dzwiek.mp3"></audio> <button onclick="document.getElementById('myAudio').play()">Odtwórz</button> <button onclick="document.getElementById('myAudio').pause()">Pauza</button> Dzięki temu możliwe jest tworzenie własnych, niestandardowych interfejsów odtwarzacza oraz integracja dźwięku z innymi funkcjonalnościami strony.
Podsumowanie
- Jedynym poprawnym i standardowym elementem do odtwarzania dźwięku jest
<audio>. - wspiera wiele atrybutów oraz różnych formatów dźwięku,
- umożliwia osadzanie prostych odtwarzaczy lub tworzenie rozbudowanych kontrolerów za pomocą JavaScript,
- jest lekki, szybki i nie wymaga żadnych dodatkowych wtyczek po stronie użytkownika.
Zastosowanie <audio> to obecnie najprostszy i najbardziej uniwersalny sposób na odtwarzanie plików dźwiękowych na stronach internetowych.
