Application Introduction
I have build a demo application "Voice Notes" using Web Speech API and Svelte. This application help you with the following features
1) Taking notes by using voice and keyboard input
2) Listen to created notes
3) Delete the created notes
Speech API
The Web Speech API enables you to incorporate voice data into web apps. The Web Speech API has two parts: SpeechSynthesis (Text-to-Speech), and SpeechRecognition (Speech-to-Text).
Note - Speech API is Supported only in Chrome and Firefox.
Working Demo on Youtube
Mobile design
Complete Code
https://github.com/karkranikhil/voice-notes
Demo
https://voice-notes-nh00avakc.now.sh/
Speech API High Level Overview.
1. Check the API support
try {
let SpeechRecognition =
window.SpeechRecognition || window.webkitSpeechRecognition;
var recognition = new SpeechRecognition();
} catch (e) {
console.error(e);
}
2. Speech to Text event handler
let recordingText = `Press the Play button to Start recording.`; // use this in HTML
//recognition.continuous - If false, the recording will stop after a few seconds of silence.
// When true, the silence period is longer (about 15 seconds)
recognition.continuous = true;
// onresult called every time the Speech API captures Voice.
recognition.onresult = function(event) {
let current = event.resultIndex;
// Get a transcript of what was said.
let transcript = event.results[current][0].transcript;
console.log(transcript);
};
// Trigger on start
recognition.onstart = function() {
// setting the text to inform user about the action
recordingText =
"Voice recognition Started. Try speaking into the microphone.";
};
// Trigger on end
recognition.onspeechend = function() {
// setting the text to inform user about the action
recordingText = "Voice recognition turned off.";
};
// Trigger on error
recognition.onerror = function(event) {
if (event.error == "no-speech") {
// setting the text to inform user about the action
recordingText = "No Voice was detected. Try again.";
}
};
3. Text to Speech event Handlers
function readOutLoud(message) {
let speech = new SpeechSynthesisUtterance();
speech.text = message;
speech.volume = 1;
speech.rate = 1;
speech.pitch = 1;
window.speechSynthesis.speak(speech);
}
Reference
https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API
Top comments (1)