<audio>
Odtwarzacz dźwięku: podcast, nagranie lektora, efekt dźwiękowy.
- Wyświetlanie
- inline (bez `controls` niewidoczny)
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Elementy
<source>i<track>, a po nich treść zastępcza
Przykład
#<p>Odcinek 12: Jak nie utknąć w tutorialach</p>
<audio controls preload="none">
<source src="/podcast/odcinek-12.mp3" type="audio/mpeg">
<a href="/podcast/odcinek-12.mp3">Pobierz odcinek w MP3</a>
</audio>Plik dźwiękowy został pominięty w podglądzie, dlatego odtwarzacz pokazuje tylko kontrolki.
Definicja i zastosowanie
#Element <audio> osadza na stronie plik dźwiękowy. Adres podajesz w atrybucie src albo w kilku elementach <source>, jeśli chcesz zaproponować różne formaty. Najbezpieczniejszym wyborem jest MP3, który odtworzy każda współczesna przeglądarka.
Bez atrybutu controls odtwarzacz jest niewidoczny i dźwięk da się uruchomić tylko skryptem. Z controls przeglądarka pokazuje własny pasek z przyciskiem odtwarzania, osią czasu i regulacją głośności.
Przeglądarki zwykle blokują automatyczne odtwarzanie dźwięku, dopóki użytkownik nie kliknie czegoś na stronie, więc autoplay często nie zadziała. To dobrze: nieoczekiwany dźwięk to jedno z najbardziej irytujących zachowań stron. Treść między znacznikami wyświetlą tylko przeglądarki, które w ogóle nie obsługują <audio>.
Składnia
#<audio src="nagranie.mp3" controls></audio>Atrybuty
#URL
Adres pliku dźwiękowego. Zamiast niego możesz umieścić w środku kilka elementów<source>z różnymi formatami.atrybut logiczny
Pokazuje wbudowane kontrolki odtwarzacza. Bez niego element jest całkowicie niewidoczny, co widać w drugiej części przykładu.autoplay
atrybut logiczny
Próbuje odtworzyć dźwięk od razu po wczytaniu. Przeglądarki zwykle blokują to, dopóki użytkownik nie wejdzie w interakcję ze stroną, więc nie polegaj na tym atrybucie.loop
atrybut logiczny
Po dojściu do końca nagranie zaczyna się od nowa. Przydaje się na przykład dla muzyki w tle gry.muted
atrybut logiczny
Uruchamia odtwarzacz z wyciszonym dźwiękiem. Użytkownik może go włączyć w kontrolkach.preload
none | metadata | auto
Podpowiedź, ile danych pobrać przed odtworzeniem.nonenie pobiera nic,metadatatylko informacje o pliku (na przykład długość), aautopozwala pobrać cały plik. Przeglądarka może tę wskazówkę zignorować.
Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.
Atrybuty w praktyce
#src
URLAdres pliku dźwiękowego. Zamiast niego możesz umieścić w środku kilka elementów <source> z różnymi formatami.
<audio src="/lekcje/wymowa-terminow.mp3" controls preload="none"></audio>Plik dźwiękowy został pominięty w podglądzie.
controls
atrybut logicznyPokazuje wbudowane kontrolki odtwarzacza. Bez niego element jest całkowicie niewidoczny, co widać w drugiej części przykładu.
<p>Z kontrolkami:</p>
<audio src="/lekcje/intro.mp3" controls preload="none"></audio>
<p>Bez kontrolek (odtwarzacz jest, ale go nie widać):</p>
<audio src="/lekcje/intro.mp3" preload="none"></audio>Plik dźwiękowy został pominięty w podglądzie.
Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
audio:not([controls]) {
display: none !important;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Dołącz transkrypcję nagrania, na przykład pod odtwarzaczem albo w
<details>. Pomaga osobom niesłyszącym i wszystkim, którzy wolą czytać. - Ustaw
preload="none"albopreload="metadata"dla nagrań, których użytkownik może nie odtworzyć. Strona nie pobierze wtedy całego pliku na zapas.
Powiązane hasła
#- <video>Odtwarzacz wideo osadzony bezpośrednio na stronie.
- <source>Alternatywne źródło obrazu, dźwięku lub wideo dla `<picture>`, `<audio>` i `<video>`.
- <track>Plik z napisami, opisami lub rozdziałami dla `<video>` i `<audio>`.
- <figure>Samodzielna ilustracja z opcjonalnym podpisem: obraz, wykres, fragment kodu, cytat.
Widzisz błąd albo brakuje przykładu? Napisz do nas.