combine javascript with php hyperlink

[mrt003003]

Hi there im trying to modify my php code to add a javaa script link that plays an audio file. The java script works fine with just html:

 

<script type="text/javascript">
var channel_max = 10;										// number of channels
audiochannels = new Array();
for (a=0;a<channel_max;a++) {									// prepare the channels
	audiochannels[a] = new Array();
	audiochannels[a]['channel'] = new Audio();						// create a new audio object
	audiochannels[a]['finished'] = -1;							// expected end time for this channel
}
function play_multi_sound(s) {
	for (a=0;a<audiochannels.length;a++) {
		thistime = new Date();
		if (audiochannels[a]['finished'] < thistime.getTime()) {			// is this channel finished?
			audiochannels[a]['finished'] = thistime.getTime() + document.getElementById(s).duration*1000;
			audiochannels[a]['channel'].src = document.getElementById(s).src;
			audiochannels[a]['channel'].load();
			audiochannels[a]['channel'].play();
			break;
		}
	}
}
</script>

<audio id="multiaudio1" src="Music/reb.wav" preload="auto"></audio>
<audio id="multiaudio2" src="Music/emp.wav" preload="auto"></audio>

<a href="javascript:play_multi_sound('multiaudio1');">audio1</a><br />
<a href="javascript:play_multi_sound('multiaudio2');">audio2</a><br />

 

But when i modify my existing php hyperlink:

 echo '<a href="http://localhost/swb/fleet.php?recordID='.$row_Fleet['FleetName'].'"> <IMG SRC="',$pic1,'" WIDTH="12" HEIGHT="10" BORDER="0" ALT="" CLASS="fmoncalamari"></a>';

 

to:

 

echo '<a href="http://localhost/swb/fleet.php?recordID='.$row_Fleet['FleetName'].'" onclick="play_multi_sound(\'multiaudio1\');"> <IMG SRC="',$pic1,'" WIDTH="12" HEIGHT="10" BORDER="0" ALT="" CLASS="fmoncalamari"></a>';

 

then the hyperlink and parsed id works fine but the audio doesnt at all?

 

Please help

 

Thank you

[Adam]

In your HTML-only code, you're calling the JavaScript through the href attribute of the anchor. In the PHP code you've added an actual URL within the href and moved the JavaScript call to the onclick attribute - which is actually a step in the right direction. You haven't explained very clearly what does happen, so I'm going to guess that the onclick is called, but as the default behaviour of the anchor is taken straight-after, the JavaScript doesn't effectively play the audio..?

 

If so..

 

Obviously you can only have one or the other, and I'm not too sure what the purpose of that link is unless you have a non-JS based player (flash?) that you're linking to. Either way to play the audio without redirecting the user, you need to return false from the function you call. This tells the browser not to take the default action of the target element...

 

	function play_multi_sound(s) {
	[...]

	return false;
}

 

In addition to this you would need to tell the anchor's onclick attribute to return the result back to the anchor, which you would do like:

 

onclick="return play_multi_sound(\'multiaudio1\');"

 

Without this extra return statement the false result of the function would be lost.

 

I'll leave it there for now, but you should really separate your JS logic from your HTML (i.e. stop calling JS functions from within HTML onclick attributes). I know they might not teach that on sites like W3Schools, but it's bad practise to mix up the layers like that and W3Schools is sh*t. It's also quite difficult to explain how to do that in certain situations without seeing how these links are being generated (the PHP behind it kind of thing).