Voice Message Bubble — Free HTML CSS JS Chat Snippet

<div class="wrap">
  <div class="chat-thread">
    <div class="bubble bubble-in">
      <div class="avatar">M</div>
      <div class="voice-card">
        <button class="play-btn" id="play-btn" aria-label="Play voice message">
          <svg id="icon-play" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="6 3 20 12 6 21 6 3"/></svg>
          <svg id="icon-pause" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="display:none"><rect x="5" y="3" width="5" height="18" rx="1.5"/><rect x="14" y="3" width="5" height="18" rx="1.5"/></svg>
        </button>
        <div class="waveform" id="waveform"></div>
        <div class="time" id="time-label">0:00</div>
      </div>
    </div>
  </div>
</div>

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

.wrap { width: 100%; max-width: 380px; }
.chat-thread { display: flex; flex-direction: column; gap: 10px; }
.bubble { display: flex; align-items: flex-end; gap: 8px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #818cf8, #6366f1); color: #fff; font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.voice-card { background: #fff; border-radius: 18px 18px 18px 4px; padding: 10px 14px 10px 10px; display: flex; align-items: center; gap: 10px; box-shadow: 0 1px 2px rgba(15,23,42,0.06), 0 8px 20px rgba(15,23,42,0.06); max-width: 260px; }

.play-btn { width: 34px; height: 34px; border-radius: 50%; background: #6366f1; border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.15s, transform 0.1s; }
.play-btn:hover { background: #4f46e5; }
.play-btn:active { transform: scale(0.94); }
.play-btn svg#icon-play { margin-left: 2px; }

.waveform { position: relative; display: flex; align-items: center; gap: 2px; height: 28px; flex: 1; cursor: pointer; user-select: none; touch-action: none; }
.bar { width: 2.5px; border-radius: 2px; background: #d6dbea; transition: background 0.08s linear; flex-shrink: 0; }
.bar.played { background: #6366f1; }

.time { font-size: 10.5px; color: #94a3b8; font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 30px; text-align: right; }

var waveformEl = document.getElementById('waveform');
var playBtn = document.getElementById('play-btn');
var iconPlay = document.getElementById('icon-play');
var iconPause = document.getElementById('icon-pause');
var timeLabel = document.getElementById('time-label');

var DURATION = 18.4;
var BAR_COUNT = 46;

var barHeights = generateBarHeights(BAR_COUNT, 1337);

function generateBarHeights(count, seed) {
  var heights = [];
  var s = seed;
  function nextRand() {
    s = (s * 9301 + 49297) % 233280;
    return s / 233280;
  }
  for (var i = 0; i < count; i++) {
    var base = 0.3 + Math.abs(Math.sin(i * 0.42)) * 0.5;
    var jitter = (nextRand() - 0.5) * 0.35;
    var h = Math.max(0.18, Math.min(1, base + jitter));
    heights.push(h);
  }
  return heights;
}

function buildWaveform() {
  waveformEl.innerHTML = '';
  for (var i = 0; i < BAR_COUNT; i++) {
    var bar = document.createElement('div');
    bar.className = 'bar';
    bar.style.height = Math.round(barHeights[i] * 26) + 'px';
    waveformEl.appendChild(bar);
  }
}
buildWaveform();

var elapsed = 0;
var playing = false;
var rafId = null;
var lastTs = null;

function formatTime(t) {
  var m = Math.floor(t / 60);
  var s = Math.floor(t % 60);
  return m + ':' + String(s).padStart(2, '0');
}

function updateUi() {
  var pct = elapsed / DURATION;
  var playedCount = Math.round(pct * BAR_COUNT);
  var bars = waveformEl.querySelectorAll('.bar');
  bars.forEach(function (bar, i) {
    bar.classList.toggle('played', i < playedCount);
  });
  timeLabel.textContent = formatTime(playing ? DURATION - elapsed : (elapsed || DURATION));
}
updateUiInitial();
function updateUiInitial() {
  timeLabel.textContent = formatTime(DURATION);
}

function tick(ts) {
  if (!playing) return;
  if (lastTs === null) lastTs = ts;
  var dt = (ts - lastTs) / 1000;
  lastTs = ts;
  elapsed += dt;
  if (elapsed >= DURATION) {
    elapsed = DURATION;
    updateUi();
    stopPlayback();
    return;
  }
  updateUi();
  rafId = requestAnimationFrame(tick);
}

function startPlayback() {
  playing = true;
  lastTs = null;
  iconPlay.style.display = 'none';
  iconPause.style.display = '';
  rafId = requestAnimationFrame(tick);
}

function stopPlayback() {
  playing = false;
  iconPlay.style.display = '';
  iconPause.style.display = 'none';
  if (rafId) cancelAnimationFrame(rafId);
}

function togglePlay() {
  if (playing) {
    stopPlayback();
  } else {
    if (elapsed >= DURATION) elapsed = 0;
    startPlayback();
  }
}

playBtn.addEventListener('click', togglePlay);

function seekFromClientX(clientX) {
  var rect = waveformEl.getBoundingClientRect();
  var x = clientX - rect.left;
  var pct = Math.max(0, Math.min(1, x / rect.width));
  elapsed = pct * DURATION;
  updateUi();
}

var dragging = false;
waveformEl.addEventListener('pointerdown', function (e) {
  dragging = true;
  waveformEl.setPointerCapture(e.pointerId);
  seekFromClientX(e.clientX);
});
waveformEl.addEventListener('pointermove', function (e) {
  if (!dragging) return;
  seekFromClientX(e.clientX);
});
waveformEl.addEventListener('pointerup', function () {
  dragging = false;
});
waveformEl.addEventListener('pointercancel', function () {
  dragging = false;
});