combine javascript php hyperlink

drax007

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 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?

Any ideas?

Thank you 🙂

johanafm

On the first page request, a document is created that contains the above link, among other things. When you click that link, two things happen:
1. an onclick event fires: play_multi_sound (relevant for the current document)
2. a page request is sent: fleet.php, which obviously means the browser replaces the previous document with a new one => the onclick event disappears into the same black hold as everything else on the previous page

drax007

Thanks for the reply, I see what you mean. Then i guess i'd need to load the sound on the opening page?

Thanks 🙂

johanafm

It all comes down to what you want to do. You could for example play the sound without loading a new page (either by using href="javascript:..." or by using a button", then once the sound has played, you load the new page using javascript (window.location = ...). Or you could use the link, but remove the onclick event and on the following page have <body onload="playsound(...)" />, or you could as you say play the sound on the first page.

Or instead of an ordinary page request, you could use XMLHttpRequest to make a request to the server and insert the response somehwere in your current page at the same time as the sound plays.

RiceBurner

assuming the "play_multi_sound" javascript works "on the fly", just put " return false;" at the end of the 'onclick' attribute. That will prevent the link activating and going to the href.