Jak wstawić muzykę na stronę HTML?

Aby wstawić muzykę na stronę HTML, należy wykorzystać znacznik <audio>, który w HTML5 służy do osadzania materiałów dźwiękowych. Rozwiązanie to jest nowoczesne, zgodne ze standardami i obsługiwane przez wszystkie popularne przeglądarki.

Podstawowe osadzenie muzyki – znacznik <audio>

Najprostszy kod umożliwiający odtwarzanie muzyki na stronie:

<audio controls>
  <source src="muzyka.mp3" type="audio/mpeg">
  <source src="muzyka.ogg" type="audio/ogg">
  Twój browser nie obsługuje elementu audio.
</audio>

Wyjaśnienie kluczowych elementów –

• controls – wyświetla standardowe przyciski odtwarzania (play, pauza, głośność itd.);
• <source src="..." type="..."> – umożliwia podanie kilku wersji pliku muzycznego w różnych formatach dla szerszej kompatybilności przeglądarek;
• Treść wewnątrz <audio> – komunikat, który pojawi się, jeśli przeglądarka nie wspiera audio.

Wspierane formaty plików

• MP3 – największa kompatybilność z przeglądarkami;
• OGG – otwarty format, obsługiwany przez wiele, ale nie wszystkie przeglądarki;
• WAV – format bezstratny, obsługiwany standardowo.

Tabela kompatybilności –

Aby dotrzeć do jak najszerszej grupy użytkowników, zaleca się zadeklarowanie co najmniej dwóch formatów pliku audio.

Zaawansowane zastosowania – atrybuty <audio>

• autoplay – automatyczne odtwarzanie muzyki zaraz po załadowaniu strony;
• loop – zapętlone odtwarzanie utworu;
• preload – ładowanie pliku audio wraz z ładowaniem strony. Wartość może być „auto”, „metadata” lub „none” (nie zawsze jest respektowana).

Przykład –

<audio controls autoplay loop preload="auto">
  <source src="muzyka.mp3" type="audio/mpeg">
  <source src="muzyka.ogg" type="audio/ogg">
  Twój browser nie obsługuje elementu audio.
</audio>

Wyjaśnienia –

• autoplay – w większości przeglądarek blokowany domyślnie (wymagany kontakt użytkownika, np. kliknięcie);
• loop – ścieżka będzie odtwarzana w pętli;
• preload=”auto” – plik zostanie przygotowany do odtwarzania już podczas ładowania strony.

Przykład stylizacji i responsywności

Odtwarzacz audio można stylizować za pomocą CSS oraz osadzić w różnych miejscach strony, np. w sekcji nagłówkowej, artykule lub panelu bocznym.

Umieszczenie w sekcji artykułu –

<article>
  <h2>Posłuchaj naszego podkładu muzycznego</h2>
  <audio controls>
    <source src="utwor.mp3" type="audio/mpeg">
    <source src="utwor.ogg" type="audio/ogg">
    Twoja przeglądarka nie obsługuje tagu audio.
  </audio>
</article>

Przykładowa stylizacja CSS –

audio {
  width: 100%;
  max-width: 400px;
  margin: 10px 0;
}

Osadzanie muzyki z serwisów internetowych

Serwisy takie jak SoundCloud udostępniają gotowe kody <iframe> do zamieszczania odtwarzaczy na własnej stronie. Takie rozwiązanie jest przydatne, gdy nie chcemy hostować pliku muzycznego samodzielnie.

Przykład (SoundCloud) –

<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/ID_UTWORU"></iframe>

Kod generuje odtwarzacz zintegrowany z SoundCloud, obejmuje automatyczną obsługę licencji i statystyk odsłuchań.

Niestandardowe i przestarzałe metody

Dla porządku historycznego: w bardzo starych wersjach HTML wykorzystywano znaczniki <bgsound> (Internet Explorer), <embed> czy <object>. Dziś są niezalecane z uwagi na brak wsparcia oraz niezgodność ze współczesnymi standardami.

Najważniejsze rekomendacje

• Zalecane jest stosowanie znacznika <audio> z dwoma formatami (MP3 i OGG), minimum z atrybutem controls;
• Nie zaleca się stosowania automatycznego odtwarzania bez interakcji użytkownika – przeglądarki często to blokują;
• Muzykę warto hostować na własnym serwerze lub korzystać z dedykowanych serwisów muzycznych z możliwością osadzania treści na stronach (np. SoundCloud);
• Możliwość i sposób odtwarzania zależy od konfiguracji przeglądarki oraz uprawnień użytkownika (np. blokady automatycznego odtwarzania).

Dzięki powyższym wskazówkom możesz skutecznie i zgodnie ze standardami HTML5 dodać muzykę do swojej strony internetowej.