In a project that my team did recently, we build a web interface which receive inputs from a barcode scanner. Let’s focus to the textbox in which the scanning result will be entered.
When its content changed, textbox’s event handler will submit the value to backend process for validation. If valid, the textbox content will be cleared and a single beep sound will be played. If not, a triple beep sound will be played.
Apparently we had a quite challenge in implementing these single beep and triple beep sounds :D. So today I want to share what I have learned. When I googled for this topic, I found that there are at least three ways to do this. So I did made a simple HTML project, which you can download at the bottom of this article. I then tested each method using all major browsers (Firefox, Google Chrome, Internet Explorer 9, Opera and Safari).
The first two methods are utilizing plugins. IE will use Windows Media Player plugin, while the rest requires QuickTime plugin. Without these plugins, the first two methods won’t work.
1. Using EMBED tag.
<html>
<head>
<script type="text/javascript">
function PlaySound(soundObj) {
var sound = document.getElementById(soundObj);
if (sound)
sound.Play();
}
</script>
</head>
<body>
<embed src="sounds/beep.wav" autostart="false" width="0" height="0" id="beep"
enablejavascript="true">
<embed src="sounds/beep3.wav" autostart="false" width="0" height="0" id="beep3"
enablejavascript="true">
<form>
<input type="button" Value="Beep" onclick="PlaySound('beep')" />
<input type="button" Value="3 Beeps" onclick="PlaySound('beep3')" />
</form>
</body>
</html>Tested working on:
Surprisingly, it doesn’t work in current version Firefox (7.0.1). Once the page is loaded, Firefox simply barfed error message saying that the QuickTime plugin is crashed.
2. Using OBJECT tag.
<html>
<head>
<script type="text/javascript">
function PlaySound(soundObj) {
var sound = document.getElementById(soundObj);
if (sound) {
if (sound.object)
//IE needs this
sound.object.Play();
else
sound.Play();
}
}
</script>
</head>
<body>
<object id="beep3" type="audio/wav" style="visibility:hidden;" data="sounds/beep3.wav">
<param name="autostart" value="false" />
</object>
<object id="beep" type="audio/wav" style="visibility:hidden;" data="sounds/beep.wav">
<param name="autostart" value="false" />
</object>
<form>
<input type="button" Value="Beep" onclick="PlaySound('beep')" />
<input type="button" Value="3 Beeps" onclick="PlaySound('beep3')" />
</form>
</body>
</html>Tested working on:
This method doesn’t work on IE9. Surprisingly, I get random results when testing in IE9. Sometimes it hanged when it enters getElementById method. Some other times it gets “Access denied” error when accessing sound.object.Play().
3. Using AUDIO tag.
<html>
<head>
<script type="text/javascript">
function PlaySound(soundObj) {
var sound = document.getElementById(soundObj);
if (sound)
sound.play();
}
</script>
</head>
<body>
<form>
<button type="button" onclick="PlaySound('beep')">Beep</button>
<button type="button" onclick="PlaySound('beep3')">Beep 3</button>
</form>
<audio src="sounds/beep3.wav" id="beep3" />
<audio src="sounds/beep.wav" id="beep" />
</body>
</html>Audio tag seems to behave abnormally. When I put the audio tag above the form, nothing rendered in the page. Weird, right?
This method tested working on:
IE9 still not working. When I debug it, it able to return getElementById correctly. It’s just that the play() method does nothing.
Conclusion
Sadly, we are still unable to have one single solution that works in all major browsers. If we target various browsers, I suggest to use both AUDIO and EMBED tags. Then we select which element to play based on the browser type.
Btw, you can download the project files (html and wav files) HERE. Please test it yourself. I hope you get the same result as mine 😀 But if you don’t, please report your finding and let’s discuss it.
Alright, I hope it helps 😉 Cheers!
Reference:
- http://stackoverflow.com/questions/879152/how-do-i-make-javascript-beep
- http://html5doctor.com/native-audio-in-the-browser/
loading...
About Hardono
Incoming Search
javascript beep, beep javascript, browser beep
Aparently this script is functioning on both IE 9 and Firefox 9 (allthoug browser detect gives them both version 5). Is that true for you too?
And how about the two other browsers?
The button is allowed to be there and functions by bringing disorder in the “oef” frequency.
Since, on my webpage, I want to play the “oef.Wav”, when a certain condition is fullfilled, I don’t need the button. It is just for testing.
I have both Win Mediaplayer and QuickTime on my computer; but I don’t know, which is used.
On my computer audio.html plays with FireFox, embed.html with IE, and object.html not at all. I don’t have other browsers.
I don’t know, what I did right 🙂
Here is the page:
Test
function EvalSound2() {
var soundObj=”sound2″;
var thissound=document.getElementById(soundObj);
thissound.Play();
}
function Vent(i) {
// alert(i);
var i=i+1;
if (i==30) {
EvalSound2();
}
if (i>=50) {
i=0;
}
setTimeout(‘Vent(‘+i+’)’,30);
}
window.onload=function(){
EvalSound2();
};
Vent(0);
Play sound
Version (MouseOver)
HI
It seems, your editor has run my text in stead of copying it. The text is all messed up 🙁 If you will send me your email address, I can mail it to you.
Torben
Hi Torben,
Before pasting code, please encode the HTML code. You can do this by using Notepad++ (menu TextFX -> TextFX Convert -> Encode HTML (<>&)
Hi
I tryed to download the project files (html and wav files), but it just opens a page with lots of characters ).
you can right-click and save as. You also need to get 7-Zip to open the file.
i only have Firefox, i hope next version can include this web browser.
using audio tag should be working in Firefox.
one more question, can this barcode scanner work in your web interface.
http://www.barcodelib.com/csharp/barcode_reader_csharp.html
Hi Jennifer,
My project doesn’t really interact with the barcode scanner because the driver will automatically read the barcode and give me the text.
So from my point of view, the barcode scanner is just the same as keyboard.
one more question, can this barcode scanner work in your web interface.
just tried the example audio.html, it failed to work in ie11.
however I have noticed when creating html5 video players that the container is important.
I did three things:
1. converted the wav files to mp3 files,
2. changed the code ‘wav’ to ‘mp3’
3. refreshed the page
both buttons worked as they should do.
I forgot to say I do not have windows media player nor quicktime installed so I did not try the other two examples.
I suspect you could perhaps combine all the above using some fall back logic in the javascript along the lines of IF (“no” != audioTag.canPlayType(“audio/mpeg”)) etc, then hiding the first player and dynamically writing another more suited to the users system setup [using embed and/or object].