Build a Voice Notepad Using Native File System API & Web Speech API in Javascript Full Project For Beginners

You are currently viewing Build a Voice Notepad Using Native File System API & Web Speech API in Javascript Full Project For Beginners

hello friends good in this tutorial I will be building in voice notepad using the native file system API and web speech API so all the source code of this tutorial is given below and also a step-by-step YouTube video is also shown below so keep follow this blog

 

 

Screenshots

 

 

 

As you can see above guys we have four options so the first option when we click that option the it will ask for permission for the microphone is the allowed the permission then it will record the voice from the microphone and it will write the same text that we spoke inside the textarea the second option allows you to load any sort of text file from your local file system using the native file system API and you can edit that file make changes and then you can save tha and the third option does the opposite of that if you want a newly created file you can click that option create some content and then you can click the third option to save that file with a unique filename and IV option guys is clear text it will clear out the content which was there inside the textarea

now guys for building this application using two Technologies the first technology is the native file system API and the second one is web speech API so that we just to tell you at the starting of the tutorial that this the native file system API is a very newly supported API which is introduced by various browsers such as Google Chrome Firefox Safari and at this moment of time this API is not fully supported on all browsers so we need to just go to go to a URL where we need to register for this API sweet is the free API you can register successfully after that you will get a token you need to submit that token with the meta tag I will guide you in the procedure step by step so just follow the procedure

  1. Enabling via chrome://flags 

    If you want to experiment with the Native File System API locally, enable the #native-file-system-api flag in chrome://flags

 

 

Leave a Reply