The Palos Publishing Company

Categories We Write About

Build a voice-activated log entry tool

Written by

Bernardo Palos

in

Creating a voice-activated log entry tool involves capturing spoken input, converting it to text, and then saving that text as a log entry. Below is a detailed guide to building a simple web-based voice-activated log entry tool using JavaScript with the Web Speech API for speech recognition, and localStorage for saving logs.

Key Features:

  • Start/stop voice recording with a button

  • Convert voice to text in real-time

  • Save log entries automatically or on demand

  • View saved logs

Step 1: HTML Structure

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Voice-Activated Log Entry Tool</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 2em; }
    button { padding: 10px 20px; font-size: 16px; }
    #logOutput { margin-top: 1em; white-space: pre-wrap; background: #f0f0f0; padding: 1em; height: 200px; overflow-y: scroll; }
    #status { margin-top: 1em; font-weight: bold; }
  </style>
</head>
<body>
  <h1>Voice-Activated Log Entry Tool</h1>
  <button id="startStopBtn">Start Recording</button>
  <button id="saveBtn" disabled>Save Entry</button>
  <div id="status">Status: Idle</div>
  <textarea id="transcript" rows="5" style="width:100%; margin-top:1em;" placeholder="Your speech will appear here..."></textarea>
  <h2>Saved Logs</h2>
  <div id="logOutput"></div>

  <script src="app.js"></script>
</body>
</html>

Step 2: JavaScript for Speech Recognition & Log Saving (app.js)

js
const startStopBtn = document.getElementById('startStopBtn');
const saveBtn = document.getElementById('saveBtn');
const transcriptArea = document.getElementById('transcript');
const status = document.getElementById('status');
const logOutput = document.getElementById('logOutput');

let recognition;
let isRecording = false;

function initSpeechRecognition() {
  if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
    alert('Your browser does not support Speech Recognition.');
    return null;
  }
  
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  const recog = new SpeechRecognition();
  
  recog.continuous = true;
  recog.interimResults = true;
  recog.lang = 'en-US';

  recog.onstart = () => {
    status.textContent = 'Status: Listening...';
    isRecording = true;
    startStopBtn.textContent = 'Stop Recording';
    saveBtn.disabled = true;
  };

  recog.onend = () => {
    status.textContent = 'Status: Idle';
    isRecording = false;
    startStopBtn.textContent = 'Start Recording';
    saveBtn.disabled = transcriptArea.value.trim() === '';
  };

  recog.onerror = (event) => {
    status.textContent = 'Error: ' + event.error;
    isRecording = false;
    startStopBtn.textContent = 'Start Recording';
    saveBtn.disabled = transcriptArea.value.trim() === '';
  };

  recog.onresult = (event) => {
    let interimTranscript = '';
    let finalTranscript = '';
    for (let i = event.resultIndex; i < event.results.length; i++) {
      if (event.results[i].isFinal) {
        finalTranscript += event.results[i][0].transcript;
      } else {
        interimTranscript += event.results[i][0].transcript;
      }
    }
    transcriptArea.value = finalTranscript + interimTranscript;
    saveBtn.disabled = transcriptArea.value.trim() === '';
  };

  return recog;
}

function loadLogs() {
  const logs = JSON.parse(localStorage.getItem('voiceLogs') || '[]');
  logOutput.textContent = logs.map((log, idx) => `${idx + 1}. [${new Date(log.timestamp).toLocaleString()}]n${log.text}n`).join('n');
}

function saveLog(text) {
  if (!text.trim()) return;
  const logs = JSON.parse(localStorage.getItem('voiceLogs') || '[]');
  logs.push({ timestamp: Date.now(), text });
  localStorage.setItem('voiceLogs', JSON.stringify(logs));
  loadLogs();
}

startStopBtn.addEventListener('click', () => {
  if (!recognition) return;

  if (isRecording) {
    recognition.stop();
  } else {
    transcriptArea.value = '';
    recognition.start();
  }
});

saveBtn.addEventListener('click', () => {
  if (transcriptArea.value.trim() !== '') {
    saveLog(transcriptArea.value.trim());
    transcriptArea.value = '';
    saveBtn.disabled = true;
  }
});

const recognitionInstance = initSpeechRecognition();
let recognition = recognitionInstance;

loadLogs();

How it works:

  • Click Start Recording to begin voice capture.

  • Speech is transcribed live into the textarea.

  • Click Stop Recording to end voice capture.

  • Once stopped, Save Entry button becomes enabled if there’s text.

  • Clicking Save Entry stores the transcript in localStorage with a timestamp.

  • Saved logs display below, showing all previous entries.

Additional Notes:

  • This tool works best in Chrome or Edge browsers supporting Web Speech API.

  • For production, consider adding better error handling and UI/UX improvements.

  • You can extend it to export logs, delete entries, or sync with a backend.

Would you like me to help build a more advanced version with additional features?

Share This Page:

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Comments

Leave a Reply

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

Check Out Our Newest Posts we wrote about

Categories We Write About