Sound notification in web page

Few days ago I was creating a system in which it was necessary to implement a sound notification feature. Well it’s not very hard task but of course you have to be careful with the browser compatibility. At first my source was something like that:

playSound: function () {
	this.config.soundNotify.html('<embed src="' + this.config.soundFile + '.wav" hidden=true autostart=true loop=false>');
}

Actually in my Linux it was working pretty well (I tried it mainly in Chrome).
After that I decided to try it in a different environment (OS, browser…). Well I started the app in Google Chrome installed on Windows 7. It was working again :). After that…IE…and yes it wasn’t working (the browser asked me to start an add-on but this stinks…). Well IE has a tag for background sound. So I added:

In the JS I’ve added:

if ($.browser.msie) {
	document.all.sound.src = this.config.soundFile + '.wav';
}

I tried the script in Firefox…It asked me if I want to install Quick time plugin…I refused and there wasn’t any sound. Great, isn’t it? I tried it in Safari…no sound…
As you know in HTML5 you have an audio tag. If you use new browser you can use this tag and I think that it’s the best way for sound notification here is it:

if (this.config.audioSupported) {
	var soundElement = '<audio style="display:none; width: 0px; height: 0px;" id="audioNotifier" src="' + this.config.soundFile + '.wav" controls preload="auto" autobuffer></audio>';
	this.config.soundNotify.html(soundElement);
	$('#audioNotifier')[0].play();
}

The audioSupported property is the result of the:

!!document.createElement('audio').canPlayType;

But if the browser is too old it don’t have html5 implemented so…you need something else. Well almost all users have a Flash player. So it’s a good idea to use it for our goal (here you need *.swf copy of the sound file):

if (this.config.hasFlash) {
	var flashMovie = '';
	this.config.soundNotify.html(flashMovie);
	var embed = $('#swfAudio').children('embed');
	embed.play();

You can check whether there is a flash player installed with:

flashSupported: function () {
	var hasFlash = false;
	try {
		var flasObject = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
		if (flasObject) {
			hasFlash = true;
		}
	} catch(e) {
		if (navigator.mimeTypes ["application/x-shockwave-flash"] != undefined) {
			hasFlash = true;
		}
	}
	return hasFlash;			
}

Here is the result:

playSound: function () {
	if ($.browser.msie) {
		document.all.sound.src = this.config.soundFile + '.wav';
	} else {
		if (this.config.audioSupported) {
			var soundElement = '<audio style="display:none; width: 0px; height: 0px;" id="audioNotifier" src="' + this.config.soundFile + '.wav" controls preload="auto" autobuffer></audio>';
			this.config.soundNotify.html(soundElement);
			$('#audioNotifier')[0].play();
		} else if (this.config.hasFlash) {
			var flashMovie = '';
			this.config.soundNotify.html(flashMovie);
			var embed = $('#swfAudio').children('embed');
			embed.play();
		} else {
			this.config.soundNotify.html('<embed src="' + this.config.soundFile + '.wav" hidden=true autostart=true loop=false>');
		}
	}
}

Of course if the user use old version of firefox, don’t have a flash player and quick time player plugin installed this method is going to fail :). So it’s under development but it’s quite good way of notifying with sound.

推荐订阅源

Minko Gechev's blog