Audio Player dla TYPO3

Podcasty i audioguide potrzebują odtwarzacza, który obywa się bez usług zewnętrznych

Kto chce udostępniać treści audio na stronie TYPO3, staje przed nieprzyjemnym wyborem: albo usługa zewnętrzna taka jak SoundCloud czy Spotify, która wysyła dane użytkowników na serwery zewnętrzne i dyktuje wygląd, albo natywny odtwarzacz HTML5, który w domyślnym ustawieniu przeglądarki jest ledwie użyteczny. nim_html5audioplayer zamyka tę lukę. Rozszerzenie dostarcza w pełni zintegrowany z TYPO3 odtwarzacz audio z obsługą playlist, paskiem postępu i kontrolą prędkości. Wszystkie pliki audio pozostają na własnym serwerze, żadne zewnętrzne żądanie nie opuszcza strony.

Dla muzeów, placówek edukacyjnych i wydawnictw z formatami podcastowymi to twarde wymaganie: audioguide nie mogą ustawiać ciasteczek trackingowych, treści szkoleniowe muszą działać bez połączenia z internetem w intranecie, a podcasty korporacyjne mają pojawiać się w identyfikacji wizualnej organizacji. nim_html5audioplayer spełnia wszystkie trzy scenariusze jednym elementem treści.

Typowe scenariusze sięgają od muzeum po wewnętrzny portal szkoleniowy

Najczęstszym scenariuszem są audioguide w muzeach i na wystawach. Zwiedzający skanują kod QR, trafiają na stronę TYPO3 i słuchają komentarza do eksponatu. Odtwarzacz uruchamia się bez autoplay, pokazuje pasek postępu i pozwala na dostosowanie prędkości między 0,5x a 2x. Przy typowej wystawie z 30 do 50 stanowiskami funkcja playlisty dostarcza ciągły tour bez konieczności ręcznej nawigacji między stronami.

Drugie duże pole zastosowania to podcasty korporacyjne. Firmy, które przetwarzają swoją wewnętrzną wiedzę jako serię audio, potrzebują odtwarzacza osadzonego w istniejącej witrynie TYPO3, a nie żyjącego na platformie zewnętrznej. nim_html5audioplayer dostarcza do tego odtwarzacz w identyfikacji wizualnej z listą odcinków, markerami rozdziałów i opcją pobrania. Redakcja zarządza odcinkami jak zwykłymi treściami TYPO3 przez backend.

Trzecim scenariuszem są portale do nauki języków i platformy e-learning. Tutaj szczególne znaczenie ma kontrola prędkości: uczący się mogą zwolnić dialogi lub odtwarzać powtórzenia w przyspieszonym tempie. W połączeniu z fe_login treści audio premium można chronić za logowaniem.

Architektura techniczna opiera się na natywnym API HTML5 bez frameworka JavaScript

nim_html5audioplayer wykorzystuje HTML5 Audio API przeglądarki i renderuje interfejs odtwarzacza przez szablony Fluid. Nie ma zależności od jQuery, Reacta ani innego frameworka. Dzięki temu czas ładowania pozostaje minimalny: sam odtwarzacz waży poniżej 15 KB (CSS + JS), a pliki audio są zarządzane przez FAL (File Abstraction Layer) i dostarczane przez streaming.

Rozszerzenie rejestruje własny element treści w backendzie TYPO3. Redaktorzy wybierają pliki audio z mediateki FAL, ustawiają tytuł, opis i opcjonalny obraz podglądu. Funkcja playlisty grupuje kilka wpisów audio w sortowalnej liście. Renderowanie przejmują szablony Fluid, które można nadpisać przez SiteSet lub własny sitepackage.

Dla paska postępu odtwarzacz zapisuje aktualny stan odtwarzania w LocalStorage przeglądarki. Gdy odwiedzający wraca, odtwarzacz skacze do ostatniej pozycji. Działa to bez ciasteczek i bez sesji serwerowej.

Częste problemy dotyczą formatów audio i przeglądarek mobilnych

Dominującym tematem wsparcia jest kompatybilność formatów audio. MP3 działa we wszystkich przeglądarkach, OGG Vorbis tylko w Firefoksie i Chromie, AAC tylko w Safari i Chromie. Kto chce maksymalnej kompatybilności, przechowuje każdy plik jako MP3. Kto potrzebuje lepszej jakości przy mniejszym rozmiarze pliku, dostarcza MP3 jako fallback i Opus jako format podstawowy.

Drugi problem: blokowanie autoplay na urządzeniach mobilnych. iOS i Android od 2018 roku blokują automatyczne odtwarzanie audio bez interakcji użytkownika. nim_html5audioplayer respektuje tę politykę przeglądarki i uruchamia audio wyłącznie po jawnym kliknięciu. Kto mimo to skonfiguruje autoplay dla muzyki w tle, na urządzeniach mobilnych otrzyma ciszę bez komunikatu o błędzie.

Trzeci temat to wydajność przy dużych playlistach. Od 100 wpisów na pojedynczej playliście czas renderowania DOM staje się zauważalny. Rozwiązanie: dzielić playlisty na bloki tematyczne po 20 do 30 wpisów i organizować je przez kategorie w backendzie.

Rozszerzenie działa pod TYPO3 v11 i v12, status v13 zależy od opiekuna

nim_html5audioplayer zostało pierwotnie opracowane dla TYPO3 v8 i v9. Podstawowa funkcjonalność (HTML5 Audio API, integracja FAL) jest technicznie stabilna i działa pod v11 i v12 bez większych dostosowań. Dla TYPO3 v13 obecnie nie istnieje oficjalna deklaracja kompatybilności opiekuna. Rozszerzenie nie używa jednak żadnych API usuniętych w v13, dzięki czemu migracja jest w większości przypadków możliwa przy niewielkim nakładzie.

Gosign przy aktualizacjach TYPO3 sprawdza, czy używane rozszerzenia audio są nadal kompatybilne, i w razie potrzeby zaleca alternatywy. Gdy rozszerzenie nie jest już rozwijane, tę samą funkcjonalność można odtworzyć przez własny element treści z natywnym HTML5 Audio API i szablonami Fluid, zwykle w ciągu dwóch do trzech dni roboczych programisty.