Lekcja 10.2: Osadzanie dźwięku (<audio>)
Dodawanie dźwięku do strony
Znacznik <audio> pozwala na łatwe osadzanie plików dźwiękowych na stronie internetowej. Umożliwia odtwarzanie muzyki, podcastów, efektów dźwiękowych i innych treści audio bezpośrednio w przeglądarce.
Podstawowe użycie z atrybutem `src`
Najprostszym sposobem osadzenia pliku audio jest użycie atrybutu src do wskazania ścieżki do pliku oraz atrybutu controls do wyświetlenia domyślnych kontrolek odtwarzacza.
<audio controls src="przykladowy-dzwiek.mp3">
Twoja przeglądarka nie obsługuje elementu audio.
</audio>(Poniżej powinien pojawić się odtwarzacz audio, jeśli przeglądarka go obsługuje)
Ważne atrybuty znacznika <audio>
Oprócz src i controls, znacznik <audio> posiada kilka innych przydatnych atrybutów:
autoplay: Atrybut logiczny. Jeśli jest obecny, dźwięk spróbuje się automatycznie odtworzyć po załadowaniu strony. Uwaga: Większość przeglądarek blokuje autoplay z dźwiękiem bez interakcji użytkownika. Często działa tylko w połączeniu zmuted.loop: Atrybut logiczny. Jeśli jest obecny, dźwięk będzie odtwarzany w pętli po dojściu do końca.muted: Atrybut logiczny. Jeśli jest obecny, dźwięk będzie domyślnie wyciszony.preload: Wskazuje przeglądarce, jak powinna ładować plik audio, gdy strona się ładuje. Możliwe wartości:none: Plik audio nie powinien być ładowany wstępnie.metadata: Tylko metadane (np. długość) powinny być ładowane wstępnie.auto(domyślna): Przeglądarka może ładować cały plik audio wstępnie.
preload="none"może oszczędzić transfer, jeśli użytkownik prawdopodobnie nie odtworzy dźwięku.
Przykład z atrybutami `loop` i `preload="none"`:
<audio controls loop preload="none" src="muzyka-w-tle.ogg">
Twoja przeglądarka nie obsługuje elementu audio.
</audio>Dostarczanie wielu formatów: element <source>
Aby zapewnić kompatybilność z różnymi przeglądarkami, które mogą obsługiwać różne formaty audio (kodeki), zamiast atrybutu src w znaczniku <audio>, należy użyć zagnieżdżonych elementów <source>. Każdy element <source> wskazuje na inny format pliku.
Przeglądarka spróbuje odtworzyć pierwszy format z listy, który obsługuje. Jeśli żaden format nie jest obsługiwany, wyświetli treść zastępczą.
- Atrybut
srcw<source>: Wskazuje ścieżkę do pliku audio. - Atrybut
typew<source>: Określa typ MIME pliku audio. Jest to ważne, aby przeglądarka mogła szybko zdecydować, czy obsługuje dany format, bez konieczności jego pobierania.
Popularne formaty i ich typy MIME:
- MP3:
audio/mpeg - Ogg Vorbis:
audio/ogg - WAV:
audio/wav - AAC:
audio/aac - WebM Audio (Opus/Vorbis):
audio/webm
Formaty MP3 i AAC są obecnie najszerzej wspierane.
Przykład użycia <source> z formatami MP3 i Ogg:
<audio controls preload="metadata">
<source src="dzwiek.mp3" type="audio/mpeg">
<source src="dzwiek.ogg" type="audio/ogg">
Twoja przeglądarka nie obsługuje odtwarzania audio.
Możesz pobrać plik: <a href="dzwiek.mp3">MP3</a> lub <a href="dzwiek.ogg">OGG</a>.
</audio>W tym przykładzie przeglądarka najpierw spróbuje odtworzyć dzwiek.mp3. Jeśli nie może, spróbuje dzwiek.ogg. Jeśli oba zawiodą, wyświetli tekst zastępczy z linkami do pobrania plików.
Dostępność
Pamiętaj o użytkownikach, którzy nie mogą słyszeć lub mają trudności ze zrozumieniem treści audio. Jeśli osadzasz ważną treść dźwiękową (np. podcast, wykład), rozważ dostarczenie transkrypcji tekstowej. Można ją umieścić bezpośrednio na stronie lub udostępnić jako link do osobnego pliku.
Zadanie praktyczne (z rozwiązaniem)
Zadanie: Osadź na stronie odtwarzacz audio z kontrolkami. Użyj elementu <source>, aby zaoferować dwa formaty pliku: podcast.mp3 (typ audio/mpeg) i podcast.ogg (typ audio/ogg). Dodaj tekst zastępczy dla starszych przeglądarek.
Rozwiązanie:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Odtwarzacz Audio z Wieloma Formatami</title>
<style>
audio {
width: 80%; /* Szerokość odtwarzacza */
margin: 20px auto;
display: block;
}
.fallback-text {
text-align: center;
color: #777;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Posłuchaj naszego podcastu</h1>
<audio controls preload="metadata">
<source src="podcast.mp3" type="audio/mpeg">
<source src="podcast.ogg" type="audio/ogg">
<p class="fallback-text">
Niestety, Twoja przeglądarka nie obsługuje wbudowanego odtwarzacza audio.
Możesz pobrać podcast jako plik:
<a href="podcast.mp3" download>Pobierz MP3</a> lub
<a href="podcast.ogg" download>Pobierz OGG</a>.
</p>
</audio>
<h2>Transkrypcja</h2>
<p>[Tutaj umieść pełną transkrypcję tekstową podcastu dla celów dostępności...]</p>
</body>
</html>Dodatkowe zadania do samodzielnego wykonania:
- Dodaj atrybut
loopdo odtwarzacza z zadania, aby podcast odtwarzał się w pętli. - Zmień atrybut
preloadnanonei zaobserwuj (np. w narzędziach deweloperskich przeglądarki), czy plik audio jest ładowany od razu po wejściu na stronę. - Znajdź krótki plik dźwiękowy w formacie WAV i dodaj go jako trzecie źródło (
<source src="dzwiek.wav" type="audio/wav">). Sprawdź, czy Twoja przeglądarka go odtworzy.
Najczęściej zadawane pytania
Jak dodać odtwarzacz audio do strony HTML?
Użyj znacznika <audio>. Dodaj atrybut `controls`, aby pokazać kontrolki, oraz `src` (lub zagnieżdżone elementy <source> z atrybutami `src` i `type`), aby wskazać plik(i) audio.
Dlaczego używać elementu <source> zamiast atrybutu `src` w <audio>?
Element <source> pozwala zdefiniować wiele formatów tego samego pliku audio (np. MP3, Ogg). Przeglądarka automatycznie wybierze pierwszy format, który obsługuje, zwiększając kompatybilność.
Jakie formaty audio są najlepiej wspierane?
Formaty MP3 (typ MIME `audio/mpeg`) i AAC (typ MIME `audio/aac`) są obecnie najszerzej wspierane przez przeglądarki internetowe.
Co robi atrybut `preload`?
Sugeruje przeglądarce, jak ma ładować plik audio: `none` (nie ładuj), `metadata` (ładuj tylko metadane, np. długość), `auto` (przeglądarka decyduje, może załadować cały plik).
Jak zapewnić dostępność treści audio?
Dla ważnych treści audio, takich jak podcasty czy wykłady, należy dostarczyć transkrypcję tekstową, aby osoby niesłyszące lub mające trudności ze słuchem mogły zapoznać się z treścią.