流音频文件时如何设置HTTP标头？

问题描述

我一直跟随着指导老师“ Building an Audio Player app with Angular and 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,handler);
      // reset state
      this.resetState();
    };
  });
}

解决方法

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

（可选）（如果不是必须进行流传输）使用角度HttpClient将音频文件下载为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,handler);
            // reset state
            this.resetState();

            window.URL.revokeObjectURL(url)
          };

        })
      })
    )