demo/web/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="node_modules/@picovoice/picovoice-web/dist/iife/index.js"></script>
    <script src="node_modules/@picovoice/web-voice-processor/dist/iife/index.js"></script>
    <script src="contexts/rhinoContext.js"></script>
    <script src="models/picovoiceModels.js"></script>
    <script src="wakewords/porcupineWakeWord.js"></script>
    <script type="application/javascript">

      window.addEventListener('load', function () {
        document.getElementById("wakeword").appendChild(document.createTextNode(porcupineWakeWord.label))
        document.getElementById("context").appendChild(
                document.createTextNode(rhinoContext.publicPath.replace("contexts/", "").replace("_wasm.rhn", "")))
      });

      function writeMessage(message) {
        console.log(message);
        let p = document.createElement("p");
        let text = document.createTextNode(message);
        p.appendChild(text);
        document.getElementById("messages").appendChild(p);
      }

      function wakeWordCallback(detection) {
        writeMessage(
                "Wake word detected: " + JSON.stringify(detection.label)
        );
      }
      function inferenceCallback(inference) {
        writeMessage(
                "Inference detected: " + JSON.stringify(inference)
        );
      }

      function processErrorCallback(error) {
        writeMessage(
                "Process error: " + JSON.stringify(error)
        );
      }
      async function startPicovoice(accessKey) {
        try {
          writeMessage("Picovoice is loading. Please wait...");

          let picovoiceWorker = await PicovoiceWeb.PicovoiceWorker.create(
              accessKey,
              porcupineWakeWord,
              wakeWordCallback,
              porcupineModel,
              rhinoContext,
              inferenceCallback,
              rhinoModel,
              { processErrorCallback }
          );
          writeMessage("Picovoice worker ready!");

          writeMessage("Context info YAML received.");
          document.getElementById("rhn-context-yaml").innerText = picovoiceWorker.contextInfo

          writeMessage(
            "WebVoiceProcessor initializing. Microphone permissions requested ..."
          );

          try {
            WebVoiceProcessor.WebVoiceProcessor.subscribe(picovoiceWorker);
            writeMessage(
             `WebVoiceProcessor ready! Say '${porcupineWakeWord.label}' to start the interaction.`
            );
          } catch (e) {
            writeMessage("WebVoiceProcessor failed to initialize: " + e);
          }
        } catch (e) {
          writeMessage("Picovoice failed to initialize: " + e);
        }
      }
    </script>
  </head>
  <body>
    <h1>Picovoice SDK for Web Demo</h1>
    <p>This demo uses Picovoice SDK for Web and the WebVoiceProcessor to:</p>
    <ol>
      <li>
        Create an instance of Picovoice that listens for <span id="wakeword"></span> and
        understands follow-on commands in the <span id="context"></span> context;
      </li>
      <li>
        Acquire microphone (& ask permission) data stream and convert to voice
        processing format (16kHz 16-bit linear PCM). The downsampled audio is
        forwarded to the Porcupine engines. The audio <i>does not</i> leave the
        browser: all processing is occurring via the Picovoice WebAssembly code.
      </li>
      <li>
        Await inference events from the Picovoice engines and output them to the
        page.
      </li>
    </ol>
    After entering the AccessKey, click the "Start Picovoice" button.
    <hr />
    <label for="accessKey"
      >AccessKey obtained from
      <a href="https://picovoice.ai/console/">Picovoice Console</a>:</label
    >
    <input type="text" id="accessKey" name="accessKey" />
    <input
      type="button"
      id="submit"
      value="Start Picovoice"
      onclick="startPicovoice(document.getElementById('accessKey').value)"
    />
    <hr />
    <div id="messages" style="white-space: pre;"></div>
    <hr />
    <h2>Context info:</h2>
    <pre id="rhn-context-yaml"></pre>
  </body>
</html>