Hi all !

I am trying to get my sound files a bit safe by placing them above the document root and serving them off the server. The code below passes the filename of the audio to invoke the server to serve the same.

Code:
<html>
<head>
	<title>Test Sound</title>
</head>
<body>

	<a onclick="playSound()"> Play</a>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  

<script>
	function playSound() {
		alert("Play Sound");	
		var testsound = "beep07.wav";
		var data;
		alert(testsound);

		$.post("playsound.php", {sf: testsound}, function(data,status){
			alert("CP1");
			alert("Data : "+data+"\nStatus : "+status);

			var audio = new Audio(data);
			audio.type = 'audio/wav';
			audio.play();	
			alert("Thanks");
		});	
	}
</script>
</body>
</html>
Everything works fine except that it ends up with a
Uncaught (in promise) DOMException
I believe that this is happening because it needs an event to fire the sound which is exactly how it was triggered -- on a button press. However, because the server was involved and the file was not lifted directly (by a path and filename) I think, that this error occurred. I would appreciate all help to resolve this ?

Another thing is that this is just a trial code to get a sound going. However what i really would need is a a stream of sound files that I need to invoke on a single button press. For e.g. i can have an array like ['a.mp3','b.mp3','c.mp3','d.mp3','e.mp3'] to sound a,b,c,d,e one after the other once the start button is clicked.

Thanks all for any help on this.