带有 Blob 源的 HTML5 <audio> 标记在第一秒后停止

如何解决带有 Blob 源的 HTML5 <audio> 标记在第一秒后停止

我正在获取一个 ReadableStream<UInt8Array> 流。

const res = await fetch(url,{headers});

    const list: ArrayBuffer[] = [];
    const reader = res.body?.getReader();
    const pump = async () => {
      await reader?.read().then(({ value,done }) => {
        value && list.push(value.buffer);
        if (!done) pump();
      });
    };

    await pump();
    const blob = new Blob([...list],{ type: 'audio/wav' });

    setState(URL.createObjectURL(blob));

我有一个存储 url 的状态。

return (
{state && <audio controls src={state}/>}
)

我需要流式传输一些音频，但我无法直接访问链接，因为我需要发送 JTW 授权标头。我正在读取 ReadableStream 并从此 UInt8Array 缓冲区创建一个 blob。问题是，在第 1 秒后，音频停止并且无法恢复。

有人知道这是为什么吗？ 另外，如果有更好的方法来使用 ReadableStream 并将其用作 <audio/> 的源，请告诉我。我做了很多研究，但一无所获。

谢谢