Question

I am currently designing a chatting system. How can I have a sound play (like a popping noise) when a message is received that is cross browser compatible? Is there such a thing? I want to have a similar noise/time of noise to Facebook.

Answer 1

The <audio> tag is a good HTML5 way of playing sound, but suffers from two drawbacks:

1. It won’t work with older web browsers
2. Not all web browsers support all audio formats

To get around the audio format problem, we can put multiple versions of the sound in a way that will cause web browsers which don’t support one version to skip forward to the next:

<audio controls="controls">
  <source src="sound.mp3" type="audio/mp3" />
  <source src="sound.ogg" type="audio/ogg" />
  Sorry, your web browser does not support sound.
</audio>

There are libraries which make this process easier and give you more control. jPlayer is one, which gives good cross-browser support including older browsers which do not support the <audio tag via Flash fallback.