Hiding audio play buttons

[nobbyy]

Good morning all

I am trying to create a sound effect when a mouse is over an image - I know a lot of you hate this, but its what I have been asked to do!

I have created a layer call audio and have linked this to the image using the mouseover function.

It functions correctly, but when the mouse is over the image the audio control bar appears and I have not found a way of hiding it.

If I move the placeholder off the display area the effect no longer works and applying a transparency to the placeholder has no effect.

Any ideas please?

[Acorn]

If you were to advise what is in the Placeholder (i.e., its code) we might have a go.
Better would be to include a cutdown version with the image, the rollover, the placeholder all working as at present...

Acorn

[siran]

I have created an example that uses attached audio.
There is a pop-up layer with a placeholder.
The placeholder should be above the activating button.
There are two audio files attached to the placeholder.
There also is some body code for the placeholder.
Check the example here: http://oerel.goip.de/audioclip/

[siran]

Read a bit more about audio and found out that all modern browsers (IE9 and above) except for firefox should directly support MP3 format. And firefox supports it if the operating system does, which should be the case for Windows Vista and later.
So the vast majority of visitors should be able to play MP3 and there should be no need to upload an additional OGG file.
This and some experimenting lead to a new version...
See here: http://oerel.goip.de/audioclip/v4.htm
It has some code at the page header and allows for much simpler placeholder code. In fact you only need to change the filename in one place.
Please ask if you need help adapting it.

[siran]

Still playing around with this.
V6 doesn't use a pop-up layer and allows having a mouse over effect and an additional pop-up layer. Instead it assumes the name of the audio file is the same as the name of the image file.
For this to work two names have to be applied to the button
htmlclass=audioclip
filename="xxx"
And the audio file "xxx.mp3" has to be attached (using CTRL+SIFT+ALT+A or put to the support folder).
I have put the code to the page body.
See: http://oerel.goip.de/audioclip/v6.htm

[siran]

Testers found a bug in V6.
Developers don't have time to fix it.
Management decides Marketing has to handle it.
Marketing announces a new feature:
You can now have two different buttons playing the same soundclip. This way you do not have to upload two audio files with the same content anymore. This is how you can do it.
1. Give your first button a name, say filename="audio". This will create an image named audio.png or audio.jpg.
2. Give your button the name htmlclass=audioclip to make it play the audio file audio.mp3.
3. Give your second button a name, say filename="audio.2". This will create an image named audio.2.png or audio.2.jpg.
4. Give your second button the name htmlclass=audioclip to make it also play the audio file audio.mp3.
Proudly we present V8 today, see: http://oerel.goip.de/audioclip/v8.htm
The left buttons play the same audio file.
And in fact nothing has changed!

[Acorn]

for your efforts,
Acorn

[siran]

Thanks Acorn. It has been fun, except for the fact that it took a while to notice that Xara removes my event handlers (simply nothing happened, no errors, no action). That's why I added the class xr_noreset to the element.

[nobbyy]

Hi Acorn and Siran - many thanks for taking the time to respond and huge apologies for my slow response!

Siran your solution works fantastically - thank you so much for spending the time on this and for posting the instructions - I would have been lost without your clear direction.

One quick question - is there any way of limiting the playing of the sound to only while the mouse is over the image ie so that it stops when the mouse is moved off?

Thanks again!

[siran]

Sure it is, but that would work best with static buttons.
Just replaced the code in this example and added a new static button.
The yellow (static) button should work as you expect.
The red button will not work at all, because it has a mouse over button that overlaps.
The buttons on the left might stop playing (because of the animation the mouse poiner might leave when the button moves away).