Loading and playing sounds dynamically off the server.

[ajoo]

Hi all !

In am trying to modify the following snippet 

html

<audio src = "playsound1.php?test=1.mp3" />

 

php (simplified)

<?php 
.
.
.

header('X-Sendfile: 1.mp3');
header('Content-Type: audio/mpeg');
?>

so that I don't have to use the <audio .. /> tag. I want to use the jQuery get to retrieve the sound instead. Here's what I have tried doing. 

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

<h2>My Sounds</h2>
<span class='btn'>Play</span>

<script>
$(document).ready(function(){
  $('.btn').click( function(){
		$.get( "playsound1.php", {sf: "ready.mp3"}, function( data ) {
			
			var audio = new Audio(data);
			audio.type = "audio/mpeg";	
			
//			console.log(audio);
			audio.play();		
			
		});
	
	});
});  
</script>

But it ends up with an error.

Quote

Uncaught (in promise) DOMException

I think I need to use some kind of an event to check that the data is loaded before

audio.play()

is called but i am not sure how to do that. Looking for some advise to achieve this. 

Thanks  all ! 

[cyberRobot]

I haven't used Audio() myself, however, the documentation found at the following link contains an example with an event listener for "loadeddata":
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement

[ajoo]

Hi cyberRoot, 

Thanks for the response. 

I have checked this already. As you can see, in the example that you refer to,  the audio file is loaded directly from a file and the eventListener works in that case.  In the other case the data is returned as a part of the get response. The binary blob is received and can be seen in the console. The eventListener does not get triggered this way. Further the two blobs received in the two different ways are also slightly different. 

Just for the sake of checking / digging further, If I save the audio object created usinf xsendfile in a file as an mp3. It does not play and gives an error.

Hoping someone can help resolve this.

Thanks !. 

 

 

 

[ajoo]

Hi all !

Trying out the same code in Firefox gave the following errors:

Quote

while Chrome the following error.

Quote

server_sound_1.html:1 Uncaught (in promise) DOMException

The <audio preload = " auto " src = "ID3\....  " expands to show the full binary loaded. But the message is showing " HTTP load failed with status 404" ? The object is already loaded as audio.

I also cannot understand the subsequent "GET http://franchisee.com/newmovie/ID3" because the audio is already loaded.Is it trying to find a file beginning with ID3 or something ?? Why should it do that instead of returning the already loaded object ?

Rather confusing to me . 

Hope someone can shed some light on this. 

Thanks all !

 

 

 

[kicken]

Your problem is probably just that in javascript strings are not suitable for binary data.  Javascript will convert the response to UTF-16 which will end up corrupting your MP3 data.

You need to process the response as a binary blob instead of a string.

[ajoo]

Hi Kicken !

Thanks a lot for the response ! I have tried out your idea to process the response as a binary blob. I think that your idea about JS bungling the response from the server is absolutely correct. I have tried out the code in the link provided by you. I have no idea of using the xhr object so I just tried it as is and the blob it returned is also, unfortunately, not a valid audio binary. 

I then searched and found a JQuery equivalent of the code and it is below but here too the binary received ( on inspecting the response in the network ) is not  a valid audio binary. Surprisingly, the success function does not trigger and so the alert("Yeah !"); does not occur. So does that means that the response received from the server is invalid ? If so, why does JS not give any error then ? 

Here's the code that I have tried :-

server_sound.html

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

<meta charset="UTF-8">
<h2>My Sounds</h2>
<span class='btn'>Play</span>

<script>
	
$(document).ready(function(){
	$('.btn').click( function(){
	
		$.ajaxSetup({
		  beforeSend:function(jqXHR,settings){
			if (settings.dataType === 'binary'){
			  settings.xhr().responseType='arraybuffer';
			  settings.processData=false;
			}
		  }
		})

		//use ajax now
		$.ajax({
		  type: 'GET',
		  url: 'playsound1.php',
		  data: {sf: 'ready.mp3'},
		  dataType:"binary",
		  success:function(data){				// doesn't trigger
			alert("Yeah !");					// does not popup
			console.log(data); //ArrayBuffer
			console.log(new Blob([data])) // Blob
		  }
		})
	
	})
})

</script>

 

playsound1.php

	if($_SERVER["REQUEST_METHOD"]==="GET")
	{	
		$sounddir = "sounddir/";	// Path to sound files
		$sf = html_escape($_GET["sf"]);

		$sf = $sounddir.$sf;
		$type = "audio/mpeg";	// The sound file has an extention of .mp3

		header("X-Sendfile: ".$sf);
		header("Content-Type: " .$type);
	}

Hoping to find a solution to this. 

Thanks !!