Voice Memo Recorder — Waveform UI HTML CSS JS

<div class="vmr-card">
  <div class="vmr-head">
    <h3>Voice memo</h3>
    <span class="vmr-time" id="vmrTime">0:00</span>
  </div>

  <div class="vmr-bars" id="vmrBars"></div>

  <div class="vmr-controls">
    <button type="button" class="vmr-record" id="vmrRecord" aria-label="Record">
      <span class="vmr-record-dot"></span>
    </button>
    <button type="button" class="vmr-play" id="vmrPlay" hidden aria-label="Play">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><polygon points="6 4 20 12 6 20"/></svg>
    </button>
    <button type="button" class="vmr-discard" id="vmrDiscard" hidden aria-label="Discard">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
    </button>
  </div>
  <p class="vmr-status" id="vmrStatus">Tap to start recording</p>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f1f5f9;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}

.vmr-card{background:#fff;border-radius:18px;padding:22px;width:100%;max-width:340px;box-shadow:0 18px 44px rgba(15,23,42,.12);text-align:center}
.vmr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.vmr-head h3{font-size:15px;font-weight:800;color:#0f172a}
.vmr-time{font-size:13px;font-weight:700;color:#64748b;font-variant-numeric:tabular-nums}

.vmr-bars{display:flex;align-items:center;justify-content:center;gap:3px;height:56px;margin-bottom:18px}
.vmr-bar{width:3px;border-radius:2px;background:#cbd5e1;height:6px;transition:height .1s ease,background .2s}
.vmr-bar.live{background:#6366f1}

.vmr-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:10px}
.vmr-record{width:64px;height:64px;border-radius:50%;border:none;background:#ef4444;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s,border-radius .2s;box-shadow:0 8px 20px rgba(239,68,68,.35)}
.vmr-record:hover{transform:scale(1.05)}
.vmr-record-dot{width:22px;height:22px;border-radius:50%;background:#fff;transition:border-radius .2s,width .2s,height .2s}
.vmr-record.recording .vmr-record-dot{border-radius:5px;width:18px;height:18px}
.vmr-record.recording{animation:vmrPulse 1.6s ease-out infinite}
@keyframes vmrPulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.45)}70%{box-shadow:0 0 0 14px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}

.vmr-play,.vmr-discard{width:42px;height:42px;border-radius:50%;border:1.5px solid #e2e8f0;background:#fff;color:#1e293b;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.vmr-play:hover,.vmr-discard:hover{background:#f8fafc}
.vmr-play.playing{background:#eef2ff;border-color:#6366f1;color:#6366f1}

.vmr-status{font-size:12.5px;font-weight:600;color:#94a3b8}

var BAR_COUNT = 40;
var bars = [];
var recording = false;
var playing = false;
var seconds = 0;
var timer = null;
var playTimer = null;
var hasRecording = false;
var recordedLevels = [];

var barsEl = document.getElementById('vmrBars');
for (var i = 0; i < BAR_COUNT; i++) {
  var b = document.createElement('div');
  b.className = 'vmr-bar';
  barsEl.appendChild(b);
  bars.push(b);
}

function formatTime(s) {
  var m = Math.floor(s / 60), r = s % 60;
  return m + ':' + (r < 10 ? '0' : '') + r;
}

function randomLevel() { return 5 + Math.random() * 50; }

document.getElementById('vmrRecord').addEventListener('click', function () {
  if (recording) { stopRecording(); } else { startRecording(); }
});

function startRecording() {
  recording = true;
  hasRecording = false;
  seconds = 0;
  recordedLevels = [];
  document.getElementById('vmrRecord').classList.add('recording');
  document.getElementById('vmrStatus').textContent = 'Recording…';
  document.getElementById('vmrPlay').hidden = true;
  document.getElementById('vmrDiscard').hidden = true;
  document.getElementById('vmrTime').textContent = '0:00';

  timer = setInterval(function () {
    seconds++;
    document.getElementById('vmrTime').textContent = formatTime(seconds);
    recordedLevels.push(randomLevel());
  }, 1000);

  animateLiveBars();
}

var liveBarRaf = null;
function animateLiveBars() {
  bars.forEach(function (bar, i) {
    var delay = i * 18;
    setTimeout(function () {
      if (!recording) return;
      bar.style.height = randomLevel() + 'px';
      bar.classList.add('live');
    }, delay);
  });
  if (recording) liveBarRaf = setTimeout(animateLiveBars, 320);
}

function stopRecording() {
  recording = false;
  clearInterval(timer);
  clearTimeout(liveBarRaf);
  hasRecording = seconds > 0;
  document.getElementById('vmrRecord').classList.remove('recording');
  bars.forEach(function (bar) { bar.classList.remove('live'); });

  if (hasRecording) {
    // Render a static waveform from the captured levels so the bars reflect this take.
    bars.forEach(function (bar, i) {
      var lvl = recordedLevels[i % recordedLevels.length] || 8;
      bar.style.height = Math.max(4, lvl * 0.6) + 'px';
      bar.style.background = '#cbd5e1';
    });
    document.getElementById('vmrStatus').textContent = formatTime(seconds) + ' recorded';
    document.getElementById('vmrPlay').hidden = false;
    document.getElementById('vmrDiscard').hidden = false;
  } else {
    document.getElementById('vmrStatus').textContent = 'Tap to start recording';
  }
}

document.getElementById('vmrPlay').addEventListener('click', function () {
  if (!hasRecording) return;
  if (playing) { stopPlayback(); return; }
  playing = true;
  this.classList.add('playing');
  document.getElementById('vmrStatus').textContent = 'Playing…';
  var elapsed = 0;
  playTimer = setInterval(function () {
    elapsed++;
    document.getElementById('vmrTime').textContent = formatTime(elapsed);
    var litCount = Math.round((elapsed / seconds) * BAR_COUNT);
    bars.forEach(function (bar, i) { bar.classList.toggle('live', i < litCount); });
    if (elapsed >= seconds) stopPlayback();
  }, 1000);
});

function stopPlayback() {
  playing = false;
  clearInterval(playTimer);
  document.getElementById('vmrPlay').classList.remove('playing');
  document.getElementById('vmrTime').textContent = formatTime(seconds);
  document.getElementById('vmrStatus').textContent = formatTime(seconds) + ' recorded';
  bars.forEach(function (bar) { bar.classList.remove('live'); });
}

document.getElementById('vmrDiscard').addEventListener('click', function () {
  stopPlayback();
  hasRecording = false;
  seconds = 0;
  recordedLevels = [];
  bars.forEach(function (bar) { bar.style.height = '6px'; bar.style.background = '#cbd5e1'; });
  document.getElementById('vmrTime').textContent = '0:00';
  document.getElementById('vmrStatus').textContent = 'Tap to start recording';
  document.getElementById('vmrPlay').hidden = true;
  document.getElementById('vmrDiscard').hidden = true;
});