Playing sound in Javascript and HTML5

disruptive · 01-14-2011, 03:45 PM

I can play a sound on my local machine using the following code, but when I upload to a server the same code it does not play. I cannot work out why, the link below gives the code. The multi channel code is here:

http://www.storiesinflight.com/html5/audio.html

Code:

<audio id="multiaudio1" src="audio/flute_c_long_01.wav" preload="auto"></audio>
<audio id="multiaudio2" src="audio/piano_chord.wav" preload="auto"></audio>
<audio id="multiaudio3" src="audio/synth_vox.wav" preload="auto"></audio>
<audio id="multiaudio4" src="audio/shimmer.wav" preload="auto"></audio>
<audio id="multiaudio5" src="audio/sweep.wav" preload="auto"></audio>

<a href="javascript:play_multi_sound('multiaudio1');">Flute</a><br />
<a href="javascript:play_multi_sound('multiaudio2');">Piano Chord</a><br />
<a href="javascript:play_multi_sound('multiaudio3');">Synth Vox</a><br />
<a href="javascript:play_multi_sound('multiaudio4');">Shimmer</a><br />
<a href="javascript:play_multi_sound('multiaudio5');">Sweep</a><br />

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

Snark1994 · 01-14-2011, 04:19 PM

Are you finding all the files? Either check your server logs for errors saying something like "404: audio/sweep.wav not found", or install something like Firebug or Fiddler so you can see what responses you got to your requests for the audio files.

dugan · 01-14-2011, 04:45 PM

The problem could easily be browser bugs. Such as this. Have you tested it with multiple browsers in multiple operating systems?

disruptive · 01-18-2011, 03:58 AM

Thanks for the advice. I installed Firebug and insepcted the Net components and can see that the .wav files are being ought out but returning a 304 and then 404 error. This would be fine, however the path being sought is correct. Clicking link does'nt play the sound, but removing the file and paring back to the directory brings you to the directory on the server and clicking the file does play the sound. The code works locally, and I simply cannot see what could be causing the issue in the server versions on both Firefox and Chrome.

Snark1994 · 01-19-2011, 10:46 AM

Quote:

Originally Posted by disruptive

Removing the file and paring back to the directory brings you to the directory on the server and clicking the file does play the sound.

By this do you mean that if you type in the URL directly then you can play the sound? That does sound rather strange... And I assume the 'audio' directory is in the same directory as your HTML file?