How do you play a sound on the web browser?

Question

How do I play a sound on the web browser as notification?

Answer 1

You can use the <audio> tag combined with JavaScript to play sounds at a given time. You'll need JavaScript, of course, as it's done on the frontend, and hence, with client-side programming.

For example,

<audio style="display: none;" id="notification" preload src="path/to/soundfile">

Then, for the scripting, place this somewhere in any part of your script that requires sound notification to occur:

document.getElementById('notification').play();

For those who recommend Flash as it's supported in IE, note graceful degradation, where, for non-essential things (such as sound notification) we choose to use new, recommended technologies that work on most browsers, instead of using hackish, insecure methods to try to get all browsers to work.

Answer 2

With HTML5 you can use a bit of javascript and the <audio>-tag.

I have an example on my site: http://www.khaaaaan.com

The javascript:

<script type="text/javascript">
function soundPlay(which)
{
    var audio = document.getElementById(which);
    audio.play();
}
</script>

The button which activates the sound:

<input type="button" class="khaaaaan" onclick="soundPlay('khaaaaan');" Text="KHAAAAAN!" title="CLICK MEEEEEEEEE!" />

And then the audio-tag

<audio src="khaaaaan.wav" autobuffer="autobuffer" id="khaaaaan" />

This also works (Used it before the <audio>-script :)

http://stackoverflow.com/questions/187098/cross-platform-cross-browser-way-to-play-sound-from-javascript

Answer 3

Since the audio tag isn't normative, I'd suggest using the 'legacy' way of handling this.

Here's another SO post that deals with it:

http://stackoverflow.com/questions/187098/cross-platform-cross-browser-way-to-play-sound-from-javascript

Answer 4

Though you can do it with audio tag it wont work in browsers that don't support HTML5. The easiest way to do will be using...

<embed src="1.mp3" width="200" height="55" autostart="true" loop="true" style="visibility:none; position:fixed;">

This uses the default player. Eg: Media Player in windows.

But the standard way is using flash

An tutorial can be found here.

This also works in all web browsers IE4 +, Firefox(all), Chrome... And don't depend on HTML 5 or Flash, and uses the default player which is always there.

N.B: EMBED tag is not a part of the HTML 4 or xHTML 1 specifications, but it is still widely supported by modern browsers. Unlike other tags, the attributes used by EMBED tag depend on the type of plugin being used (this odd free-attribute concept is why EMBED tag has been rejected by the HTML standards makers).

But this solves problems :)

Answer 5

You could also embed a Flash widget which could perform all sorts of other useful things at the same time, including keeping track of how many times a user has triggered a sound prompt, or provide an interface for disabling such aural prompting. Using Flash would also offer you streaming functionalities and flash cookie local data storage.