ajoo 2 Posted October 22 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 ! Quote Share this post Link to post Share on other sites
cyberRobot 118 Posted October 22 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 Quote Share this post Link to post Share on other sites
ajoo 2 Posted October 22 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 !. Quote Share this post Link to post Share on other sites
ajoo 2 Posted October 23 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 ! Quote Share this post Link to post Share on other sites
kicken 506 Posted October 23 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. Quote Share this post Link to post Share on other sites
ajoo 2 Posted October 23 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 !! Quote Share this post Link to post Share on other sites