Właściwości <audio> i jego integracja na stronie

Właściwości <audio> i jego integracja na stronie

Element <audio> w HTML5 umożliwia łatwe osadzanie plików dźwiękowych na stronie. Może to być podcast, efekt dźwiękowy, tło muzyczne lub inny materiał audio, który chcesz udostępnić użytkownikom.

W przeciwieństwie do dawnych rozwiązań, które wymagały zewnętrznych wtyczek, obecnie przeglądarki obsługują dźwięk natywnie. W tej lekcji nauczysz się, jak poprawnie wstawić plik audio, kontrolować jego odtwarzanie i zadbać o kompatybilność.

Podstawowa składnia znacznika <audio>
<audio src="muzyka.mp3" controls>
  Twoja przeglądarka nie obsługuje elementu audio w HTML5.
</audio>

Efekt działania:

(Pojawi się prosty odtwarzacz audio z przyciskiem play i regulacją głośności.)

Najważniejsze atrybuty

Podobnie jak w przypadku <video>, znacznik <audio> obsługuje kilka przydatnych atrybutów:

  • controls – wyświetla kontrolki odtwarzacza,
  • autoplay – rozpoczyna odtwarzanie automatycznie,
  • loop – zapętla odtwarzanie,
  • muted – domyślnie wycisza dźwięk,
  • preload – określa, kiedy plik ma zostać załadowany (none, metadata, auto).
Przykład z dodatkowymi atrybutami
<audio src="muzyka.mp3" controls autoplay loop preload="auto">
  Twoja przeglądarka nie obsługuje elementu audio w HTML5.
</audio>

Efekt działania:

(Dźwięk rozpocznie się automatycznie i będzie odtwarzany w pętli, o ile przeglądarka na to pozwoli.)

Obsługa wielu formatów audio

Różne przeglądarki mogą wspierać różne formaty dźwiękowe. Najczęściej stosowane to:

  • .mp3 – standard, działa w większości przeglądarek,
  • .ogg – popularny w przeglądarkach opartych na Firefoksie i Chromium,
  • .wav – dobrej jakości, ale pliki są cięższe.

Użycie wielu źródeł:

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

Efekt działania:

(Przeglądarka wybierze pierwszy wspierany format i odtworzy go.)

Przydatne style CSS dla audio

Odtwarzacz audio zwykle ma domyślny wygląd, ale można go osadzić w responsywnym kontenerze lub stylizować przy użyciu JavaScript i własnych kontrolek. Dla prostych przypadków warto zadbać o odpowiednie rozmieszczenie na stronie:

<style>
  audio {
    width: 100%;
    max-width: 400px;
    display: block;
    margin: 20px auto;
  }
</style>
<audio controls src="muzyka.mp3"></audio>

Efekt działania:

(Odtwarzacz będzie wyśrodkowany i dopasuje się do szerokości urządzenia.)

Jak udostępnić podcast lub nagranie z komentarzem?

Jeśli tworzysz stronę z podcastami lub materiałami audio do nauki, pamiętaj o opisach, transkrypcji lub tytułach. Możesz je dodać w pobliżu odtwarzacza:

<h5>Podcast: Jak stworzyć responsywną stronę w HTML</h5>
<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
</audio>
<p>Transkrypcja: W tym odcinku omawiamy, jak tworzyć strony, które dobrze wyglądają na różnych urządzeniach...</p>
Ćwiczenie w JSFiddle – stwórz własny odtwarzacz audio

Spróbuj samodzielnie stworzyć własny odtwarzacz audio. Możesz użyć publicznych plików z internetu lub wrzucić własne nagranie.

👉 Otwórz JSFiddle i utwórz nowy projekt

Wklej do sekcji HTML poniższy kod:

<audio controls preload="auto" loop>
  <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
  Twoja przeglądarka nie obsługuje odtwarzania audio.
</audio>

Eksperymentuj z atrybutami: usuń loop, dodaj autoplay, wypróbuj preload=”metadata”. Obserwuj, jak to wpływa na działanie odtwarzacza.

Dodatkowo, jeśli chcesz – opisz nagranie, dodaj tytuł i transkrypcję tak, jakbyś przygotowywał stronę podcastową.

Previous Temat
Back to Zagadnienie
Next Temat