Speech to text functionality with minimum configuration and maximum compatibility and performance. It is executed securely and efficiently in the browser with web assembly (wasm).
You can try out the live demo of Voice2Text here.
To install Voice2Text as a dependency in your project, run the following command:
npm install voice2text
To use Voice2Text in your code, you need to import it and create an instance of the Voice2Text class. You can pass some options to the constructor to configure the speech recognition engine. For example, you can specify the language, the model, and the source of the audio.
Here is a simple example of how to use Voice2Text to convert voice from the microphone to text:
import VoiceToText from "voice2text";
// Create a new instance of VoiceToText
const voice2text = new VoiceToText({
converter: "vosk",
language: "en", // The language of the speech
});
// Start the speech recognition
voice2text.start();
// Listen to the result event
window.addEventListener("voice", (e) => {
console.log(e.detail);
});
language | vosk | full name |
---|---|---|
en | ✅ | English |
de | ✅ | German |
fr | ✅ | French |
ru | ✅ | Russian |
es | ✅ | Spanish |
it | ✅ | Italian |
ja | ✅ | Japanese |
ar | ✅ | Arabic |
br | ✅ | Breton |
ca | ✅ | Catalan |
cs | ✅ | Czech |
eo | ✅ | Esperanto |
fa | ✅ | Persian |
hi | ✅ | Hindi |
kk | ✅ | Kazakh |
ko | ✅ | Korean |
nl | ✅ | Dutch |
pl | ✅ | Polish |
pt | ✅ | Portuguese |
tr | ✅ | Turkish |
uk | ✅ | Ukrainian |
uz | ✅ | Uzbek |
vi | ✅ | Vietnamese |
zh | ✅ | Chinese |
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>voice2text</title>
</head>
<body
style="
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
"
>
<textarea rows="30" cols="100" style=""></textarea>
<h1></h1>
<script type="module">
import VoiceToText from "https://cdn.jsdelivr.net/npm/voice2text@latest/dist/voice2text.js";
let voice2text = new VoiceToText({
converter: "vosk",
language: "en",
sampleRate: 16000,
});
let textarea = document.querySelector("textarea");
let status = document.querySelector("h1");
status.innerHTML = voice2text.converter.status;
window.addEventListener("voice", (e) => {
if (e.detail.type === "PARTIAL") {
console.log("partial result: ", e.detail.text);
textarea.value =
textarea.value.replace(/~.*?~/g, "") + `~${e.detail.text}~`;
} else if (e.detail.type === "FINAL") {
console.log("final result: ", e.detail.text);
textarea.value =
textarea.value.replace(/~.*?~/g, "") + " " + e.detail.text;
} else if (e.detail.type === "STATUS") {
console.log("status: ", e.detail.text);
status.innerHTML = e.detail.text;
}
});
voice2text.start();
setTimeout(() => {
voice2text.stop(); // or voice2text.pause();
}, 60000);
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>voice2text</title>
</head>
<body
style="
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
"
>
<video crossorigin="anonymous" controls>
<source
src="https://voice2text.mehdiabdi.com/media/Watch%20Sir%20David%20Attenborough%20s%20powerful%20speech%20to%20leaders%20at%20COP26.mp4"
type="video/mp4"
/>
</video>
<h1></h1>
<script type="module">
import VoiceToText from "https://cdn.jsdelivr.net/npm/voice2text@latest/dist/voice2text.js";
let voice2text_video = new VoiceToText({
converter: "vosk",
language: "en",
source: "video", // dom element reference or query selector string of the html video tag
});
// preload required assets
voice2text_video.init();
// play the video
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>voice2text</title>
</head>
<body
style="
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
"
>
<audio crossorigin="anonymous" controls>
<source
src="https://voice2text.mehdiabdi.com/media/Watch%20Sir%20David%20Attenborough%20s%20powerful%20speech%20to%20leaders%20at%20COP26.mp3"
type="audio/mpeg"
/>
</audio>
<textarea rows="30" cols="100" style=""></textarea>
<h1></h1>
<script type="module">
import VoiceToText from "https://cdn.jsdelivr.net/npm/voice2text@latest/dist/voice2text.js";
let voice2text_audio = new VoiceToText({
converter: "vosk",
language: "en",
source: "audio", // dom element reference or query selector string of the html audio tag
});
// preload required assets
voice2text_audio.init();
let textarea = document.querySelector("textarea");
let status = document.querySelector("h1");
status.innerHTML = voice2text_audio.converter.status;
window.addEventListener("voice", (e) => {
if (e.detail.type === "PARTIAL") {
console.log("partial result: ", e.detail.text);
textarea.value =
textarea.value.replace(/~.*?~/g, "") + `~${e.detail.text}~`;
} else if (e.detail.type === "FINAL") {
console.log("final result: ", e.detail.text);
textarea.value =
textarea.value.replace(/~.*?~/g, "") + " " + e.detail.text;
} else if (e.detail.type === "STATUS") {
console.log("status: ", e.detail.text);
status.innerHTML = e.detail.text;
}
});
// play the audio
</script>
</body>
</html>
git clone https://github.com/m-abdi/voice2text.git
cd voice2text && npm install
npm run build-vosk
npm run build