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:

<audio src="/test/myaudio.ogg">
<p>Your browser does not support the audio element.</p>
</audio>

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

<audio controls>
  <source src="my.ogg" type="audio/ogg">
  <source src="my.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio> 

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

Dominik Wlazłowski

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem. Bloger 🙂 Anty-lewak 🙂 Pasjonat programowania, nowych technologii, a także sportu i motoryzacji.

     

Podaj dalej: 10101