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

时间:2016-05-19 21:49:23

标签: html audio go reactjs streaming

我在golang中编写了一个带有两个端点的服务 - 一个要求用户授权才能访问它 - 另一个端点不需要授权。

我正在从服务器上的音乐流API中检索流,并在两种情况下将其写回客户端作为响应。

两种情况下响应的内容类型似乎都是application / octet-stream。我已经尝试将内容类型设置为audio / mpeg但似乎没有任何区别。

当我尝试在我正在使用的html5音频播放器上调用load(只是直接元素)之后将源设置为我的Web服务调用返回服务的响应,我收到错误 - undefined :1未捕获(在promise中)DOMException:无法加载,因为找不到支持的源。

以下是我正在检索流的方式:

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");
});

}

HTML5音频元素看起来像 -

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

我正在使用react作为数据绑定的客户端框架等...我不确定那个错误是什么然而我有一种感觉它与我的响应回来作为音频的二进制球员无法处理。

有关如何解决此问题的任何想法?

0 个答案:

没有答案