forked from Picovoice/porcupine
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
129 lines (123 loc) · 10.5 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<script src="node_modules/@picovoice/porcupine-web-en-worker/dist/iife/index.js"></script>
<script src="node_modules/@picovoice/porcupine-web-de-worker/dist/iife/index.js"></script>
<script src="node_modules/@picovoice/porcupine-web-fr-worker/dist/iife/index.js"></script>
<script src="node_modules/@picovoice/porcupine-web-es-worker/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 porcupineErrorCallback(error) {
writeMessage(error);
}
function porcupineKeywordCallback(keyword) {
const time = new Date();
const message = `keyword detected at ${time.toLocaleTimeString()}: ${keyword}`
console.log(message);
document.getElementById("result").innerHTML = message;
}
async function startPorcupine(accessKey) {
writeMessage("Porcupine is loading. Please wait...");
try {
let ppnEn = await PorcupineWebEnWorker.PorcupineWorkerFactory.create(
accessKey,
[
{
builtin: PorcupineWebEnWorker.BuiltInKeyword.Picovoice,
sensitivity: 0.65,
},
{
custom: "papaya whip",
sensitivity: 0.7,
base64:
"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",
},
],
porcupineKeywordCallback,
porcupineErrorCallback
);
let ppnDe = await PorcupineWebDeWorker.PorcupineWorkerFactory.create(
accessKey,
{
builtin: PorcupineWebDeWorker.BuiltInKeyword.Ananas,
sensitivity: 0.7,
},
porcupineKeywordCallback,
porcupineErrorCallback
);
let ppnEs = await PorcupineWebEsWorker.PorcupineWorkerFactory.create(
accessKey,
{
builtin: PorcupineWebEsWorker.BuiltInKeyword.Manzana,
sensitivity: 0.6,
},
porcupineKeywordCallback,
porcupineErrorCallback
);
let ppnFr = await PorcupineWebFrWorker.PorcupineWorkerFactory.create(
accessKey,
[PorcupineWebFrWorker.BuiltInKeyword.Framboise],
porcupineKeywordCallback,
porcupineErrorCallback
);
writeMessage("Porcupine worker ready!");
writeMessage(
"WebVoiceProcessor initializing. Microphone permissions requested ..."
);
let webVp = await window.WebVoiceProcessor.WebVoiceProcessor.init({
engines: [ppnEn, ppnEs, ppnFr, ppnDe],
});
writeMessage("WebVoiceProcessor ready and listening!");
} catch (err) {
porcupineErrorCallback(err);
return;
}
}
</script>
</head>
<body>
<h1>Porcupine Web Demo</h1>
<p>This demo uses Porcupine for Web and the WebVoiceProcessor to:</p>
<ol>
<li>
Create an English instance of Porcupine that listens for "Picovoice" (a
built-in keyword, provided by name) and "Papaya Whip" (a custom keyword
provided via its base64 representation).
</li>
<li>Create a German instance of Porcupine to listen for "Ananas".</li>
<li>Create a French instance of Porcupine to listen for "Framboise".</li>
<li>Create a Spanish instance of Porcupine to listen for "Manzana".</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 Porcupine WebAssembly code.
</li>
<li>
Listen for keyword detection events from the Porcupine engines and
output them to the page.
</li>
</ol>
After entering the AccessKey, click the "Start Porcupine" 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 Porcupine"
onclick="startPorcupine(document.getElementById('accessKey').value)"
/>
<hr />
<div id="status"></div>
<br>
<div id="result"></div>
</body>
</html>