orca/demo/web/index.html at main · Picovoice/orca · 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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!doctype html>
<html lang="en">
  <head>
    <script src="node_modules/@picovoice/orca-web/dist/iife/index.js"></script>
    <script type="application/javascript" src="scripts/orca.js"></script>
    <script>
      const script = document.createElement('script');
      script.src = 'models/orcaModel.js?t=' + Date.now();
      document.head.appendChild(script);
    </script>
  </head>
  <body style="margin: auto; padding: 0 1em; max-width: 1080px;">
    <h1>Orca Web Demo</h1>
    <p>This demo uses Orca for Web to:</p>
    <ol>
      <li>Create an instance of Orca with the model file provided.</li>
      <li>Convert text into speech audio data.</li>
    </ol>
    After entering the AccessKey, click the "Start Orca" 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
      id="start-orca"
      type="button"
      value="Start Orca"
      onclick="startOrca(document.getElementById('accessKey').value)"
    />
    <hr />
    <div id="choose-btns" style="display: none">
      <label for="choose-stream-btn">Synthesize speech live as you type:</label>
      <button id="choose-stream-btn">Streaming Synthesis</button>
      <p><b>OR</b></p>
      <label for="choose-single-btn">Synthesize speech in one call:</label>
      <button id="choose-single-btn">Single Synthesize</button>
      <br />
      <hr />
    </div>
    <div id="single-synthesis" style="display: none">
      <label for="text-to-synthesize">Text to synthesize</label>
      <br />
      <textarea id="text-to-synthesize" rows="5" cols="50"></textarea>
      <div>
        <span id="text-to-synthesize-num-chars">0</span>/<span
          id="max-char-limit"
        ></span>
      </div>
      <div id="text-to-synthesize-error">&nbsp;</div>
      <label>
        Speech Rate: <span id="speech-rate-display">1.0</span>
        <input
          id="speech-rate"
          type="range"
          min="0.7"
          max="1.3"
          value="1"
          step="0.1"
        />
      </label>
      <button id="synthesize-btn">Synthesize</button>
      <br />
      <hr />
      <button id="control-btn" disabled>Play</button>
      <button id="download-btn" onclick="downloadDumpAudio()" disabled>
        Download Audio
      </button>
      <br />
      <br />
      <table
        id="alignments-table"
        style="
          display: none;
          max-height: 20rem;
          overflow-y: auto;
          width: fit-content;
        "
      >
        <colgroup>
          <col span="1" style="width: 20%" />
          <col span="1" style="width: 20%" />
          <col span="1" style="width: 20%" />
          <col span="1" style="width: 40%" />
        </colgroup>
        <tr>
          <th style="text-align: left">Word</th>
          <th style="text-align: left">Start time (s)</th>
          <th style="text-align: left">End time (s)</th>
          <th style="text-align: left">Phonemes</th>
        </tr>
      </table>
    </div>
    <div id="stream-synthesis" style="display: none">
      <label>
        Speech Rate: <span id="stream-speech-rate-display">1.0</span>
        <input
          id="stream-speech-rate"
          type="range"
          min="0.7"
          max="1.3"
          value="1"
          step="0.1"
        />
      </label>
      <br />
      <br />
      <button id="stream-open-btn">Open Stream</button>
      <br />
      <br />
      <label for="stream-text-to-synthesize" style="font-weight: bold"
        >Text to stream to Orca</label
      >
      <br />
      <textarea
        id="stream-text-to-synthesize"
        disabled
        rows="15"
        cols="80"
      ></textarea>
      <br />
      <div id="stream-text-to-synthesize-error">&nbsp;</div>
      <br />
      <button id="stream-play-btn" disabled>Run Streaming Synthesis</button>
      <button id="stream-close-btn" disabled>Reset</button>
      <br />
      <br />
      <div style="font-weight: bold">Simulated text stream</div>
      <div id="stream-text-display" style="white-space: pre-wrap"></div>
      <br />
      <br />
      <div style="font-weight: bold">
        Seconds of audio synthesized:
        <span id="stream-seconds-display">0</span>s
      </div>
      <hr />
    </div>
    <br />
    <div id="status" style="white-space: pre"></div>
  </body>
</html>