I was trying to get a sound file to play on a mousover. I have an array of sounds. I would like a certain sound to play when the mouse hovers over a certain image. I was provided some nice code the other day by o.k.w, but I cant get sound to play with his code can anyone help?

HERES THE SOUND CODE......................I CANT GET TO WORK....................................................

"; }
   <span id="a1"></span>
   <div id="a1" onmouseover="playSound('http://localhost/abcfun/abc_audio/a.mp3');">&nbsp</div>
-------------------------------------------------------------------------------------------

HERES THE CODE THAT WORKS (IMAGE ONMOUSEOVER CODE FROM o.k.w.)------------------------------------------------------------------------------

  <div id="a1"><img src="http://localhost/abcfun/abc_images/a1.png" alt="image" onmouseover=";swapImg(this, true, 'a1.png', 'a.png');" onmouseout="swapImg(this, false, 'a1.png', 'a1.png');" /></div><img id="a2" style="display: none;" />
------------------------------------------------------------------
can anyone help?
thanks
jb

3 answers

o.k.w 2355
0
points
This was chosen as the best answer

OK, I was very relunctant to answer this question because I 'hate' not able to control turning off audio on websites that I visit.

Anyway here we go.

The code in the question has 2 flaws, there shouldn't be 2 identical ID ("a1"), remove/rename the one for the div will do.

Also the playSound function has a syntax error. It should be:

<script type="text/javascript">
function playSound(soundfile) {
    document.getElementById('a1').innerHTML="<embed src='" +soundfile+ "' hidden='true' autostart='true' loop='false' />"; 
    //examine the single and double quotes carefully
}
</script>

To have the sound played on mouseover together with the image swapping, you can add the playSound method call within the swapImage method to play the same sound.

    if(isHover) {
       cloneImg.src = 'http://localhost/abcfun/abc_images/' + imgHover;
       cloneImg.style.display = 'block';
       playSound('mysoundfile'); //<== add here
    }

Do note that the audio file should be small in size else you might get horrible latency between mouseover and the actual playing of the sound.

Keep the audio length short also, should not be anything more than 0.5 second.

One last thing. If you can't get the sound to play locally, put it in the server and try as the MIME type of the audio file will probably not be identified correctly via local filesystem.

Here's a demo page of it at http://74er.net/labs/mouseover-audio.html. Tested on FF3.6, IE8 and Chrome.

Answered almost 7 years ago by o.k.w
  • Thank you o.k.w., I really appreciate the help. Battle Tested almost 7 years ago
  • something is still wrong somewhere, I even changed the .mp3 to a .wav file and nothing happens. Battle Tested almost 7 years ago
  • Which browser did you test it with? o.k.w almost 7 years ago
  • I tested on IE, you mentioned earlier that It may not work locally, but it may work remotely, why is that? Battle Tested almost 7 years ago
  • if you are testing your code via file system and not a webserver, the mime type of the wav/mp3 file is unlikely to be identified correctly. I've put a demo page at my site, see my updated answer for the url. o.k.w almost 7 years ago
0
points
<script type="text/javascript">
      function playSound(soundfile) {
         document.getElementById('a1').innerHTML="<embed src='" +soundfile+ "' hidden='true' autostart='true' loop='false' />";
           }                         
      function swapImg(imgObj, isHover, imgOrg, imgHover) {
      imgObj.src = 'http://localhost/abcfun/abc_images/' + (isHover ? imgHover : imgOrg);
        var cloneImg = document.getElementById('a2');
        if(isHover) {
           cloneImg.src = 'http://localhost/abcfun/abc_images/' + imgHover;
           cloneImg.style.display = 'block';
           playSound('http://localhost/abcfun/abc_audio/a.wav');
        }
        else
           cloneImg.style.display = 'none';
       }
   </script>
  <div id="a1">(img src="http://localhost/abcfun/abc_images/a1.png" alt="letter 'a' as in apple" onmouseover=";swapImg(this, true, 'a1.png', 'a.png');" onmouseout="swapImg(this, false, 'a1.png', 'a1.png');" /></div><img id="a2" style="display: none;" />
Answered almost 7 years ago by Battle Tested
  • thats the code, I changed a couple of arrows for the code to show Battle Tested almost 7 years ago
  • You are right, it works, thanks. I will work on it some more. Glad you could share your expertise with me. thanks jb Battle Tested almost 7 years ago
  • ok, I do not have time to test it but one obvious issue is you need a dummy container "a1" like in the original code. This is the one which the playSound will insert the sound HTML. If your latest code, "a1" is used by the div for the image, which conflicts. Why not you add a span, say id=audioSpan and the change the "document.getElementById('a1')" inside playSound to "document.getElementById('audioSpan')"? o.k.w almost 7 years ago
  • thats where I get a disconnect, how does the code know when to play a certain sound file if you are not specifying which div goes to which sound file? Battle Tested almost 7 years ago
0
points

Its only one thing, your code works by itself but it is not incorporated into the original code you gave me. In other words, I am using onmouseover for images and sound for id="a1" , "b1", "c1" and so on. I included the code that I was using earlier, is it right? Because it is important that the kids be able to hover over a letter and they hear the letter name in the program. thanks jb

Answered almost 7 years ago by Battle Tested
  • How can I make both of your programs work together, o.k.w.? Battle Tested almost 7 years ago
  • OK, o.k.w. I think I am getting the hang of it, I made some progress, thanks for all your help. I really appreciate it and your patience. jb Battle Tested almost 7 years ago
  • Welcome and good luck! o.k.w almost 7 years ago