studio-engine 0.120.0 → 0.122.0

data/app/javascript/studio/voice_profile.js

@@ -26,31 +26,25 @@
 //   fake       Tests only: a fixed vector per voice name (window.studioFakeVoice),
 //              because Chrome's fake microphone cannot play chosen audio.
 //
-// It imports nothing statically; the model runtime is a dynamic import of the
-// transformers.js URL the page names (Studio::VoiceMatch::TRANSFORMERS_URL), made
-// only once someone opens the setup. test/javascript/voice_profile.test.mjs
-// loads it as a data: module.
+// The level meter, the silence rule and the recording format are the engine's
+// one copy (studio/level_meter, studio/voice_recorder; docs/VOICE_CAPTURE.md),
+// re-exported here so callers of this module keep their names. The model
+// runtime is a dynamic import of the transformers.js URL the page names
+// (Studio::VoiceMatch::TRANSFORMERS_URL), made only once someone opens the
+// setup. test/javascript/voice_profile.test.mjs loads it with its studio/
+// imports inlined (test/javascript/support/studio_module.mjs).
+import { SILENCE_RMS, rootMeanSquare, peakWindowRms, meterLevel, takeWasHeard, createLevelMeter } from "studio/level_meter"
+import { pickMimeType } from "studio/voice_recorder"
+
+export { SILENCE_RMS, rootMeanSquare, peakWindowRms, meterLevel, takeWasHeard, pickMimeType }
 
 // The model hears 16 kHz mono; a take is cut to its first MAX_SECONDS.
 export const SAMPLE_RATE = 16000
 export const MAX_SECONDS = 10
 
-// The loudest frame (RMS, 0..1) a take must reach to count as heard: 0.01 is
-// -40 dBFS. A muted microphone sits at 0, a quiet room near 0.002-0.006, and
-// speech at arm's length peaks well above 0.05.
-export const SILENCE_RMS = 0.01
-
 // A phrase is about four seconds; the take stops itself after TAKE_MS.
 export const TAKE_MS = 6000
 
-const MIME_CANDIDATES = [
-  "audio/webm;codecs=opus",
-  "audio/webm",
-  "audio/mp4;codecs=mp4a.40.2",
-  "audio/mp4",
-  "audio/ogg;codecs=opus"
-]
-
 export const COPY = {
   idle: ["", ""],
   ready: ["Record phrase {n}", "Tap Record, then read phrase {n} out loud."],
@@ -64,6 +58,7 @@ export const MESSAGES = {
   silent: "I couldn't hear that one. Check your microphone and read it again.",
   failed: "That one didn't work. Tap Record and read it again.",
   denied: "Allow the microphone to set up your voice.",
+  busy: "Your microphone is busy in another app. Close it there, then try again.",
   unsupported: "This browser can't record here. Try Safari or Chrome.",
   network: "We couldn't reach the server. Tap Save again.",
   notSaved: "That didn't save. Tap Save again."
@@ -71,48 +66,13 @@ export const MESSAGES = {
 
 export class SilentTakeError extends Error {}
 
-export function rootMeanSquare(samples) {
-  if (!samples || samples.length === 0) return 0
-  let sum = 0
-  for (let i = 0; i < samples.length; i++) sum += samples[i] * samples[i]
-  return Math.sqrt(sum / samples.length)
-}
-
-// The loudest 50 ms window's RMS, 0..1, at 16 kHz.
-export function peakWindowRms(samples, windowSize = 800) {
-  let peak = 0
-  if (!samples) return peak
-  for (let start = 0; start < samples.length; start += windowSize) {
-    const end = Math.min(samples.length, start + windowSize)
-    let sum = 0
-    for (let i = start; i < end; i++) sum += samples[i] * samples[i]
-    const rms = Math.sqrt(sum / Math.max(1, end - start))
-    if (rms > peak) peak = rms
-  }
-  return peak
-}
-
-// The meter's reading, 0..1: logarithmic from -40 dBFS to -10 dBFS, where
-// speech lives.
-export function meterLevel(rms) {
-  if (!(rms > 0)) return 0
-  const db = 20 * Math.log10(rms)
-  return Math.min(1, Math.max(0, (db + 40) / 30))
-}
-
-// Heard, unless the meter measured the take and it stayed under SILENCE_RMS. A
-// take the meter never measured (no Web Audio, a context that never ran) is
-// let through, and the embedder's own check on the decoded samples decides.
-export function takeWasHeard(peakRms, framesMeasured) {
-  if (!framesMeasured) return true
-  return peakRms >= SILENCE_RMS
-}
-
-export function pickMimeType(isTypeSupported) {
-  if (typeof isTypeSupported !== "function") return ""
-  return MIME_CANDIDATES.find((type) => {
-    try { return isTypeSupported(type) } catch (_) { return false }
-  }) || ""
+// Why the microphone would not open: refused, held by another app
+// (NotReadableError; Chrome's older TrackStartError), or anything else.
+export function openFailure(error) {
+  const name = error && error.name
+  if (name === "NotAllowedError") return MESSAGES.denied
+  if (name === "NotReadableError" || name === "TrackStartError") return MESSAGES.busy
+  return MESSAGES.failed
 }
 
 // The words for a state, with {n} the phrase being read (1-based).
@@ -258,13 +218,7 @@ export function mountVoiceProfile(root, win = window) {
   let recorder = null
   let chunks = []
   let timer = null
-  let audioContext = null
-  let analyser = null
-  let levelBuffer = null
-  let meterFrame = null
-  let meterTimer = null
-  let peakRms = 0
-  let frames = 0
+  let meter = null
   let starting = false
   let destroyed = false
 
@@ -327,56 +281,27 @@ export function mountVoiceProfile(root, win = window) {
     root.dataset.voiceLevel = level.toFixed(2)
   }
 
-  function sampleLevel() {
-    if (!analyser || !audioContext || audioContext.state !== "running") return
-    analyser.getFloatTimeDomainData(levelBuffer)
-    const rms = rootMeanSquare(levelBuffer)
-    frames += 1
-    if (rms > peakRms) {
-      peakRms = rms
-      root.dataset.voicePeak = rms.toFixed(4)
-    }
-    if (rms >= SILENCE_RMS) root.dataset.voiceHeard = "true"
-    paintLevel(meterLevel(rms))
-  }
-
+  // The engine's one meter (studio/level_meter) on the take's own stream.
   function startMeter(source) {
-    peakRms = 0
-    frames = 0
     root.dataset.voiceHeard = "false"
     root.dataset.voicePeak = "0"
-    paintLevel(0)
-    const AudioContextClass = win.AudioContext || win.webkitAudioContext
-    if (!AudioContextClass) return
-    try {
-      audioContext = new AudioContextClass()
-      const input = audioContext.createMediaStreamSource(source)
-      analyser = audioContext.createAnalyser()
-      analyser.fftSize = 1024
-      levelBuffer = new Float32Array(analyser.fftSize)
-      input.connect(analyser)
-      if (audioContext.state === "suspended" && audioContext.resume) audioContext.resume().catch(() => {})
-    } catch (_) {
-      closeMeter()
-      return
-    }
-    const frame = () => {
-      sampleLevel()
-      meterFrame = win.requestAnimationFrame(frame)
-    }
-    meterFrame = win.requestAnimationFrame(frame)
-    // A background tab stops animation frames; the timer keeps measuring.
-    meterTimer = win.setInterval(sampleLevel, 100)
+    let peak = 0
+    meter = createLevelMeter(source, {
+      win,
+      onPaint: paintLevel,
+      onSample: (rms) => {
+        if (rms > peak) {
+          peak = rms
+          root.dataset.voicePeak = rms.toFixed(4)
+        }
+        if (rms >= SILENCE_RMS) root.dataset.voiceHeard = "true"
+      }
+    })
   }
 
   function closeMeter() {
-    if (meterFrame) win.cancelAnimationFrame(meterFrame)
-    if (meterTimer) win.clearInterval(meterTimer)
-    meterFrame = null
-    meterTimer = null
-    analyser = null
-    if (audioContext && audioContext.state !== "closed") audioContext.close().catch(() => {})
-    audioContext = null
+    if (meter) meter.close()
+    meter = null
     paintLevel(0)
   }
 
@@ -389,7 +314,7 @@ export function mountVoiceProfile(root, win = window) {
     try {
       stream = await win.navigator.mediaDevices.getUserMedia({ audio: true })
     } catch (error) {
-      setState("ready", error && error.name === "NotAllowedError" ? MESSAGES.denied : MESSAGES.failed)
+      setState("ready", openFailure(error))
       return
     }
     if (destroyed || state !== "ready") { release(); return }
@@ -428,8 +353,8 @@ export function mountVoiceProfile(root, win = window) {
 
   async function finishTake() {
     const discarded = recorder && recorder.discard
-    sampleLevel()
-    const heard = takeWasHeard(peakRms, frames)
+    if (meter) meter.sample()
+    const heard = meter ? meter.heard() : true
     closeMeter()
     release()
     const type = (recorder && recorder.mimeType) || "audio/webm"

data/app/javascript/studio/voice_recorder.js

@@ -0,0 +1,363 @@
+// studio/voice_recorder: one record button that captures a take and hands the
+// finished audio to the page. It never uploads: the page listens for the take
+// event and decides where the audio goes (a chat message, a transcript, an
+// embedding). Ported from Voicebox's recorder_controller.js; the contract is in
+// docs/VOICE_CAPTURE.md.
+//
+//   <div data-studio-controller="voice-recorder" data-voice-recorder-state="idle"
+//        data-voice-recorder-max-ms="60000" data-voice-recorder-mode="toggle"
+//        data-voice-recorder-copy='{"idle":{"button":"Talk"}}'>
+//     <button type="button" data-voice-recorder-button>
+//       <span data-voice-recorder-label>Record</span></button>
+//     <span data-voice-recorder-timer>0:00</span>
+//     <p data-voice-recorder-status role="status"></p>
+//   </div>
+//
+// STATES, on data-voice-recorder-state: idle -> starting -> recording ->
+// captured | silent | failed, plus denied (the microphone was refused) and
+// unsupported (no MediaRecorder). Any of idle, captured, silent, failed and
+// denied takes a new press.
+//
+// EVENTS, dispatched on the root (they bubble):
+//   studio:voice-recorder:take    detail { blob, mimeType, durationMs, peakRms, microphone: { label, deviceId } }
+//   studio:voice-recorder:silent  detail { durationMs, microphone }  (nothing heard: no blob is handed over)
+//   studio:voice-recorder:state   detail { state }
+// and, on window, studio/microphone's EVENTS, which the chip listens to.
+//
+// MODES: "toggle" (tap to start, tap to stop) or "hold" (press and hold to
+// talk; letting go stops). While it records, --studio-recorder-level (0..1) on
+// the root drives the ring (studio/level_meter), and data-voice-recorder-heard
+// turns "true" once a frame clears SILENCE_RMS.
+import { openMicrophone, announce, silentMessage, EVENTS as MICROPHONE_EVENTS } from "studio/microphone"
+import { createLevelMeter, SILENCE_RMS } from "studio/level_meter"
+
+export const EVENTS = {
+  take: "studio:voice-recorder:take",
+  silent: "studio:voice-recorder:silent",
+  state: "studio:voice-recorder:state"
+}
+
+// What to ask MediaRecorder for, in order: webm/opus on Chrome and Firefox,
+// mp4/aac on iOS Safari. The first the browser supports wins.
+export const MIME_CANDIDATES = [
+  "audio/webm;codecs=opus",
+  "audio/webm",
+  "audio/mp4;codecs=mp4a.40.2",
+  "audio/mp4",
+  "audio/ogg;codecs=opus"
+]
+
+export const READY = ["idle", "captured", "silent", "failed", "denied"]
+
+// How long a take may stay silent before the status asks whether the
+// microphone is on.
+export const QUIET_HINT_MS = 2500
+
+export const COPY = {
+  idle: { button: "Record", status: "" },
+  starting: { button: "Starting...", status: "" },
+  recording: { button: "Stop", status: "Listening...", quiet: "I can't hear anything yet. Is your microphone on?", heard: "Listening..." },
+  captured: { button: "Record again", status: "Got it." },
+  silent: { button: "Record", status: "I couldn't hear anything. Check your microphone and try again.",
+            named: "I couldn't hear anything from %{microphone}. Pick another microphone and try again." },
+  failed: { button: "Try again", status: "That didn't record. Try again.", start: "I couldn't start recording. Try again.",
+            missing: "I couldn't find a microphone. Plug one in and try again.",
+            busy: "Your microphone is busy in another app. Close it there, then try again." },
+  denied: { button: "Record", status: "Allow the microphone to record." },
+  unsupported: { button: "Record", status: "This browser can't record here. Try Safari or Chrome." }
+}
+
+export function pickMimeType(isTypeSupported) {
+  if (typeof isTypeSupported !== "function") return ""
+  return MIME_CANDIDATES.find((type) => {
+    try { return isTypeSupported(type) } catch (_) { return false }
+  }) || ""
+}
+
+export function formatElapsed(ms) {
+  const seconds = Math.max(0, Math.floor(ms / 1000))
+  return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, "0")}`
+}
+
+// The line for a microphone that would not open (NotAllowedError is "denied",
+// not this). NotReadableError is a microphone another app holds (Chrome's
+// older name, TrackStartError); everything else reads as no microphone found.
+export const BUSY_ERRORS = ["NotReadableError", "TrackStartError"]
+
+export function failedLine(error, copy = COPY) {
+  const busy = !!error && BUSY_ERRORS.includes(error.name)
+  return busy ? (copy.failed.busy || COPY.failed.busy) : copy.failed.missing
+}
+
+// The page's words over the defaults, one state at a time.
+export function mergeCopy(overrides) {
+  const merged = {}
+  Object.keys(COPY).forEach((state) => { merged[state] = { ...COPY[state] } })
+  if (overrides && typeof overrides === "object") {
+    Object.entries(overrides).forEach(([state, words]) => {
+      if (words && typeof words === "object") merged[state] = { ...(merged[state] || {}), ...words }
+    })
+  }
+  return merged
+}
+
+function parseJson(text) {
+  try { return JSON.parse(text || "null") } catch (_) { return null }
+}
+
+// Binds one recorder. Returns { start, stop, toggle, destroy, get state }.
+// options.open and options.meter replace openMicrophone and createLevelMeter
+// (the unit tests pass stubs).
+export function mountVoiceRecorder(root, { win = window, open = openMicrophone, meter: makeMeter = createLevelMeter } = {}) {
+  const one = (selector) => root.querySelector(selector)
+  const copy = mergeCopy(parseJson(root.getAttribute("data-voice-recorder-copy")))
+  const maxMs = parseInt(root.getAttribute("data-voice-recorder-max-ms") || "0", 10) || 0
+  const mode = root.getAttribute("data-voice-recorder-mode") === "hold" ? "hold" : "toggle"
+  const now = () => win.performance.now()
+
+  let state = null
+  let stream = null
+  let recorder = null
+  let meter = null
+  let chunks = []
+  let timer = null
+  let startedAt = 0
+  let microphone = { label: "", deviceId: null }
+  let hinted = null
+  let stopWanted = false
+  let destroyed = false
+
+  function setState(next, message = null) {
+    state = next
+    root.dataset.voiceRecorderState = next
+    const words = copy[next] || {}
+    const label = one("[data-voice-recorder-label]")
+    if (label && words.button) label.textContent = words.button
+    const status = one("[data-voice-recorder-status]")
+    if (status) status.textContent = message || words.status || ""
+    const button = one("[data-voice-recorder-button]")
+    if (button) {
+      button.setAttribute("aria-pressed", next === "recording" ? "true" : "false")
+      button.disabled = next === "unsupported"
+    }
+    if (next === "idle") paintTimer(0)
+    root.dispatchEvent(new win.CustomEvent(EVENTS.state, { bubbles: true, detail: { state: next } }))
+  }
+
+  function supported() {
+    return !!(win.MediaRecorder && win.navigator && win.navigator.mediaDevices && win.navigator.mediaDevices.getUserMedia)
+  }
+
+  function paintLevel(level) {
+    root.style.setProperty("--studio-recorder-level", level.toFixed(3))
+    root.dataset.voiceRecorderLevel = level.toFixed(2)
+  }
+
+  function paintTimer(ms) {
+    const el = one("[data-voice-recorder-timer]")
+    if (el) el.textContent = formatElapsed(ms)
+  }
+
+  function hint(kind) {
+    if (state !== "recording" || hinted === kind || !copy.recording[kind]) return
+    hinted = kind
+    const status = one("[data-voice-recorder-status]")
+    if (status) status.textContent = copy.recording[kind]
+  }
+
+  function onSample(rms) {
+    announce(MICROPHONE_EVENTS.level, { rms }, win)
+    if (rms >= SILENCE_RMS && root.dataset.voiceRecorderHeard !== "true") {
+      root.dataset.voiceRecorderHeard = "true"
+      hint("heard")
+    } else if (root.dataset.voiceRecorderHeard !== "true" && startedAt && now() - startedAt > QUIET_HINT_MS) {
+      hint("quiet")
+    }
+    root.dataset.voiceRecorderPeak = meter ? meter.peak.toFixed(4) : "0"
+  }
+
+  function stopTimer() {
+    if (timer) win.clearInterval(timer)
+    timer = null
+  }
+
+  // Lets go of the meter and the microphone, and tells the chip.
+  function release() {
+    stopTimer()
+    if (meter) meter.close()
+    meter = null
+    if (stream) {
+      stream.getTracks().forEach((track) => track.stop())
+      announce(MICROPHONE_EVENTS.closed, {}, win)
+    }
+    stream = null
+  }
+
+  async function start() {
+    if (destroyed || !READY.includes(state)) return
+    stopWanted = false
+    setState("starting")
+    let opened
+    try {
+      opened = await open(win.navigator.mediaDevices)
+    } catch (error) {
+      if (destroyed) return
+      const denied = error && error.name === "NotAllowedError"
+      if (denied) announce(MICROPHONE_EVENTS.denied, {}, win)
+      setState(denied ? "denied" : "failed", denied ? null : failedLine(error, copy))
+      return
+    }
+    stream = opened.stream
+    microphone = { label: opened.label || "", deviceId: opened.deviceId || null }
+    // Destroyed, or let go of (hold mode) before the microphone opened.
+    if (destroyed || stopWanted) {
+      release()
+      if (!destroyed) setState("idle")
+      return
+    }
+    chunks = []
+    try {
+      begin(stream)
+    } catch (_) {
+      // MediaRecorder refused the stream: let go of the microphone, the meter
+      // and its frames rather than leave them running.
+      recorder = null
+      release()
+      setState("failed", copy.failed.start)
+    }
+  }
+
+  function begin(source) {
+    root.dataset.voiceRecorderHeard = "false"
+    root.dataset.voiceRecorderPeak = "0"
+    hinted = null
+    meter = makeMeter(source, { win, onSample, onPaint: paintLevel })
+    const MediaRecorderClass = win.MediaRecorder
+    const mimeType = pickMimeType(MediaRecorderClass.isTypeSupported && MediaRecorderClass.isTypeSupported.bind(MediaRecorderClass))
+    try {
+      recorder = mimeType ? new MediaRecorderClass(source, { mimeType }) : new MediaRecorderClass(source)
+    } catch (_) {
+      recorder = new MediaRecorderClass(source)
+    }
+    recorder.addEventListener("dataavailable", (event) => {
+      if (event.data && event.data.size > 0) chunks.push(event.data)
+    })
+    recorder.addEventListener("stop", () => finish())
+    recorder.start(250)
+    startedAt = now()
+    paintTimer(0)
+    timer = win.setInterval(() => {
+      const elapsed = now() - startedAt
+      paintTimer(elapsed)
+      if (maxMs && elapsed >= maxMs) stop()
+    }, 250)
+    setState("recording")
+  }
+
+  function stop() {
+    if (state === "starting") { stopWanted = true; return }
+    if (recorder && recorder.state !== "inactive") recorder.stop()
+  }
+
+  function finish() {
+    const durationMs = Math.round(now() - startedAt)
+    stopTimer()
+    if (meter) meter.sample()
+    const heard = meter ? meter.heard() : true
+    const peakRms = meter ? meter.peak : 0
+    const type = (recorder && recorder.mimeType) || (chunks[0] && chunks[0].type) || "audio/webm"
+    const blob = new win.Blob(chunks, { type })
+    chunks = []
+    recorder = null
+    release()
+    if (destroyed) return
+    if (blob.size === 0 || !heard) {
+      setState("silent", silentMessage(copy.silent.named, microphone.label))
+      announce(MICROPHONE_EVENTS.silent, { label: microphone.label }, win)
+      root.dispatchEvent(new win.CustomEvent(EVENTS.silent, { bubbles: true, detail: { durationMs, microphone: { ...microphone } } }))
+      return
+    }
+    setState("captured")
+    root.dispatchEvent(new win.CustomEvent(EVENTS.take, {
+      bubbles: true,
+      detail: { blob, mimeType: type, durationMs, peakRms, microphone: { ...microphone } }
+    }))
+  }
+
+  function toggle() {
+    if (state === "recording" || state === "starting") stop()
+    else start()
+  }
+
+  // Buttons inside the root: the record button follows the mode.
+  function onClick(event) {
+    if (mode !== "toggle") return
+    const button = event.target.closest && event.target.closest("[data-voice-recorder-button]")
+    if (!button || !root.contains(button)) return
+    event.preventDefault()
+    toggle()
+  }
+
+  function onPointerDown(event) {
+    if (mode !== "hold") return
+    const button = event.target.closest && event.target.closest("[data-voice-recorder-button]")
+    if (!button || !root.contains(button)) return
+    event.preventDefault()
+    if (button.setPointerCapture && event.pointerId != null) {
+      try { button.setPointerCapture(event.pointerId) } catch (_) { /* a synthetic pointer */ }
+    }
+    start()
+  }
+
+  function onPointerUp() {
+    if (mode === "hold" && (state === "recording" || state === "starting")) stop()
+  }
+
+  // Hold mode by keyboard: Space or Enter held down records.
+  function onKeyDown(event) {
+    if (mode !== "hold" || event.repeat || ![" ", "Enter"].includes(event.key)) return
+    if (!event.target.closest || !event.target.closest("[data-voice-recorder-button]")) return
+    event.preventDefault()
+    start()
+  }
+
+  function onKeyUp(event) {
+    if (mode !== "hold" || ![" ", "Enter"].includes(event.key)) return
+    event.preventDefault()
+    onPointerUp()
+  }
+
+  root.addEventListener("click", onClick)
+  root.addEventListener("pointerdown", onPointerDown)
+  root.addEventListener("pointerup", onPointerUp)
+  root.addEventListener("pointercancel", onPointerUp)
+  root.addEventListener("keydown", onKeyDown)
+  root.addEventListener("keyup", onKeyUp)
+  root.dataset.voiceRecorderMode = mode
+  paintLevel(0)
+  if (supported()) setState("idle")
+  else setState("unsupported")
+  root.dataset.voiceRecorderReady = "true"
+
+  return {
+    start,
+    stop,
+    toggle,
+    get state() { return state },
+    destroy() {
+      destroyed = true
+      root.removeEventListener("click", onClick)
+      root.removeEventListener("pointerdown", onPointerDown)
+      root.removeEventListener("pointerup", onPointerUp)
+      root.removeEventListener("pointercancel", onPointerUp)
+      root.removeEventListener("keydown", onKeyDown)
+      root.removeEventListener("keyup", onKeyUp)
+      if (recorder && recorder.state !== "inactive") {
+        try { recorder.stop() } catch (_) { /* already stopped */ }
+      }
+      recorder = null
+      release()
+      delete root.dataset.voiceRecorderReady
+    }
+  }
+}

data/app/views/studio/voice/_microphone_chip.html.erb

@@ -0,0 +1,45 @@
+<%# The microphone chip (docs/VOICE_CAPTURE.md): names the microphone the page
+    records from, and a tap lists every microphone, the one in use marked, to
+    pick from (studio/microphone_chip, studio/microphone). While a take records
+    the dot beside the name shows the live level, so a dead microphone is
+    visible at a glance. Help: studio/voice/_microphone_help, inside it.
+
+    Locals, all optional:
+      copy:        overrides merged over Studio::VoiceCapture::MICROPHONE_COPY
+      storage_key: where the pick is remembered (default "studio.microphone")
+      id:          the picker's id, for aria-controls (one chip per page needs
+                   none; two chips need two ids)
+
+    The chip never opens the microphone: a recorder (studio/voice/_recorder or
+    any studio/voice_recorder) does, and the chip listens on window. The
+    controller is lazy (studio/stimulus); if it fails to load, the root carries
+    data-studio-controller-failed="microphone-chip" and says that picking a
+    microphone did not load (the recorder still uses the system default). %>
+<% copy = Studio::VoiceCapture.microphone_copy(local_assigns[:copy]) %>
+<% picker_id = local_assigns.fetch(:id, "studio-microphone-picker") %>
+<% storage_key = local_assigns.fetch(:storage_key, Studio::VoiceCapture::STORAGE_KEY) %>
+<%= render "studio/voice/styles" %>
+<div class="studio-mic"
+     data-studio-controller="microphone-chip"
+     data-microphone-state="prompt"
+     data-microphone-storage-key="<%= storage_key %>"
+     data-microphone-copy="<%= copy.to_json %>">
+  <button type="button" class="studio-mic-chip" data-microphone-chip aria-expanded="false" aria-controls="<%= picker_id %>">
+    <svg class="studio-mic-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M12 2a3.5 3.5 0 0 0-3.5 3.5v6a3.5 3.5 0 0 0 7 0v-6A3.5 3.5 0 0 0 12 2Z"/>
+      <path d="M6 10.5a1 1 0 1 0-2 0 8 8 0 0 0 7 7.94V21H8.5a1 1 0 1 0 0 2h7a1 1 0 1 0 0-2H13v-2.56a8 8 0 0 0 7-7.94 1 1 0 1 0-2 0 6 6 0 0 1-12 0Z"/>
+    </svg>
+    <span class="studio-mic-dot" data-microphone-dot aria-hidden="true"></span>
+    <span class="studio-mic-name" data-microphone-label><%= copy.dig("prompt", "chip") %></span>
+    <svg class="studio-mic-caret" viewBox="0 0 12 12" fill="currentColor" aria-hidden="true">
+      <path d="M2.2 4.2a.75.75 0 0 1 1.06 0L6 6.94l2.74-2.74a.75.75 0 1 1 1.06 1.06L6.53 8.53a.75.75 0 0 1-1.06 0L2.2 5.26a.75.75 0 0 1 0-1.06Z"/>
+    </svg>
+  </button>
+  <div id="<%= picker_id %>" class="studio-mic-panel card" data-microphone-panel hidden>
+    <p class="studio-mic-note" data-microphone-note role="status"><%= copy.dig("prompt", "note") %></p>
+    <ul class="studio-mic-list" data-microphone-list aria-label="Microphones"></ul>
+    <button type="button" class="studio-mic-help-link" data-microphone-help-link><%= copy.dig("help", "link") %></button>
+  </div>
+  <p class="studio-mic-failed"><%= copy["unavailable"] %></p>
+  <%= render "studio/voice/microphone_help", copy: copy, title_id: "#{picker_id}-help-title" %>
+</div>