voicevox-audio.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.4/axios.min.js"></script>
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <main>
      <h2>VOICEVOX の WebAPI で音声合成</h2>
      <p>WebAPI を使うために VOICEVOX アプリを起動しておく必要があります。</p>
      <input type="text" name="talk" />
      <button type="button" class="send">送信</button>
      <audio class="audio"></audio>
    </main>
    <script>
      const sendButton = document.querySelector(".send");
      sendButton.addEventListener("click", async () => {
        const text = document.querySelector("[name=talk]");
        await createAudio(text.value);
      });

      async function createAudio(text) {
        const data = await createVoice(text);
        const audio = document.querySelector(".audio");
        audio.src = URL.createObjectURL(data);
        audio.play();
      }
      async function createQuery(text) {
        const response = await axios.post(
          `http://localhost:50021/audio_query?speaker=1&text=${text}`
        );
        return response.data;
      }
      async function createVoice(text) {
        const query = await createQuery(text);
        const response = await axios.post(
          "http://localhost:50021/synthesis?speaker=1",
          query,
          { responseType: "blob" }
        );
        return response.data;
      }
    </script>
  </body>
</html>