Audio Player

Component for audio playback.

html

<div class="audio-player" style="--accent:#A8E6C1;">
  <div class="audio-player__art" aria-hidden="true">
    <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#A8E6C1" stroke-width="1.6"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="2.4" fill="#A8E6C1" stroke="none"/></svg>
  </div>
  <div class="audio-player__meta">
    <p class="audio-player__title">Morning Static</p>
    <p class="audio-player__artist">Field Notes</p>
  </div>
  <audio class="audio-player__el" controls  src="data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQAAAAA=">
    Your browser does not support the audio element.
  </audio>
  
  <a class="audio-player__transcript" href="#transcript" style="color:#A8E6C1;">View transcript</a>
  
</div>
<style>
.audio-player { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: 380px; padding: 16px; border-radius: 14px; background: #FAF7F2; border: 1px solid #24143022; font: 14px/1.4 system-ui, sans-serif; color: #241430; }
.audio-player__art { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #24143010; flex: none; }
.audio-player__meta { flex: 1 1 140px; min-width: 0; }
.audio-player__title { margin: 0; font-weight: 600; }
.audio-player__artist { margin: 2px 0 0; color: #24143099; font-size: 12px; }
.audio-player__el { width: 100%; }
.audio-player__transcript { display: inline-block; width: 100%; font-size: 12px; font-weight: 600; text-decoration: underline; }
</style>

tailwind

<div class="audio-player-tw flex flex-wrap items-center gap-3 max-w-[380px] p-4 rounded-2xl bg-[#FAF7F2] border border-[#24143022] font-sans text-sm text-[#241430]" style="--accent:#A8E6C1;">
  <div class="w-11 h-11 rounded-full flex items-center justify-center bg-[#24143010] flex-none" aria-hidden="true">
    <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#A8E6C1" stroke-width="1.6"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="2.4" fill="#A8E6C1" stroke="none"/></svg>
  </div>
  <div class="flex-1 min-w-[140px]">
    <p class="m-0 font-semibold">Morning Static</p>
    <p class="m-0 mt-0.5 text-xs text-[#241430]/60">Field Notes</p>
  </div>
  <audio class="w-full" controls  src="data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQAAAAA=">
    Your browser does not support the audio element.
  </audio>
  
  <a class="block w-full text-xs font-semibold underline" href="#transcript" style="color:#A8E6C1;">View transcript</a>
  
</div>

react

export function AudioPlayer({
  trackTitle = "Morning Static",
  artist = "Field Notes",
  accent = "#A8E6C1",
  loop = false,
  transcript = true,
}) {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 12, maxWidth: 380,
      padding: 16, borderRadius: 14, background: "#FAF7F2", border: "1px solid #24143022",
      font: "14px/1.4 system-ui, sans-serif", color: "#241430" }}>
      <div style={{ width: 44, height: 44, borderRadius: "50%", display: "flex", alignItems: "center",
        justifyContent: "center", background: "#24143010", flex: "none" }} aria-hidden="true">
        <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke={accent} strokeWidth="1.6">
          <circle cx="12" cy="12" r="9" />
          <circle cx="12" cy="12" r="2.4" fill={accent} stroke="none" />
        </svg>
      </div>
      <div style={{ flex: "1 1 140px", minWidth: 0 }}>
        <p style={{ margin: 0, fontWeight: 600 }}>{trackTitle}</p>
        <p style={{ margin: "2px 0 0", color: "#24143099", fontSize: 12 }}>{artist}</p>
      </div>
      <audio
        style={{ width: "100%" }}
        controls
        loop={loop}
        src="data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQAAAAA="
      >
        Your browser does not support the audio element.
      </audio>
      {transcript && (
        <a
          href="#transcript"
          style={{ display: "inline-block", width: "100%", fontSize: 12, fontWeight: 600,
            textDecoration: "underline", color: accent }}
        >
          View transcript
        </a>
      )}
    </div>
  );
}