Jump to content

Loading and playing sounds dynamically off the server.


ajoo

Recommended Posts

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 ! 

Link to comment
Share on other sites

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

 

 

 

Link to comment
Share on other sites

Hi all !

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

Quote

image.png.a2f608ca7390ddff723be2183a5a6ba5.png

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 !

 

 

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.