Due to CORS and authentication with third-party server, I cannot load audio file directly from angularJS and has to do it from PHP backend. Here is my PHP server code to serve the audio file downloaded from the third-party server:
header('Pragma: public'); // required
header('Content-Type: audio/mpeg');
header('Content-length: ' . filesize($file));
header("Content-Transfer-Encoding: binary");
header('Content-Disposition: filename="' . basename($file));
header('X-Pad: avoid browser bug');
header('Cache-Control: no-cache');
$len = readfile($file);
exit();
Here is my angularJS client code:
var blob = new Blob([response], { type: 'audio/mpeg' });
var url = window.URL.createObjectURL(blob);
var audio = new Audio(url);
audio.play();
However it fails with the exception message:
DOMException: Failed to load because no supported source was found.
Any advice and insight is appreciated.
Since you're just creating an Audio object with the response anyway, there's no reason for you to have to do what you're doing.
Instead of downloading the whole response, creating a Blob out of it, and an object URL, just use the URL you're requesting in the first place. Not only will you get some nice efficient handling of streaming data, you'll be able to play while the download is running, and you won't need CORS... an "opaque" response is fine.