Podkład muzyczny na stronie

HTML + CSS

Bartosz Stefanicki, 22.04.2024

Podkład muzyczny na stronie

Jak szybko dodać do strony podkład muzyczny? Jak rozpocząć jego odtwarzanie bez koniecznej ingerencji użytkownika?

Jest kilka dostępnych technologii, natomiast jedna się wyróżnia i to właśnie po nią sięgają najczęściej webmasterzy.

1. HTML5

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

HTML5 wspiera formaty MP3, Ogg i Wav. Najwięcej przeglądarek wspiera format MP3. Do kontrolek elementu audio można dodać na przykład automatyczne odtwarzanie. Poniżej wymieniam najciekawsze odtwarzacze napisane w języku HTML5.

MediaElement.js
Popularny odtwarzacz, który wspiera najczęściej używane formaty wideo i audio. Korzystają z niego takie serwisy jak WordPress, Mozilla czy Canvas. Istnieje możliwość przetłumaczenia interfejsu, w tym na język polski. Dostępna jest obszerna dokumentacja, więc każdy powinien się w tym odtwarzaczu odnaleźć.

http://www.mediaelementjs.com

Afterglow Player
Jest to prosty we wdrożeniu, w pełni responsywny odtwarzacz dla HTML5. Wspiera YouTube i można go osadzać w Lightboksie, działa we wszystkich najpopularniejszych przeglądarkach (Internet Explorer, Chrome, Opera, Mozila Firefox, Safari). Dodatkowo możliwe jest przełączanie jakości, np. SD/HD.

https://afterglowplayer.com

jPlayer
W pełni darmowa i udostępniana na licencji open source (MIT) biblioteka napisana w JavaScript. Możliwe odtwarzanie plików wideo i audio. Prosty w konfiguracji, możliwość dostosowania do swoich potrzeb poprzez HTML i CSS. Jest lekki, ponieważ waży zaledwie 14KB.

http://jplayer.org

Plyr
Prosty odtwarzacz audio i wideo. Możliwość dostosowania do własnych potrzeb. Oferuje odtwarzanie YouTubea i Vimeo. Wspiera nowoczesne przeglądarki. Jest bardzo lekki, waży około 10KB. Jest semantyczny - spełnia wszystkie wymagania, nie używa żadnych "hacków" typu pozycjonowania za pomocą różnych divów/spanów. Możliwość odtwarzania pełnoekranowego. Napisany w JavaScript, jQuery nie jest wymagane.

https://plyr.io

2. Technologia Flash

Flash niegdyś bardzo popularna technologia, dzisiaj traci na popularności. Najwięksi gracze jak YouTube już kilka lat temu zrezygnował z Flasha na rzecz HTML-a w wersji piątej. Flash działa na wszystkich popularnych przeglądarkach, aczkolwiek nie wszyscy użytkownicy mają zainstalowane wtyczki do jego obsługi. Widzę to po sobie, ponieważ co prawda mam możliwość skorzystania z Flasha, ale mam go domyślnie wyłączonego. Poniżej przedstawiam kilka popularnych rozwiązań, które chętnie są wykorzystywane do odtwarzania muzyki na stronach internetowych.

Premium Beat
Dostępny jest nieodpłatnie, oferuje użytkownikowi ciekawy wygląd oraz prostą obsługę. Możliwe jest układanie list odtwarzania, które dodaje się w specjalnym pliku .xml (można go dodać do katalogu ze skryptem).

Adres strony: http://premiumbeat.com

Flash MP3 Player
Jak poprzednik - ładnie wykonany projekt, który zawiera funkcjonalność listy odtwarzania. Różni się automatycznym skanowaniem wskazanego katalogu z piosenkami, i na jego podstawie generuje playlistę.

Adres strony: http://flashmp3player.org

Hoover Webdesign
Niebanalny design i możliwość definiowania koloru czcionki, tła. Niestety wersja "Free Music Player" nie posiada list odtwarzania, ale posiada intuicyjny design, co sprawia że jest prosta w użytkowaniu.

Adres strony: http://hooverwebdesign.com

3. Internet Explorer

Na koniec przedstawiam ciekawostkę. Poniższe rozwiązanie działa poprawnie wyłącznie w przeglądarce Internet Explorer. Pozostałe przeglądarki internetowe nie zinterpretują tego kodu.

<bgsound src="NAZWA PLIKU.wma" loop="infinite">

NAZWA PLIKU.wma to lokalizacja do pliku z muzyką, który musi być zapisany w formacie .wma albo .mid.

Szukasz hostingu?

Jest dużo firm oferujących hosting, ale którą wybrać? Przedstawiamy zestawienie najciekawszych propozycji i ranking hostingów (Październik 2024).

6 komentarzy

Ostatnie komentarze

Statystyki

  • 199

    Liczba porad
  • 1 996

    Liczba komentarzy
  • 5

    Narzędzi online

© 2005-2024 itporady.pl. Wszystkie prawa zastrzeżone.

Strona korzysta z plików cookies w celu realizacji usług i zgodnie z Polityką prywatności. Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.