Odtwarzanie muzyki i innych rodzajów dźwięku już od długiego czasu jest dostępne w przeglądarce internetowej. Ułatwienia jakie wprowadzono w HTML5 pod kątem używania multimediów spowodowało nie małą rewolucję – muzyki możemy słuchać wprost z serwisów stremingowych typu YouTube Music, Spotify Player, Tidal, SoundCloud i wielu więcej.

Odtwarzanie dźwięku jest też często wykorzystywane w grach przeglądarkowych a ścieżka dźwiękowa z muzyką często jest używana na kreatywnych stronach internetowych w ramach tworzenia unikalnych doświadczeń lub artystycznej ekspresji. Wiele nagrodzonych stron w konkursach webdesignerskich wykorzystuje ścieżkę dźwiękową w celu pełniejszego oddziaływania na użytkownika. Popularność podcastów, audiobooków i stron z kursami online też powoduje, że do wpisów blogowych, artykułów coraz częściej będzie dołączona wersja do odsłuchania lub załącznik w formie audio.

W tym artykule jest wszystko co trzeba wiedzieć aby świadomie korzystać z różnych formatów zapisu, umiejętnie wybrać profil kodowania oraz umiejętnie umieścić taki materiał na stronie bez korzystania z serwisów zewnętrznych. Jak zwykle nie zabraknie kwestii SEO, dobrych praktyk i ciekawostek.

Odtwarzanie dźwięku w HTML5

Odtwarzanie audio bardzo przypomina sposób dołączania wideo na stronach internetowych. Tak na marginesie, tu jest osobny wpis o dołączaniu i optymalizacji plików wideo dla stron internetowych.

O ile w przypadku wideo mamy wiele argumentów przemawiających za tym aby hostować pliki wideo w zewnętrznych serwisach typu YouTube, o tyle w przypadku audio ten problem jest znacznie mniej skomplikowany. Oczywiście istnieją serwisy takie jak SoundCloud, które pozwalają na osadzenie pliku audio na stronie internetowej w specjalnym odtwarzaczu ale nic nie stoi na przeszkodzie aby plik audio umieścić na własnym serwerze. Zajmuje on bowiem relatywnie mniej miejsca niż plik wideo o tej samej długości a jego kodowanie nie musi być tak rygorystycznie dostosowywane do konkretnych klas urządzeń.

Umieszczanie pliku audio na stronie internetowej

Media dźwiękowe możemy umieścić na stronie za pomocą tagu audio:

<audio controls src="plik.mp3">Twoja przeglądarka nie obsługuje HTML5 audio</audio>

W ten sposób wyświetli się nam odtwarzacz. Jak na razie jego wygląd i sposób obsługi zależy od konkretnej przeglądarki internetowej:

Ten odtwarzacz także może posiadać opcjonalne atrybuty:

  • controls – dzięki temu atrybutowi widzimy przyciski umożliwiające łatwe odtworzenie, zapauzowanie i wznowienie odtwarzania a także te odpowiedzialne za pobieranie pliku,
  • autoplay – automatyczne odtwarzanie zaraz po rozpoczęciu pobierania się pliku,
  • loop – materiał ze ścieżką audio będzie się zapętlać po odtworzeniu,
  • preload – atrybut ten pobiera plik jeszcze zanim użytkownik zdecyduje się go odtworzyć,
  • muted – wyciszenie dźwięku (wymagane do autoodtwarzania tuż po wejściu na stronę bez dokonywania interakcji ze strony użytkownika).

O co chodzi z tym wyciszeniem przy autoodtwarzaniu? Otóż, tak jak w przypadku wideo, jeżeli użytkownik niczego nie kliknie na stronie, to dźwięk w pliku dźwiękowym ani ścieżka audio w pliku wideo nie ma prawa się odtworzyć. Jest to celowy zabieg twórców przeglądarek chroniący użytkowników przed przypadkowym i niespodziewanym zakłóceniu ciszy. Niektóre serwisy są zwolnione z tego mechanizmy, np. filmy na YouTube mogą się odtwarzać – są na białej liście.

Teraz już wiesz dlaczego niektóre bardzo kreatywne strony lub gry proszą o kliknięcie jakiegoś przycisku przed odtworzeniem się efektów, którym towarzyszy podkład muzyczny lub efekty dźwiękowe – „Click and Hold” lub „Press Space” to po prostu obejście tego ograniczenia.

W tagu audio możemy zawrzeć wiele alternatywnych źródeł w postaci potomnych tagów source:

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

Jeżeli przeglądarka obsługuje odtwarzanie OGG skorzysta z formatu OGG jeżeli nie, wykorzysta wersję zakodowaną w MP3. O tym po co umieszczać jeden plik w kilku formatach na raz można przeczytać w dalszych punktach.

Sterowanie/kontrola odtwarzaniem dźwięku na stronie internetowej

Nie ma potrzeby pokazywania tego standardowego odtwarzacza. Odtwarzacz może być ukryty a dźwięk może się odtwarzać w tle strony. Sterowanie odtwarzaniem jest możliwe za pomocą dowolnego elementu DOM. Takie działania jak wyciszenie, play, pauza jest możliwe za pomocą specjalnych metod. Przykładowo kliknięcie w link play może wywoływać funkcję playpause();

$('#play').click(function(){
    playpause();
});

Ciało takiej funkcji może wyglądać następująco:

function playpause(){ 
   var audio = $('#player'); 
   if (audio.paused) {
       audio.play();
   } 
   else {
      audio.pause();
   } 
}

Możemy też przesuwać suwak odtwarzania za pomocą metody currentTime:

audio.currentTime += 15;

Taka instrukcja spowoduje przeskok odtwarzania o 15 sekund do przodu. Dzięki takim prostym instrukcjom stworzyłem swoją aplikację do streamingu muzyki wzorując się na Tidalu / Spotify / Google Music:

Formaty audio obsługiwane przez przeglądarki

MP3 choć do niedawna był bezkonkurencyjnie popularnym i powszechnym formatem do stratnego zapisu muzyki, nie jest jedynym formatem dostępnym na rynku. W Internecie jest wypierany przez swoich następców. Ale wszystko po kolei…

MP3

Format MP3 choć jest znany już od 1991 roku nadaje się do używania w otwartym Internecie dopiero od 2012 roku – wtedy wygasła jego ochrona patentowa. Specyfikacja formatu znajduje się w dokumencie RFC 5219.

MP3 (analogicznie do kompresji obrazów typu JPEG) obcina trudne do uchwycenia przez przeciętnego człowieka niuanse i szczegóły. Wykorzystując niedoskonałość w percepcji dźwięku spłyca i upraszcza informacje aby przy dużej oszczędności rozmiaru danych zachować relatywnie wysoką jakość materiału dźwiękowego. Jest to obecnie najbardziej rozpowszechniony format zapisu dźwięku.

Zaletą MP3 jest szerokie wsparcie przeglądarek. Jakość dźwięku jest gorsza od OGG Vorbis przy niskich bitrate’ach ale za to lepiej koduje w przypadku wysokiego bitrate (powyżej 128kbps). Gorzej wypada od AAC niezależnie od ustawień kodowania.

Format MP3 w ramach HTML5 jest wspierany przez wszystkie wersje Internet Explorer, Chrome i Safari. Nie jest zaś wspierany przez starsze wersje Firefox i Opera.

Typ MIME dla mp3 to: audio/mpeg lub audio/mp3

OGG Vorbis

OGG Vorbis to kodek Vorbis z kontenerem OGG. Może obsłużyć ponad 16-bitową rozdzielczość dźwięku o częstotliwości próbkowania od 6 do 48 kHz. Od początku istnienia nadawał się do używania w ramach otwartego Internetu, bo był rozpowszechniany na licencji BSD / GNU GPL.

Zaletą Ogg Vorbis jest nieco lepsza jakość dźwięku przy bardzo niskich bitrate’ach (128kbps i mniej). Z tego powodu był często wykorzystywany w internetowych radiach. Kodek Vorbis jest też używany w formacie WebM – w otwartym standardzie kodowania multimediów (wideo, audio i wideo lub tylko audio) rozwijanym przez Google.

Ogg jest wspierany w starszych wersjach Opery, Firefox i Chrome ale za to nie jest wspierany w starszych wersjach Internet Explorer i Safari.

Typ MIME dla ogg vorbis to: audio/ogg

M4A / AAC

AAC (Advanced Audio Coding) jako część standardu MPEG-4 jest następcą MP3. Opublikowany już w 1997 roku. Zapisując dźwięk do formatu AAC uzyskujemy mniejszy rozmiar plików wyjściowych i jednocześnie lepszą jakość dźwięku w porównaniu do MP3.

AAC ma podobne pokrycie wsparcia jak MP3 tzn. od wielu lat jest wspierany w przeglądarkach IE, Chrome i Safari zaś nie ma tego wsparcia w starszych wersjach przeglądarek Opera i Firefox.

Typy MIME dla aac to: audio/aac

Wave

Powinienem świadomie pominąć w tym momencie wave (.wav), którego stosowanie w Internecie może być całkowicie bezzasadne (tak samo jak przy obrazach nie wykorzystujemy surowego formatu BMP). Jednak w przypadku ultra-krótkich plików o niskiej rozdzielczości i częstotliwości próbkowania jego użycie może być podyktowane oszczędnością zasobów procesora.

Wave nie kompresuje dźwięku stąd nie nadaje się do kodowania dłuższych fragmentów audio ale za to jego wsparcie (także historycznie) jest najszersze. Tylko w starszych wersjach Internet Explorer pojawiają się problemy ze wsparciem.

Typy MIME dla formatu wave: audio/wave, audio/wav, audio/x-wav, audio/x-pn-wav

Kodowanie dźwięku dla potrzeb stron i aplikacji internetowych

Komputerowe przetwarzanie dźwięku jest pod wieloma względami jest podobne do przetwarzania grafiki. Tutaj też mamy rozdzielczość, barwy i bitrate.

Niektóre rzeczy mogą być trudne do pojęcia dopóki nie odsłuchamy na dobrym sprzęcie kilku przykładów zakodowanych ze skrajnymi wartościami poszczególnych parametrów zapisu.

Rozdzielczość bitowa dźwięku

Rozdzielczość bitowa dźwięku (lub inaczej głębia ang. bit depth) to liczba bitów jaką można użyć do zapisania jednej próbki dźwięku. Jak pamiętamy z lekcji fizyki, dźwięk to fala i można ja zapisać z różnym stopniem dokładności (tak samo jak zdjęcie). Tak wygląda zapis w czterech bitach:

Na powyższym rysunku użyto 4 bitów i dzięki temu można było zapisać 16 różnych poziomów wartości dla chwilowej wartości sygnału. Im więcej bitów przeznaczymy na zapis fali dźwiękowej tym uzyskujemy mniejszy stosunek sygnału do szumu (ang. SNR – Signal To Noise Ratio).

Ciekawostka: Ten szum przy 8-bitach to optymalizacja o nazwie dithering.

Przy ośmiu bitach tych różnych poziomów mamy 256 a przy 16 bitach (2 do potęgi 16) aż 65536. Dlatego 16 bit jest czymś w rodzaju złotego środka (lub jak kto woli sweet spotu). Wiele narzędzi do konwersji audio ustawia rozdzielczość na 16 bitów i jest to powiedzmy wartość optymalna do jakiej przywykliśmy. Profesjonalne karty muzyczne i oprogramowanie do studyjnej edycji audio obsługują 24, 32 i więcej bitów. Ludzkie ucho nie jest w stanie wychwycić różnic odtwarzając na komputerze dźwięku 16bit a 24 bit. Są one poniżej -80db (ale nie mówcie tego swoim kolegom audiofilom bo zaczną się z wami kłócić).

Ciekawostka: To między innymi ten parametr techniczny przyczynił się do renesansu płyt winylowych i jest podbijany przez zwolenników audiofilskich konwerterów.

Częstotliwość próbkowania audio

Częstotliwość próbkowania w kontekście audio to parametr, który określa ilość zapisanych próbek w jednej sekundzie.

Naturalna fala dźwiękowa jest idealnie ciągła, a zapis komputerowy jest przerywany. Mówimy wtedy że dokonujemy konwersji sygnału ciągłego na dyskretny. Standardem zapewniającym optymalną jakość dźwięku jest 44.1 kHz i 48 kHz. 32 kHz może wystarczyć do podcastów i nieskomplikowanego sygnału. Najlepiej posłuchać przykładów:

Liczba kanałów

Stereo czyli da kanały to obecnie standard zapisu muzyki zarówno dla potrzeb Internetu a nawet rynku muzycznego. Odsłuch mono może powodować dyskomfort i jest mało atrakcyjne dla ludzkich uszu – tym bardziej w słuchawkach. Większość urządzeń używanych do przeglądania stron internetowych obsługuje odtwarzanie w dwóch kanałach.

Skoro jesteśmy przy kanałach, warto wiedzieć, że niektóre stratne metody zapisu dźwięku pozwalają na zapis w trybie Joint-Stereo. Tryb ten zamiast zapisywać dwie niezależne i osobne ścieżki, wykorzystuje podobieństwo pomiędzy nimi, aby zwiększyć efektywność kompresji.

Bitrate

Bitrate jest najważniejszym parametrem w stratnej kompresji dźwięku. Uwzględniając wszystkie powyższe parametry, określa ile bajtów ma być użytych do zapisu jednej sekundy dźwięku.

Oryginalne audio zapisane do dwukanałowego dźwięku 44.1 kHz 16-bit można teraz kompresować za pomocą stratnych technik kompresji.

Zapis w MP3 z wykorzystaniem 128kbps, powinien być optymalny dla prostych ścieżek dźwiękowych i na przykład podcastów. Dla zapewnienia bardzo dobrej jakości, której różnica będzie do wychwycenia przy muzyce na zewnętrznych głośnikach. Można parametr ten zwiększyć do 192kbps (w AAC będzie to już bardzo dobra jakość). Kodowanie powyżej 256kbps jest w stanie oszukać zmysł słuchu większości osób i nie dostrzegą oni różnicy słuchając próbki zapisanej w WAVE a tej w MP3 nawet na bardzo dobrych kolumnach i wzmacniacza, który wiernie odtwarza dźwięk bez zniekształceń.

Im większy bitrate, tym większy rozmiar pliku audio i szansa, że wyjściowy materiał będzie wysokiej jakości. Jednocześnie, zbyt wysoki bitrate zwiększa ryzyko, że po prostu zmarnujemy niepotrzebną przestrzeń a poprawa jakości nie będzie miała znacznego wpływu na subiektywne wrażenia osoby słuchającej muzyki czy innego materiału dźwiękowego.

Im niższy bitrate, tym mniejszy rozmiar pliku audio i ryzyko tego, że wyjściowy materiał będzie się charakteryzował zbyt małą szczegółowością. Jednocześnie, zwiększamy szansę, że zaoszczędzimy wiele miejsca zachowując w miarę dobre wrażenia ze słuchania odtwarzanego mateirału.

Jest jeszcze VBR czyli zmienny bitrate. W tym przypadku chwilowy bitrate dobierany jest do stopnia skomplikowani sygnału. To pozwala zaoszczędzić rozmiar zapisu w przerwach ciszy aby tak zaoszczędzone bity spożytkować na zapis bardziej skomplikowanych i głośniejszych momentów w utworze.

Inne aspekty optymalizacji audio dla stron WWW

Tak jak w przypadku wideo, kodowanie to nie jedyna optymalizacja jakiej trzeba dokonać aby można było opublikować pliki audio w Internecie.

Przechowywanie plików audio na serwerze

Tak jak każdy zasób statyczny, zaleca się umieszczać je na serwerze plików aby odciążyć serwer HTTP z serwowania statycznej zawartości. Pliki audio dużych zbiorów mogą zajmować dużo miejsca. Jednym z rozwiązań może być hostowanie ich w usługach typu Amazon S3 czy Google Cloud Storage.

Pliki takie mogą być serwowane za pomocą CDN aby przyspieszyć transfer i skrócić opóźnienia w przypadku użytkowników łączyć się z innych rejonów świata.

Wykorzystanie pamięci podręcznej

Dla plików audio można też zastosować instrukcje Expires / Cache – Control aby wykorzystać pamięć podręczna przeglądarki. W przypadku wielokrotnego odtwarzania tego samego pliku oszczędności transferu będą bardzo duże.

ExpiresByType audio/ogg "access 1 year"
ExpiresByType audio/mpeg "access 1 year" 
ExpiresByType audio/mp3 "access 1 year"  
ExpiresByType audio/acc"access 1 year"

Optymalizacja SEO plików dźwiękowych

Wszystkie treści publikowane w Internecie można jakoś optymalizować pod kątem SEO. Wyszukiwarki indeksują nie tylko strony ale zdjęcia, filmy i – no właśnie – pliki audio.

  • opisowe nazwy plików – mogą one sprawić, że klip będzie widoczny na zapytania użytkowników i pośrednio wpłynie na dobre pozycje strony, która zawiera do niego odniesienie.
  • atrybut title – materiały nie mogą mieć wartości alt, ale za to mogą mieć wartość title, której zalety mogą pokrywać się ze stosowaniem opisów alt dla zdjęć.
  • minimalizacja rozmiaru – dobre parametry klipu nagrania audio wpłynie pozytywnie na user experience a dobre user experience to wysokie pozycje.
  • zawartość wewnątrz tagu – Tę samą funkcję co alt przy obrazku ma treść umieszczana wewnątrz tagu <audio></audio>. Zgodnie z graceful degradation tekst się pojawi, jeżeli z jakichś powodów dźwięk nie może być odtworzony.
  • mapa strony sitemap.xml – materiały, do których nie prowadzą linki w tym nagrania audio to właśnie przypadek, gdzie mapy witryn XML są stosowane poprawnie,
  • metadane – pliki z multimediami posiadają swoje metadane, kto wie czy wyszukiwarki ich nie analizują lub będa to robić w niedalekiej przyszłości.
  • transkrypcja zawartości podcastu w formie tekstowej.

Podsumowanie

Optymalizacja dźwięku jest równie istotna co optymalizacja wideo, grafiki i zdjęć. Stosowanie standardów i dobrych praktyk umożliwi dotrzeć z treściami audio do szerokiego grona użytkowników nie marnując transferu i zapewniając dobre doświadczenia użytkowników. Mało kto wie, że MP3 w zastosowaniu typowo webowym może być spokojnie zastąpiony na M4A/AAC a przeciętna osoba nie dostrzeże różnicy pomiędzy bezstratnym FLAC a jakością MP3 192kbps.

Źródła

Oceń artykuł na temat: Optymalizacja dźwięku dla stron internetowych
Średnia : 4.8 , Maksymalnie : 5 , Głosów : 19