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.

19 maja, 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:

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

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

&amp;lt;audio controls&amp;gt;
  &amp;lt;source src=&amp;quot;my.ogg&amp;quot; type=&amp;quot;audio/ogg&amp;quot;&amp;gt;
  &amp;lt;source src=&amp;quot;my.mp3&amp;quot; type=&amp;quot;audio/mpeg&amp;quot;&amp;gt;
  Your browser does not support the audio element.
&amp;lt;/audio&amp;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):

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();