angular - 流式传输音频文件时如何设置 HTTP-Header？

Question

我按照教程“使用 Angular 和 RxJS 构建音频播放器应用程序”并设法让音频播放器正常工作。

但是，为了从我的服务器加载音频，我需要设置Authorization标题。有没有办法做到这一点？我已经HttpInterceptor为所有其他请求使用了这个，但似乎在我加载音频文件时绕过了拦截器。

下面的代码是如何加载和播放音频：

private audioObj = new Audio();

// ...

private streamObservable(url: string): Observable<any> {
  return new Observable(observer => {
    // Play audio
    this.audioObj.src = url;
    this.audioObj.load();
    this.audioObj.play().then();

    const handler = (event: Event) => {
      this.updateStateEvents(event);
      observer.next(event);
    };

    this.addEvents(this.audioObj, this.audioEvents, handler);

    return () => {
      // Stop Playing
      this.audioObj.pause();
      this.audioObj.currentTime = 0;
      // remove event listeners
      this.removeEvents(this.audioObj, this.audioEvents, handler);
      // reset state
      this.resetState();
    };
  });
}

标签： angularrxjshtml5-audioaudio-streaming

Answer 1

您可以将 Authorization 标头作为 URL 参数添加到音频 URL 中，并结合服务器中的自定义身份验证处理程序。

可选（如果流不是必需的）使用 AngularHttpClient将音频文件下载为 Blob：

private playObservable(url: string): Observable<any> {    
  this.http.get<Blob>(url, { responseType: 'blob' })
    .pipe(
      map(blob => window.URL.createObjectURL(blob)),
      switchMap(url => {
        return new Observable(observer => {
          // Play audio
          this.audioObj.src = url;
          this.audioObj.load();
          this.audioObj.play().then();

          const handler = (event: Event) => {
            this.updateStateEvents(event);
            observer.next(event);
          };

          this.addEvents(this.audioObj, this.audioEvents, handler);

          return () => {
            // Stop Playing
            this.audioObj.pause();
            this.audioObj.currentTime = 0;
            // remove event listeners
            this.removeEvents(this.audioObj, this.audioEvents, handler);
            // reset state
            this.resetState();

            window.URL.revokeObjectURL(url)
          };

        })
      })
    )