demo/web/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="node_modules/@picovoice/cobra-web/dist/iife/index.js"></script>
    <script src="node_modules/@picovoice/web-voice-processor/dist/iife/index.js"></script>
    <script type="application/javascript">
      function writeMessage(message) {
        console.log(message);
        document.getElementById("status").innerHTML = message;
      }

      function writeVoiceProbability(message, value) {
        document.getElementById("voiceProbabilityText").innerHTML = message;
        document.getElementById("voiceProbabilityRange").value = value * 100;
      }

      function voiceProbabilityCallback(voiceProbability) {
        const timestamp = new Date();
        writeVoiceProbability(
          `Voice detected with probability of ${voiceProbability.toFixed(2)} at ${timestamp.toString()}`,
          voiceProbability
        );
      }

      async function startCobra(accessKey) {
        writeMessage("Cobra is loading. Please wait...");
        let cobra = null;
        try {
          cobra = await CobraWeb.CobraWorker.create(
            accessKey,
            voiceProbabilityCallback
          );
        } catch (error) {
          writeMessage(error);
          throw new Error(error);
        }
        writeMessage("Cobra worker ready!");

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

        try {
          WebVoiceProcessor.WebVoiceProcessor.subscribe(cobra);
          writeMessage("WebVoiceProcessor ready and listening!");
        } catch (e) {
          writeMessage("WebVoiceProcessor failed to initialize: " + e);
        }
      }

    </script>
  </head>

  <body>
    <h1>Cobra Web Demo - worker</h1>
    <p>
      This demo uses Cobra for Web and the WebVoiceProcessor packages to create
      an instance of Cobra that listens for voice activity and outputs them to
      the page. After entering the AccessKey, click the "run Cobra" button.
    </p>

    <label for="accessKey"
      >AccessKey string provided by
      <a href="https://picovoice.ai/console/">Picovoice Console</a>:</label
    >
    <input type="text" id="accessKey" name="accessKey" />
    <input
      type="button"
      id="submit"
      value="Run Cobra"
      onclick="startCobra(document.getElementById('accessKey').value)"
    />
    <hr />

    <div id="status" style="white-space: pre;"></div>

    <div id="voiceProbability" class="voiceProbability">
      <h2 id="voiceProbabilityText">
      </h2>
      <input
        type="range"
        min="0"
        max="100"
        value="0"
        class="slider"
        disabled="true"
        id="voiceProbabilityRange"
      />
    </div>
  </body>
</html>