Oh Snap!

Please turnoff your ad blocking mode for viewing your site content

Hit enter after type your search item

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

/
/
/
106 Views

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

READ  Auto Resize Textarea When Typing - Auto-Resize.js

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

 

<!DOCTYPE html>
<html>
  <head>
    <title>Currency Converter in Javascript</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
   
  </head>
  <body>
    <div class="container">
      <br>
      <h1 class="text-center">
        Voice Notepad
      </h1>
      <br>
      <span id="instructions"></span>
      <div class="form-group">
      <textarea class="form-control" id="textarea" cols="30" rows="10"></textarea>
      </div>
      <button id="start" class="btn btn-primary btn-block">
        Start Recording
      </button>
      <button id="load" class="btn btn-success btn-block">
        Load File
      </button>
      <button id="saveas" class="btn btn-warning btn-block">
        Save to File
      </button>
      <button id="clear" class="btn btn-danger btn-block">
        Clear Text
      </button>
    </div>
</body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="script.js"></script>
</html>

 

var SpeechRecognition = window.webkitSpeechRecognition;

var recognition = new SpeechRecognition();
let saveHandle

var Textbox = $("#textarea");
var instructions = $("#instructions");

var Content = "";

recognition.continuous = true;

recognition.onresult = function (event) {
  var current = event.resultIndex;

  var transcript = event.results[current][0].transcript;

  Content += transcript;
  Textbox.val(Content);
};

$("#start").on("click", function (e) {
  if ($(this).text() == "Stop Recording") {
    $(this).html("Start Recording");
    $("#instructions").html("");
    recognition.stop();
  } else {
    $(this).html("Stop Recording");
    $("#instructions").html("Voice Recognition is on");
    if (Content.length) {
      Content += " ";
    }
    recognition.start();
  }
});

$("#saveas").click(function (e) {
  saveText(Content);
});

async function saveText(content) {
  const opts = {
    type: "save-file",
    accepts: [
      {
        description: "Text file",
        extensions: ["txt"],
        mimeTypes: ["text/plain"],
      },
    ],
  };
  const handle = await window.chooseFileSystemEntries(opts);

  const writable = await handle.createWritable();
  // Write the contents of the file to the stream.
  await writable.write(content);
  // Close the file and write the contents to disk.
  await writable.close();
}

$("#load").click(function () {
    if($(this).html() == "Modify Changes"){
        saveFile(saveHandle,Content)
    }else{
    $(this).html("Modify Changes")
  loadFile();
    }
});
async function getNewFileHandle() {
  
  const handle = await window.chooseFileSystemEntries();
  return handle;
}
async function loadFile() {

  saveHandle = await getNewFileHandle()

  if(await verifyPermission(saveHandle,true)){
 
  // Request permission, if the user grants permission, return true.
    const file = await saveHandle.getFile();
    const contents = await file.text();
    console.log(contents);
    Content += contents;
    $("textarea").val(contents);
  }}

  async function saveFile(saveHandle,content){
    const writable = await saveHandle.createWritable();
    // Write the contents of the file to the stream.
    await writable.write(content);
    // Close the file and write the contents to disk.
    await writable.close();

    alert("File Changes were Saved")
  }

  async function verifyPermission(fileHandle, withWrite) {
    const opts = {};
    if (withWrite) {
      opts.writable = true;
    }
    // Check if we already have permission, if so, return true.
    if (await fileHandle.queryPermission(opts) === 'granted') {
      return true;
    }
    // Request permission to the file, if the user grants permission, return true.
    if (await fileHandle.requestPermission(opts) === 'granted') {
      return true;
    }
    // The user did nt grant permission, return false.
    return false;
  }

$("#clear").click(function () {
  Textbox.val("");
  $("#load").html("Load File")
  Content = ""
  $("#start").html("Start Recording")
});

Textbox.on("input", function () {
  Content = $(this).val();
});

Leave a Comment

Your email address will not be published. Required fields are marked *

This div height required for enabling the sticky sidebar
Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views :