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