Play Mp3 "on click"

[iUnknown]

Hello,

I'm trying to make an enter button on a site play a 5 second mp3 clip, then redirect (after 5 seconds) to another page. I've managed the redirect, and I can make the link do two javascript things but I'm trying loads of free source code in order to make it play the mp3, and the best I can get is it asking me to open/save the mp3 file. Any ideas? I don't want it to appear in a player... but if that's the only way then it could be a player of 0 width and 0 height... if you know what I mean?

Any help will be appreciated - the best answer will get +rep.

Thanks :)

[Independent]

Do a normal onclick, once clicked autoplays the Mp3 (but with a non viewable player).

[iUnknown]

I had the idea of it like.. targetting the player and making it "play", and almost got it working, however, I couldn't manage to get it to play without automatically starting when the page loads.

[Independent]

I had the idea of it like.. targetting the player and making it "play", and almost got it working, however, I couldn't manage to get it to play without automatically starting when the page loads.
Somewhere in the player code it says

Autoplay, change that too no?

[iUnknown]

Somewhere in the player code it says

Autoplay, change that too no?

Tried that, as I said, I can't get it to play then.

[Independent]

Tried that, as I said, I can't get it to play then.
Ah right, I have no more suggestions.. Sorry.

[Source]

Ok here's what I suggest.

http://www.jeroenwijering.com/?item=JW_FLV_Player

Get the JW FLV player (plays mp3's aswel). The top right of that page you will see a wizard button to help you set it up, then enable javascript on the player, that way you can make an onclick tell the player to load a new mp3, video or playlist.

Hope that helps, more documentation is on the site.

In terms of making it hidden, you could hide the DIV that its in, or you could set the size of the SWF to 1 X 1 and put it at the bottom next to a link or something. Not a perfect solution, but its a good reliable player to use.

edit// http://www.jeroenwijering.com/?item=Javascript_interaction - there's some info on the player's javascript interaction.

[iUnknown]

I can't get the player API working to play an mp3. Further help with this method will be appreciated.

[Decode]

http://www.javascripter.net/faq/sound/play.htm

:)

[Source]

<div id="container">This text will be replaced</div>

<script type="text/javascript">
var so = new SWFObject('/embed/mediaplayer.swf','jstest','400','220','8');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addVariable('width','400');
so.addVariable('height','220');
so.addVariable('file','/song/nothing.mp3');
so.addVariable('javascriptid','jstest');
so.addVariable('enablejs','true');
so.write('container');
</script>

OK that will write the player into the container you specify. " so.write('container');" replace container with the name of the DIV above the code. and make sure you have so.addVariable('enablejs','true'); otherwise it won't pick up the JS.

Then just make a link do this either via href, or my personal preference onclick:

<a href="#" onclick"loadFile('jstest2',{file:'/upload/nameof.mp3'});">Load MP3</a>

make sure, jstest 2 is the javascript ID you gave it in the script for displaying the player.

Hopefully that makes more sense.

[iUnknown]

Thanks for that, I edited the code badly.. I didn't realise why the javascript needed that div.. anyway. Surely that will just load the mp3... not play it?

Edit:

Right, here is my DIV:



<div class="style1" id="enter" onclick="setTimeout('redirectUser()', 12000)"><a href="#" onclick"loadFile('jstest',{file:'enter.mp3'});"><img src="enter.png" alt="Click here to enter!" width="224" height="125" border="0" /></a></div>
The player works fine (I have it in a visible div at the moment for testing and when I get it working I'll put it invisible). However, click that image isn't playing the mp3. Any ideas?

And the code for the player:



<div id="container" style="visibility:visible">This text will be replaced</div>

<script type="text/javascript">
var so = new SWFObject('http://www.jeroenwijering.com/embed/mediaplayer.swf','jstest','400','220','8');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addVariable('width','400');
so.addVariable('height','220');
so.addVariable('file','enter.mp3');
so.addVariable('javascriptid','jstest');
so.addVariable('enablejs','true');
so.write('container');
</script>

[iUnknown]

Can't edit. Right so I've just wasted ages trying to get this work and I can see this idea is never going to work now............


Any others?

Edit:


http://www.javascripter.net/faq/sound/play.htm

:)

Haha, that works in internet explorer. Well... that'll do! +rep.