Poniżej pokażę, jak można szybko dodać do strony internetowej podkład muzyczny. Dodatkowo sprawdzimy, 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 autoodtwarzanie. 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.

↑ Skocz do góry

Autor: Bartosz Stefanicki.
Tagi: , , , , , .

Dodaj komentarz

3 komentarzy do "Podkład muzyczny na stronie"

avatar
Sortuj wg:   najnowszy | najstarszy | oceniany
Comandeer
Gość
Powiem szczerze, że jestem zawiedziony. bgsound nie używa się od 5 lat, zamiast niego lepiej już używać embed - przynajmniej działa prawie we wszystkim. Flash jest i tak o wiele lepszym rozwiązaniem - jest dostępnych więcej formatów. Jednak i to nie jest rozwiązanie przyszłościowe - teraz na topie jest znacznik audio z HTML5 i formaty WebM (Vorbis) oraz Wav. (No, i MP3 dla Safari i IE). Aha, zapomniałem, że podkład muzyczny "odtwarzany w tle bez koniecznej ingerencji użytkownika" jest cholernie wkurzający i przeczy zasadzie webusability. Dźwięk powinien być odtwarzany jedynie na wyraźne życzenie usera. Ja dźwięków używam jedynie w komunikatorze… Czytaj więcej »
Comandeer
Gość

OK, bgsound działa w IE, ale po co używać co najmniej 2 rozwiązań (bgsound i drugie dla reszty), skoro embed działa i tu i tu?

Bartosz Stefanicki
Gość

Znacznik bgsound jest rozszerzeniem Internet Explorer i w nim działa - tak napisałem w treści porady. Zachodzi czasem konieczność skorzystania z takiego "autoplay" rozwiązania - dlatego nie wykluczajmy go.

wpDiscuz