Display text input to speech dialogue

by Sebastian Kay

HTML

<link
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>
<script src="https://js.puter.com/v2/"></script>
<div class="container">
  <div class="row mt-3 mb-3">
    <div class="col">
      <div class="form-floating">
        <textarea
          class="form-control"
          placeholder="Leave a comment here"
          id="textinput"
          style="height: 100px"
        ></textarea>
        <label for="textinput">Text2Speech</label>
      </div>
    </div>
  </div>
  <div class="row g-3 align-items-center">
    <div class="col-auto">
      <select id="speechvoice" class="form-select" aria-label="Default select example">
        <option selected value="Sabrina">Sabrina</option>
        <option value="Vicki">Vicki</option>
        <option value="Daniel">Daniel</option>
      </select>
    </div>
    <div class="col-auto">
      <button id="play" class="btn btn-primary">Play</button>
    </div>
  </div>
</div>

JavaScript

;(() => {
  "use strict"
  window.addEventListener("DOMContentLoaded", () => {
    document.documentElement.setAttribute("data-bs-theme", "dark")
  })

  document.getElementById("play").addEventListener("click", () => {
    const textInput = document.getElementById("textinput")
    const speechVoice = document.getElementById("speechvoice")
    console.log("textInput Value: " + textInput.value)
    const result = await window.puter.ai.txt2speech(textInput.value, {
        voice: speechVoice.value,
        engine: "neural",
        language: "de-DE",
      })
     if (result && result.url) { console.log("Result: " + result) }
  })
})()