arraybuffor 到音频 src

Question

我从 http 响应中得到一个数组缓冲区。下面的代码只播放一次音频，但我想将音频用作音频元素的 src！

    this.toSpeechService.getAudioFile(this.text).subscribe(res => {
       const context = new AudioContext();
       let source = context.createBufferSource();
       context.decodeAudioData(res, function(buffer) {
            source.buffer = buffer;
          }, null).then(() => {
            source.connect(context.destination);
            this.audioSrc = context.destination; // doesn't fill the audio player
            source.start(0);
       });
       console.log(res)
     });

    <audio controls="controls">
      <source [src]="audioSrc" type="audio/mp3/wav" />
       Your browser does not support the audio element.
    </audio>

Answer 1

如果您知道ArrayBuffer 中数据的 MIME 类型，则以下内容应该可以工作。

this.toSpeechService.getAudioFile(this.text).subscribe(res => {
    const blob = new Blob([ res ], { type: THE_MIME_TYPE });
    const url = URL.createObjectURL(blob);

    YOUR_AUDIO_ELEMENT.src = url;
    YOUR_AUDIO_ELEMENT.load();
});

THE_MIME_TYPE 是实际 mimeType 的占位符。 YOUR_AUDIO_ELEMENT 是对您的音频元素的引用。

一旦您不再需要对象 URL，您可以通过调用 URL.revokeObjectURL(url) 来释放内存。