HTML5 Audio. Obsługa dźwięku w HTML5 i JavaScript.

javascript-html5-tutorial.pl

HTML5 Audio. Obsługa dźwięku w HTML5 i JavaScript.

Maj 19th, 2014

Dominik-W

HTML5 oferuje nam nie tylko takie rewelacyjne elementy jak Canvas, ale wiele innych cennych funkcjonalności, ułatwiających tworzenie aplikacji on-line. Przykładem może być obsługa dźwięku (HTML5 Audio) i video, przy czym nie musimy korzystać z różnych dziwnych rozwiązań, typu aplety Java, ani nawet z obiektów Flash.

Więcej o HTML5 Audio

Jest to część specyfikacji HTML5 pozwalająca na obsługę wejścia audio, odtwarzanie i syntezę dźwięku. Wszystko zaczyna się od elementu HTML5, jakim jest <audio>.

Jak używać HTML5 Audio

Poniżej najprostszy przykład użycia elementu audio:

&lt;audio src=&quot;/test/myaudio.ogg&quot;&gt;
&lt;p&gt;Your browser does not support the audio element.&lt;/p&gt;
&lt;/audio&gt;

Możemy wyświetlić podstawowe UI kontroli odtwarzania (play, volume):

&lt;audio controls&gt;
  &lt;source src=&quot;my.ogg&quot; type=&quot;audio/ogg&quot;&gt;
  &lt;source src=&quot;my.mp3&quot; type=&quot;audio/mpeg&quot;&gt;
  Your browser does not support the audio element.
&lt;/audio&gt;

Odtworzony zostanie obsługiwany format pliku lub pokazana informacja o braku wsparcia audio w przeglądarce.

Podstawowe informacje o wsparciu w przeglądarkach:

http://www.w3schools.com/html/html5_audio.asp

Oprócz opcji controls, możemy zdefiniować także autoplay (automatyczne odtwarzanie) oraz loop (odtwarzanie w pętli).

Korzystanie z rozbudowanych rozwiązań

Bazując na tych możliwościach, mogło powstać wiele bardziej zaawansowanych rozwiązań, które możemy wykorzystać w naszych projektach.

howler.js – Modern Web Audio Javascript Library

Narzędzie do odtwarzania dźwięku o rozbudowanych możliwościach, dzięki którym możemy zastosować je właściwie w dowolnym projekcie; jak najbardziej także przy programowaniu gier on-line.

Zgrabny w użyciu:

var sound = new Howl({ urls: ['sound.mp3', 'sound.ogg']}).play();

Strona projektu:

http://goldfirestudios.com/blog/104/howler.js-Modern-Web-Audio-Javascript-Library

Dostępny także na GitHub:

https://github.com/goldfire/howler.js

Buzz!

Kolejnym godnym uwagi rozwiązaniem jest:

http://buzz.jaysalvat.com/

Biblioteka Buzz również oferuje ciekawe możliwości kontroli dźwięku w przeglądarce:

http://buzz.jaysalvat.com/documentation/buzz/

Coś innego, aczkolwiek zaawansowanego

A jest to niewielkie rozwiązanie syntezy dźwięku (+ PCM encoding):

http://codebase.es/riffwave/

Niezłe brzmienie, ale jeszcze lepszy kod źródłowy, na który polecam rzucić okiem.

Zasoby

Na zakończenie linku do dodatkowych zasobów:

– szczegóły audio oraz video:

http://www.tutorialspoint.com/html5/html5_audio_video.htm

Podsumowanie

HTML5 ze swoimi jednolitymi API to prawdziwy przełom w programowaniu aplikacji WWW. Dziś zebraliśmy w jednym miejscu kluczowe informacje pozwalające pracować z HTML5 Audio, aby bezproblemowo implementować obsługę dźwięku w kodzie naszego projektu.

thank_you.play();