HTML5 offers us not only such wonderful elements as Canvas, but many other valuable features, facilitating the creation of on-line applications. One of them is sound support (HTML5 Audio), and additionally also video support. But the most important is that we don’t have to play around strange solutions, like Java applets; we don’t event need Flash technology.

More about HTML5 Audio

In simple words, it’s a part of HTML5 specification which allows to operate audio input, playback and sound synthesis.

It all starts with the HTML5 <audio> element.

How to use HTML5 Audio

A simple example of using audio element:

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

We can show the basic UI of player controls (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>

It will play the supported file format or the information about the lack of audio element support in the browser.

Basic information about the support in browsers:

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

In addition to the controls option, we can also define autoplay and loop (playing in a loop).

Using more complex solutions

With HTML5 Audio much more advanced solutions, that we can use in our projects, could be developed.

howler.js — Modern Web Audio Javascript Library

A tool for audio playback with extended capabilities, so that we can apply them properly in any project; as well for on-line games programming.

Easy to use:

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

Project website:

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

GitHub:

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

Buzz!

Another interesting solution is:

http://buzz.jaysalvat.com/

The Buzz library also offers interesting possibilities for sound control in the browser:

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

Something else, although advanced

A small solution for sound synthesis (+ PCM encoding):

http://codebase.es/riffwave/

Good sound, but even better source code (definitely I would recommend to take a look).

Resources

At the end — links to additional resources:

– details of the HTML5 audio and video:

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

Summary

HTML5 with its uniform APIs was a true breakthrough in programming web applications. Today we have gathered in one place key information to work with HTML5 Audio; to easily implement sound support in the code of our project.

thank_you.play();