无法从本地主机加载 Blob 作为 src blob:

Question

我在加载从后端作为 Angular 中的 Blob 返回的 WAV 格式的音频文件时遇到一些问题。

我的服务内容如下：

getFileBlob(uniformName: string, path: string) {
    const currentPath = path.replace(/\\/g, '/');
    return this.http.get(`${environment.api_url}/content/v1.4/${currentPath}/${uniformName}/_blob`, { responseType: 'blob' });
  }

在我的 Angular 组件中，我有以下内容：

this.dService.getFileBlob().subscribe((response: Blob) => {
        const url = URL.createObjectURL(response);
        this.type.set(response.type);
        this.src.set(url);
      });

我的音频源标签中有正确的映射： [

在我的模板中，我有：

<audio #media [vgMedia]="$any(media)" id="myAudio" preload="{{ preload }}" crossorigin>
      <source src="{{ src() }}" type="{{ type() }}">
      <track
      src="assets/data/Downloaded_transcriptVVV.vtt"
      kind="metadata"
      label="Cue Points"
      default
      #metadataTrack
    />
  </audio>

当我将 blob 粘贴到浏览器中时，我会下载文件 - (blob:http://localhost:4200/7071f3e7-9738-4ad7-b08f-67ddb5852c53) 问题是本机 HTML 音频根本无法播放。 一个重要的注意事项是我在无区域模式下使用 Angular。 但是，如果我将直接相对 URL 放在 src 的位置，它就可以工作：

`this.src.set('/assets/audio/E_2024-10-07_H_100748_060.wav')

我非常感谢任何人对我做错的事情提出的建议。

Answer 1

问题是音频播放器在没有源的情况下加载。因此，即使添加了

src

，浏览器也不会播放音频。解决方法是使用

audio.load

，这会强制浏览器重新检查源。

下面的示例演示了如果动态设置

src

，浏览器不会播放音频。

const source = document.querySelector('source');
const audio = document.querySelector('audio');

fetch('https://upload.wikimedia.org/wikipedia/commons/3/3d/Alcal%C3%A1_de_Henares_%28RPS_13-04-2024%29_canto_de_ruise%C3%B1or_%28Luscinia_megarhynchos%29_en_el_Soto_del_Henares.wav')
  .then(res => res.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);

    source.type = blob.type;
    source.src = url;
  })

<audio id="myAudio" preload="auto" crossorigin controls>
    <source />
</audio>

修复方法是使用

audio.load()

重置播放器并强制其重新检查源。

const source = document.querySelector('source');
const audio = document.querySelector('audio');

fetch('https://upload.wikimedia.org/wikipedia/commons/3/3d/Alcal%C3%A1_de_Henares_%28RPS_13-04-2024%29_canto_de_ruise%C3%B1or_%28Luscinia_megarhynchos%29_en_el_Soto_del_Henares.wav')
  .then(res => res.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);

    source.type = blob.type;
    source.src = url;

    // add this line
    audio.load();
  })

<audio id="myAudio" preload="auto" crossorigin controls>
    <source />
</audio>