koala/demo/web/index.html at main · Picovoice/koala · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!doctype html>
<html lang="en">
  <head>
    <script src="node_modules/@picovoice/web-voice-processor/dist/iife/index.js"></script>
    <script src="node_modules/@picovoice/koala-web/dist/iife/index.js"></script>
    <script src="koala_params.js"></script>
    <script type="application/javascript" src="scripts/koala.js"></script>
  </head>
  <body>
    <h1>Koala Web Demo</h1>
    <p>This demo uses Koala for Web and the WebVoiceProcessor to:</p>
    <ol>
      <li>Create an instance of Koala with the model file provided.</li>
      <li>
        Select an audio file or acquire microphone (& ask permission) data
        stream and convert to voice processing format (16kHz 16-bit linear PCM).
        The downsampled audio is forwarded to the Koala engine. The audio
        <i>does not</i> leave the browser: all processing is occurring via the
        Koala WebAssembly code.
      </li>
      <li>
        Enhance audio real time using Koala engine. Output both original and
        enhanced audio.
      </li>
    </ol>
    After entering the AccessKey, click the "Start Koala" button.
    <hr />
    <label for="accessKey"
      >AccessKey obtained from
      <a href="https://console.picovoice.ai/">Picovoice Console</a>:</label
    >
    <input type="text" id="accessKey" name="accessKey" />
    <input
      type="button"
      id="submit"
      value="Start Koala"
      onclick="startKoala(document.getElementById('accessKey').value)"
    />
    <hr />
    <div id="control" style="display: none">
      <label for="audioFile">Choose audio file to enhance:</label>
      <input type="file" id="audioFile" name="audioFile" />
      <p><b>OR</b></p>
      <label for="recordAudio"
        >Record audio to enhance (up to 2 minutes):</label
      >
      <button id="recordAudio">Record Audio</button>
      <span id="displayTimer" style="display: none"></span>
      <button id="stopRecord" style="display: none">Stop Recording</button>
      <hr />
    </div>
    <div id="status"></div>
    <br />
    <div id="result" style="display: none">
      <label>
        Original
        <input
          type="range"
          id="volumeControl"
          min="0"
          max="1"
          value="1"
          step="0.01"
        />
        Koalafied
        <br />
        <br />
        <button id="playAudio">Play</button>
      </label>
    </div>
    <br />
  </body>
</html>