Sound play / image swap

designofthings used Ask the Experts™
I'm looking to have an image be clicked to start a sound file playing (wav or mp3 - ideally mp3) . . . no need to show a player.  The moment the image is clicked the image changes to another image (the same image except with a pause button implemented).  It stays as the new image even when the mouse is moved away from the image.  When the user clicks the image again the sound file stops playing and the image returns to the original.
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
This looks exactly like what you are looking for:


Thanks, Jeremy . . . this looks like its what I need.  I think I just need a little more hand holding in terms of how to play separate mp3 files for each ID (currently this setup plays the one file).  Again, thanks for your help!
You bet, I am about done for the night but if you need some help let me know and I will install it on my test stie and help you figure it out.
Introduction to R

R is considered the predominant language for data scientist and statisticians. Learn how to use R for your own data science projects.


Yes, if you could just demo how a second mp3 file can play from a second button (right now they have 3 buttons all playing the same file - and i can't see a reference to the mp3 file in the index.html code). . . it references the SWF file.
OK, I couldn't get it to play more than one mp.3 without adding a second button. I did however find a workaround. Since you don't require a next or previous button, you can simply merge the mp3's like I did. I used this free program from CNET DOWNLOADS, merged them then used the online code generator after I upoloaded them to my site directory. Then I placed the code in my site inside of a "<code>place generated code here.mp3</code>" and everything worked fine.

Here is a link to the free mp3 joiner:
oh, I don't have to join the mp3s, they remain separate (each mp3 needs to be attached to a separate button) . . . sorry for the confusion!

This is basically what I need:

1 button, click to play sound 1 AND change button graphic (which this solution seems to handle so far), click to stop sound 1 AND change graphic back to original.

2 button, click to play sound 2 AND change to button graphic 2, click to stop sound 2 AND change graphic back to original graphic 2.

(Then I'll be reproducing that another few times).
I have been busy as of late, did you get it figured out?


Hi Jeremy,

Are you still around?  I got the whole thing working OFFLINE, and now that I bring it ONLINE the sound files aren't loading (the image/button swap is working fine).  I'm using 400k-1mb+ files for now (trying to get those downsized) . . . does this player stream the sound?  I've waited to see if it's delayed loading the sound but that doesn't seem to be the case.  Any ideas?

Make sure the directory path is correct and that the .mp3 is on the end of the file. I think it is best to compress the mp3's for them to load faster.


Yes, I've decreased the bitrate to 64 kbps and tried a relative and absolute path on the mp3 file (along with the .mp3 extension).  Can you try these files online/offline?  The girl with the striped pants should play the mp3 file when clicked.

If you put any old mp3 file in the root with the bonfire.html file it should work (rename it Nurse_3thPhase101710.mp3).  Expert exchange won't let me upload an mp3.


I've been uploading this all to my personal server . . . just got access to the final server today and uploaded the files and voila. . . works on that server.  So no problem now.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial