25:["$","title",null,{"children":"🗣️ Web Speech API | playground | Observable"}] 49:T426,recognition = { const SpeechRecognition = webkitSpeechRecognition; const SpeechGrammarList = webkitSpeechGrammarList; const recognition = new SpeechRecognition(); const speechRecognitionList = new SpeechGrammarList(); speechRecognitionList.addFromString(grammar, 1); recognition.grammars = speechRecognitionList; recognition.onsoundstart = (e) => console.log("soundstart: ", e); recognition.onsoundend = (e) => console.log("soundend: ", e); recognition.onspeechstart = (e) => console.log("speechstart: ", e); recognition.onspeechend = (e) => console.log("speechend: ", e); recognition.onresult = (e) => { console.log("result: ", e); mutable results = Array.from(e.results).map((r, i) => Array.from(r).map((a) => ({ confidence: a.confidence, transcript: a.transcript, i: i, })) ).flat(); }; recognition.onnomatch = (e) => console.log("nomatch: ", e); recognition.onerror = (e) => console.log("error: ", e); recognition.onend = (e) => console.log("end: ", e); return recognition; }4a:[] 29:{"id":"8508132289b47886","slug":null,"title":"🗣️ Web Speech API","thumbnail":"f04357495840622b0fc15eb1c10b81fc6ea56e9fd44e3546e5ad4824371ac406","access_level":"public","create_time":"$D2023-01-16T05:44:39.828Z","update_time":"$D2024-06-19T05:56:22.184Z","view_time":null,"first_public_time":"$D2023-01-16T05:44:39.828Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"3533f3924f76c1f3","login":"lab-pg","name":"playground","avatar_url":"https://avatars-next.observableusercontent.com/ccd9351c53f277156177f94833870f600abd74fc44bcd7c46623337c8f5082bc","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":437,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"63f207d190d71b00","login":"baotlake","name":"Momo","avatar_url":"https://avatars-next.observableusercontent.com/0eb2840e8ef41835a2f51de7cd8c5fbdd60db2f081419e50ef0bfb28124b69d9","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"63f207d190d71b00","login":"baotlake","name":"Momo","avatar_url":"https://avatars-next.observableusercontent.com/0eb2840e8ef41835a2f51de7cd8c5fbdd60db2f081419e50ef0bfb28124b69d9","tier":null,"role":"editor"},{"type":"team","id":"3533f3924f76c1f3","login":"lab-pg","name":"playground","avatar_url":"https://avatars-next.observableusercontent.com/ccd9351c53f277156177f94833870f600abd74fc44bcd7c46623337c8f5082bc","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"🗣️ Web Speech API","cells":[{"id":0,"value":"\n#

🗣️ Web Speech API

\nMDN - Web Speech API\n\n- Speech Synthesis (TTS)\n- Speech Recognition","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":147,"value":"## Speech synthesis TTS #","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"viewof inputText = {\n const text = `The SpeechSynthesis interface of the Web Speech API is the controller interface for the speech service; this can be used to retrieve information about the synthesis voices available on the device, start and pause speech, and other commands besides.`;\n return Inputs.textarea({ value: text, label: \"Text\", rows: 6 });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"viewof button = Inputs.button(\n [\n [\"Play\", () => speechSynthesis.speak(utterance)],\n [\"Cancel\", () => speechSynthesis.cancel()],\n [\"Pause\", () => speechSynthesis.pause()],\n [\"Resume\", () => speechSynthesis.resume()],\n ],\n { label: \"Controls\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"viewof pitch = Inputs.range([0, 2], { value: 1, label: \"Pitch\", step: 0.01 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"viewof rate = Inputs.range([0.1, 10], { value: 1, label: \"Rate\", step: 0.01 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"viewof lang = Inputs.select(\n new Set(speechSynthesis.getVoices().map((v) => v.lang)).values(),\n { label: \"Lang\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"viewof voice = Inputs.select(\n speechSynthesis\n .getVoices()\n .filter((v) => v.lang == lang)\n .map((v) => v.name),\n { label: \"Voice\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"speechSynthesis\n .getVoices().length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"utterance = {\n let utterance = new SpeechSynthesisUtterance(inputText);\n utterance.pitch = pitch;\n utterance.rate = rate;\n utterance.voice = speechSynthesis\n .getVoices()\n .find((v) => v.name == voice && v.lang == lang);\n utterance.lang = lang.value;\n return utterance;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"## Speech Recognition #","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":403,"value":"viewof properties = Inputs.checkbox([\"continuous\", \"interimResults\"], {\n label: \"Properties\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"viewof recognition_controls = Inputs.button(\n [\n [\"Start\", () => recognition.start()],\n [\"Stop\", () => recognition.stop()]\n ],\n { label: \"controls\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"html`\n

Results

\n ${results.map(\n (d) =>\n `${d.transcript}

`\n )}\n

\n \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"viewof grammar = {\n const jsgf = \"#JSGF V1.0; grammar colors; public = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;\"\n return Inputs.textarea({ value: jsgf, label: \"JSGF\", rows: 3 })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"mutable results = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"{\n const p = [...properties];\n recognition.continuous = p.includes(\"continuous\");\n recognition.interimResults = p.includes(\"interimResults\");\n // recognition.lang = \"zh-CN\"\n return p\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null