-
-
Notifications
You must be signed in to change notification settings - Fork 167
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add submitUserSpeechOnPause option (#63)
Co-authored-by: antoine.lizee <antoine.lizee@gmail.com> Co-authored-by: ricky <rickycontact9@gmail.com>
- Loading branch information
3 people
authored
Dec 15, 2023
1 parent
b9a5cd2
commit d34fcd6
Showing
12 changed files
with
222 additions
and
12 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
16 changes: 16 additions & 0 deletions
16
test-site/src/react-submit-user-speech-on-pause/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>VAD test site</title> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css" | ||
| /> | ||
| <script defer src="index.js"></script> | ||
| </head> | ||
| <body> | ||
| <div id="root"></div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| // @ts-nocheck | ||
|
|
||
| import React, { useReducer, useState } from "react" | ||
| import * as ort from "onnxruntime-web" | ||
| import { createRoot } from "react-dom/client" | ||
| import { useMicVAD, utils } from "@ricky0123/vad-react" | ||
|
|
||
| ort.env.wasm.wasmPaths = { | ||
| "ort-wasm-simd-threaded.wasm": "/ort-wasm-simd-threaded.wasm", | ||
| "ort-wasm-simd.wasm": "/ort-wasm-simd.wasm", | ||
| "ort-wasm.wasm": "/ort-wasm.wasm", | ||
| "ort-wasm-threaded.wasm": "/ort-wasm-threaded.wasm", | ||
| } | ||
|
|
||
| const domContainer = document.querySelector("#root") | ||
| const root = createRoot(domContainer) | ||
| root.render(<App />) | ||
|
|
||
| function App() { | ||
| const [audioList, setAudioList] = useState([]) | ||
| const vad = useMicVAD({ | ||
| submitUserSpeechOnPause: true, | ||
| workletURL: "http://localhost:8080/vad.worklet.bundle.min.js", | ||
| modelURL: "http://localhost:8080/silero_vad.onnx", | ||
| onVADMisfire: () => { | ||
| console.log("Vad misfire") | ||
| }, | ||
| onSpeechStart: () => { | ||
| console.log("Speech start") | ||
| }, | ||
| onSpeechEnd: (audio) => { | ||
| console.log("Speech end") | ||
| const wavBuffer = utils.encodeWAV(audio) | ||
| const base64 = utils.arrayBufferToBase64(wavBuffer) | ||
| const url = `data:audio/wav;base64,${base64}` | ||
| setAudioList((old) => [url, ...old]) | ||
| }, | ||
| }) | ||
| return ( | ||
| <section className="section"> | ||
| <div className="container"> | ||
| <h1 className="title">Basic vad-react functionality</h1> | ||
|
|
||
| <div className="block is-inline-flex"> | ||
| <button | ||
| className={ | ||
| vad.loading ? "button is-primary is-loading" : "button is-primary" | ||
| } | ||
| onClick={() => { | ||
| console.log("run toggle vad") | ||
| vad.toggle() | ||
| }} | ||
| disabled={vad.loading} | ||
| > | ||
| Toggle VAD | ||
| </button> | ||
| </div> | ||
|
|
||
| <div className="block"> | ||
| <ul> | ||
| {audioList.map((audioURL) => { | ||
| return ( | ||
| <li key={audioURL.substring(-10)}> | ||
| <audio controls src={audioURL} /> | ||
| </li> | ||
| ) | ||
| })} | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>VAD test site</title> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css" | ||
| /> | ||
| <script type="module" src="index.js"></script> | ||
| </head> | ||
| <body> | ||
| <section class="section"> | ||
| <div class="container"> | ||
| <h1 class="title">Basic vad-web functionality</h1> | ||
|
|
||
| <div class="block is-inline-flex"> | ||
| <button | ||
| id="toggleVAD" | ||
| class="button is-primary is-loading" | ||
| onclick="window.toggleVAD()" | ||
| disabled | ||
| > | ||
| Start VAD | ||
| </button> | ||
| </div> | ||
|
|
||
| <div class="block"> | ||
| <ul id="audio-list"></ul> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| // @ts-nocheck | ||
|
|
||
| import * as vad from "@ricky0123/vad-web" | ||
|
|
||
| function getToggleButton() { | ||
| return document.getElementById("toggleVAD") | ||
| } | ||
|
|
||
| async function main() { | ||
| try { | ||
| const myvad = await vad.MicVAD.new({ | ||
| submitUserSpeechOnPause: true, | ||
| workletURL: "http://localhost:8080/vad.worklet.bundle.min.js", | ||
| modelURL: "http://localhost:8080/silero_vad.onnx", | ||
| onSpeechStart: () => { | ||
| console.log("Speech start") | ||
| }, | ||
| onSpeechEnd: (arr) => { | ||
| console.log("Speech end") | ||
| const wavBuffer = vad.utils.encodeWAV(arr) | ||
| const base64 = vad.utils.arrayBufferToBase64(wavBuffer) | ||
| const url = `data:audio/wav;base64,${base64}` | ||
| const el = addAudio(url) | ||
| const speechList = document.getElementById("audio-list") | ||
| speechList.prepend(el) | ||
| }, | ||
| }) | ||
|
|
||
| window.myvad = myvad | ||
| getToggleButton().classList.remove("is-loading") | ||
|
|
||
| window.toggleVAD = () => { | ||
| if (myvad.listening === false) { | ||
| console.log("run start vad") | ||
| myvad.start() | ||
| getToggleButton().textContent = "Stop VAD" | ||
| } else { | ||
| console.log("run pause vad") | ||
| myvad.pause() | ||
| getToggleButton().textContent = "Start VAD" | ||
| } | ||
| } | ||
| window.toggleVAD() | ||
| getToggleButton().disabled = false | ||
| } catch (e) { | ||
| console.error("Failed:", e) | ||
| } | ||
|
|
||
| function addAudio(audioUrl) { | ||
| const entry = document.createElement("li") | ||
| const audio = document.createElement("audio") | ||
| audio.controls = true | ||
| audio.src = audioUrl | ||
| entry.appendChild(audio) | ||
| return entry | ||
| } | ||
| } | ||
|
|
||
| main() |