The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Build a daily audio diary recorder

Written by

Bernardo Palos

in

Here’s how you can build a Daily Audio Diary Recorder as a simple app using web technologies. This will be a browser-based solution using HTML, JavaScript, and optionally some backend for storage (you can use Firebase, localStorage, or a basic server setup).

💡 Features:

  • Record audio directly from the browser

  • Save each entry with a date

  • Playback past entries

  • Store locally or sync to cloud

🧩 Tech Stack:

  • HTML5 for structure

  • JavaScript for audio recording and playback

  • IndexedDB or localStorage for local storage

  • Optional: Firebase/Express + MongoDB for cloud storage

✅ Step-by-Step Implementation (Browser-based)

1. HTML (Interface)

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Daily Audio Diary</title>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    button { margin: 10px; }
    audio { display: block; margin-top: 10px; }
  </style>
</head>
<body>
  <h2>Daily Audio Diary</h2>
  <button id="record">Start Recording</button>
  <button id="stop" disabled>Stop</button>
  <audio id="audio" controls></audio>
  <div id="log"></div>
  <script src="diary.js"></script>
</body>
</html>

2. JavaScript (Recording + Storage)

Create a file called diary.js:

javascript
let mediaRecorder;
let audioChunks = [];

const recordBtn = document.getElementById("record");
const stopBtn = document.getElementById("stop");
const audioPlayer = document.getElementById("audio");
const logDiv = document.getElementById("log");

recordBtn.onclick = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  mediaRecorder = new MediaRecorder(stream);
  mediaRecorder.start();
  audioChunks = [];

  mediaRecorder.ondataavailable = e => audioChunks.push(e.data);
  mediaRecorder.onstop = () => {
    const blob = new Blob(audioChunks, { type: 'audio/webm' });
    const url = URL.createObjectURL(blob);
    audioPlayer.src = url;

    const date = new Date().toISOString().split("T")[0];
    saveEntry(date, blob);
    loadEntries();
  };

  recordBtn.disabled = true;
  stopBtn.disabled = false;
};

stopBtn.onclick = () => {
  mediaRecorder.stop();
  recordBtn.disabled = false;
  stopBtn.disabled = true;
};

function saveEntry(date, blob) {
  const reader = new FileReader();
  reader.onload = function () {
    const base64Audio = reader.result;
    localStorage.setItem("diary_" + date, base64Audio);
  };
  reader.readAsDataURL(blob);
}

function loadEntries() {
  logDiv.innerHTML = "<h3>Previous Entries</h3>";
  Object.keys(localStorage).forEach(key => {
    if (key.startsWith("diary_")) {
      const audio = document.createElement("audio");
      audio.controls = true;
      audio.src = localStorage.getItem(key);
      const entry = document.createElement("div");
      entry.innerHTML = `<strong>${key.replace("diary_", "")}</strong>`;
      entry.appendChild(audio);
      logDiv.appendChild(entry);
    }
  });
}

// Load existing entries on page load
window.onload = loadEntries;

🗃️ Optional Cloud Integration (Firebase)

If you want to sync entries across devices:

  1. Set up Firebase Project

  2. Use Firebase Storage and Firestore

  3. Replace localStorage code with Firebase upload and download logic

🔐 Security Notes

  • This app stores recordings on the user’s device. For privacy, no cloud storage is used by default.

  • If you implement authentication/cloud sync, ensure recordings are encrypted and protected.

📱 Bonus: Turn into a PWA

You can convert this into a Progressive Web App (PWA) to allow offline usage and mobile installation. Add a manifest.json and service worker.

Let me know if you want:

  • Cloud sync code (Firebase/Node)

  • React Native version for mobile

  • Electron version for desktop

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

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

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About