I am using Google’s Audio player to play an MP3 on a webpage. My issue is that I am overlaying an image on top of the the play/pause button. Yet when the image is clicked nothing happens. What am I doing wrong? Here is the code:
<div class="center" style="width: 400px; z-index:1; visibility:hidden;">
<embed wmode="transparent" width="400" height="27"
type="application/x-shockwave-flash" flashvars="audioUrl=/sourcefile.mp3"
src="http://www.google.com/reader/ui/3523697345-audio-player.swf" quality="best"
></embed>
</div>
<img style="position:absolute; left:323px; top:630px; z-index:10000;"
src="/messages4u/2011/images/december/star-button.jpg" width="60" height="60"
alt="Play/Pause" />
I need to know how to trigger the flash button. I know it is possible with Javascript but I do not know how. Please provide examples.
UPDATE: Here is what I have tried at this point. Per Matt H recommendation I tried this code:
<input type="image" disabled style="position:absolute; left:323px; top:630px;
z-index:10000;" src="/messages4u/2011/images/december/star-button.jpg"
width="60" height="60" alt="Play/Pause" />
That did not work. One thing I noticed is if I have visibility:hidden; the flash player will not respoind to any clicks regardless of what is over it. With that said I attempted to overlay the image using <input> without the visibility:hidden; and it still did not work.
I need to get this fixed if at all possible. I am willing to use another flash player that is similar as long as it works correctly and will use an mp3 like above.
Looks like your image is catching the click that is supposed to go to the play button. You should add a handler for your image which returns true OR calls the player’s play function.