播放ReadableStream格式二进制流音频

最新推荐文章于 2024-11-18 16:44:59 发布

July twelve

最新推荐文章于 2024-11-18 16:44:59 发布

阅读量448

点赞数 4

文章标签：音视频

本文链接：https://blog.csdn.net/yys190418/article/details/140275028

版权

播放ReadableStream格式二进制流音频

接口返回中，body为ReadableStream格式的二进制流

<!DOCTYPE html>
<html>
  <head>
    <title>实时语音生成与播放</title>
  </head>
  <body>
    <h1>输入文本生成语音</h1>
    <textarea id="text-input" rows="4" cols="50"></textarea><br />
    <button onclick="generateAndPlayAudio()">生成并播放语音</button>
    <audio id="audio" controls></audio>
    <script>
      async function generateAndPlayAudio() {
        const text = document.getElementById("text-input").value;
        fetch("http://xxx.xx.xx.xxx:5000/generate_speech", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ text: text, port: 9880 }),
        })
          .then((response) => {
            console.log("response", response);
            if (response.ok) {
              const reader = response.body.getReader();
              let chunks = [];
              let totalLength = 0;
              const read = () => {
                return reader.read().then(({ done, value }) => {
                  if (done) {
                    return new Blob(chunks, { type: "audio/wav" });
                  }
                  chunks.push(value);
                  totalLength += value.length;
                  return read();
                });
              };
              return read();
            }
          })
          .then((audioBlob) => {
            const audioUrl = URL.createObjectURL(audioBlob);
            console.log("Audio URL:", audioUrl);
            const audioPlayer = document.getElementById("audio");
            audioPlayer.src = audioUrl;
            audioPlayer.play().catch((error) => {
              console.error("Error playing audio:", error);
            });
          });
      }
    </script>
  </body>
</html>