jgchristopher blog

Browsers and playing sound

I just finished a project that required choosen sound(.wav) files to be played when a certain event occured. This became a challenge considering I needed it to work in IE and Firefox. It seemed everytime I found a viable solution in one browser, it either wouldn't work at all, or it would destroy the look-n-feel of the application. Below are what I needed to accomplish and what code works the best across both browsers.

I needed to play a sound when an event occured. In this case, the event was the arrival of a certain alert. To accomplish this, I decided to dynically add the html sound code needed using javascript and DOM manipulation. Note: if you only need to do this for internet explorer, the best solution, in my opinion, is to use the <img dynsrc="something.wav" />. That worked flawlessly in IE.

First thing to note about Firefox, you will need to have quicktime to play the .wav file. That is fine but, it will break the above mentioned code because IE will try to use quicktime to play the .wav file as well and it just simply fails. There is probably a way around this problem but, I don't have the time nor patience to deal with windows :)

In the end, the best solution was to use the <embed > tag. Now trying to put this anywhere within a table in Firefox, causes a lot of space to be used, no matter what you set the width and height to. If it is outside a table, it will not use up a ton of space. Since my application is a portlet and dependent upon what ever the Portal(Jetspeed, in this case) does to layout the portlets(it uses tables:( ), I needed to add my <embed> tag outside of this. I decided to use the following trick (see code below). Is it the most elegant solution?, NO. but it works for now :)

posted by jgchristopher @ 6:24 AM