加载流音频文件html5音频播放器

Question

I've written a service in golang with two endpoints - one requires the user to authorize in order to access it - the other requires no authorization.

I'm retrieving a stream from a music streaming API on the server and writing it back to the client as a response in both cases.

The content type on the response in both cases seems to be application/octet-stream. I've tried setting the content type to audio/mpeg but it seems to make no difference.

When I try to call load on the html5 audio player I'm using (just the straight up element) after setting the source to the return of my web service call to the response from the service, I get an error - undefined:1 Uncaught (in promise) DOMException: Failed to load because no supported source was found.

Here's how I'm retrieving the stream :

callApi: function() {
$.ajax({
  context: this,
  url: 'http://localhost:3001/secured/ping',
  method: 'GET'
}).then(function(data, textStatus, jqXHR) {
  alert("The request to the secured endpoint was successful");
  this.setState({audioSrc: data});
  this.refs.audio.play();
}, function() {
  alert("You need to download the server seed and start it to call this API");
});

}

The HTML5 audio element looks like -

<div className="logged-in-box auth0-box logged-in">
          <h1 id="logo"><img src="https://cdn.auth0.com/blog/auth0_logo_final_blue_RGB.png" /></h1>
          <audio ref="audio" src={this.state.audioSrc} autoPlay controls></audio>
          <img src={this.state.profile.picture} />
          <h2>Welcome {this.state.profile.nickname}</h2>
          <button onClick={this.callApi} className="btn btn-lg btn-primary">Call API</button>
        </div>

I'm using react as the client side framework for data binding etc... I'm not sure what that error is all about however I have a feeling it has to do with my response coming back as binary which the audio player can't handle.

Any ideas on how to fix this?

</div>