Voice Controlled Notes taking application using Svelte

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

Comments

[Desiré 👩‍🎓👩‍🏫]

Now, now, this is amazing!

THANK YOU so much for sharing this. Design is also so pretty!