wavegram 0.1.0

package/dist/index.es.js

@@ -0,0 +1,1024 @@
+var D = Object.defineProperty;
+var N = (e, s, t) => s in e ? D(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
+var c = (e, s, t) => N(e, typeof s != "symbol" ? s + "" : s, t);
+let x;
+function q() {
+  return x ?? (x = new AudioContext()), x;
+}
+async function z(e) {
+  return q().decodeAudioData(e.slice(0));
+}
+async function I(e) {
+  const s = await fetch(e);
+  if (!s.ok)
+    throw new Error(`Failed to load audio: ${s.status} ${s.statusText}`);
+  return s.arrayBuffer();
+}
+function O(e, s) {
+  const t = new Audio(e);
+  return t.preload = "auto", t.autoplay = s, t.crossOrigin = "anonymous", t;
+}
+function S(e, s, t) {
+  return Math.min(t, Math.max(s, e));
+}
+const H = 1e-10;
+function W(e) {
+  return Number.isInteger(e) && e > 0 && (e & e - 1) === 0;
+}
+function U(e, s) {
+  const t = new Float32Array(e);
+  if (e === 1)
+    return t[0] = 1, t;
+  for (let r = 0; r < e; r += 1)
+    s === "hann" ? t[r] = 0.5 - 0.5 * Math.cos(2 * Math.PI * r / (e - 1)) : s === "hamming" ? t[r] = 0.54 - 0.46 * Math.cos(2 * Math.PI * r / (e - 1)) : t[r] = 1;
+  return t;
+}
+function V(e) {
+  let s = 0;
+  for (const t of e)
+    s += t;
+  return s / e.length;
+}
+function $(e) {
+  return 20 * Math.log10(Math.abs(e) + H);
+}
+function j(e, s) {
+  const t = e.length;
+  if (!W(t) || s.length !== t)
+    throw new Error("FFT input length must be a radix-2 size.");
+  for (let r = 1, i = 0; r < t; r += 1) {
+    let o = t >> 1;
+    for (; i & o; o >>= 1)
+      i ^= o;
+    if (i ^= o, r < i) {
+      const a = e[r];
+      e[r] = e[i], e[i] = a;
+      const n = s[r];
+      s[r] = s[i], s[i] = n;
+    }
+  }
+  for (let r = 2; r <= t; r <<= 1) {
+    const i = -2 * Math.PI / r, o = Math.cos(i), a = Math.sin(i);
+    for (let n = 0; n < t; n += r) {
+      let h = 1, l = 0;
+      for (let u = 0; u < r / 2; u += 1) {
+        const d = e[n + u], m = s[n + u], p = e[n + u + r / 2] * h - s[n + u + r / 2] * l, g = e[n + u + r / 2] * l + s[n + u + r / 2] * h;
+        e[n + u] = d + p, s[n + u] = m + g, e[n + u + r / 2] = d - p, s[n + u + r / 2] = m - g;
+        const b = h * o - l * a;
+        l = h * a + l * o, h = b;
+      }
+    }
+  }
+}
+function Y(e, s, t) {
+  const { fftSize: r, hopSize: i, windowType: o, minDb: a, maxDb: n } = t;
+  if (!W(r))
+    throw new Error(`fftSize must be a power of two. Received ${r}.`);
+  if (!Number.isInteger(i) || i <= 0)
+    throw new Error(`hopSize must be a positive integer. Received ${i}.`);
+  if (n <= a)
+    throw new Error("maxDb must be greater than minDb.");
+  const h = r / 2 + 1, l = Math.max(1, Math.floor(Math.max(0, e.length - r) / i) + 1), u = new Float32Array(l * h), d = U(r, o), m = Math.max(H, r * V(d) / 2), p = new Float32Array(r), g = new Float32Array(r);
+  for (let b = 0; b < l; b += 1) {
+    const w = b * i;
+    p.fill(0), g.fill(0);
+    for (let f = 0; f < r; f += 1)
+      p[f] = (e[w + f] ?? 0) * d[f];
+    j(p, g);
+    for (let f = 0; f < h; f += 1) {
+      const k = Math.hypot(p[f], g[f]) / m;
+      u[b * h + f] = S($(k), a, n);
+    }
+  }
+  return { values: u, freqBins: h, timeFrames: l, sampleRate: s, fftSize: r, hopSize: i, minDb: a, maxDb: n };
+}
+function F(e, s) {
+  if (s === "mix") {
+    const t = new Float32Array(e.length);
+    for (let r = 0; r < e.numberOfChannels; r += 1) {
+      const i = e.getChannelData(r);
+      for (let o = 0; o < t.length; o += 1)
+        t[o] += i[o] / e.numberOfChannels;
+    }
+    return t;
+  }
+  if (!Number.isInteger(s) || s < 0 || s >= e.numberOfChannels)
+    throw new Error(`Invalid channel ${s}. Audio has ${e.numberOfChannels} channel(s).`);
+  return new Float32Array(e.getChannelData(s));
+}
+function K(e, s) {
+  const t = Math.max(1, Math.floor(s)), r = new Float32Array(t), i = new Float32Array(t), o = e.length / t;
+  for (let a = 0; a < t; a += 1) {
+    const n = Math.floor(a * o), h = Math.max(n + 1, Math.floor((a + 1) * o));
+    let l = 1, u = -1;
+    for (let d = n; d < h && d < e.length; d += 1) {
+      const m = e[d] ?? 0;
+      m < l && (l = m), m > u && (u = m);
+    }
+    r[a] = l === 1 ? 0 : l, i[a] = u === -1 ? 0 : u;
+  }
+  return { min: r, max: i };
+}
+function E(e, s, t) {
+  return K(F(e, t), s);
+}
+function v(e, s, t) {
+  const r = window.devicePixelRatio || 1;
+  e.style.width = "100%", e.style.height = `${t}px`, e.width = Math.max(1, Math.floor(s * r)), e.height = Math.max(1, Math.floor(t * r));
+  const i = e.getContext("2d");
+  if (!i)
+    throw new Error("Canvas 2D context is unavailable.");
+  return i.setTransform(r, 0, 0, r, 0, 0), i;
+}
+function T(e, s, t, r, i = "rgba(0, 0, 0, 0.45)") {
+  if (!Number.isFinite(t) || t <= 0) return;
+  const o = e.getContext("2d");
+  if (!o) return;
+  const a = e.clientWidth, n = e.clientHeight, h = Math.max(0, Math.min(a, s / t * a));
+  o.save(), o.strokeStyle = i, o.lineWidth = 2, o.beginPath(), o.moveTo(h, 0), o.lineTo(h, n), o.stroke(), o.strokeStyle = r, o.lineWidth = 1, o.beginPath(), o.moveTo(h, 0), o.lineTo(h, n), o.stroke(), o.restore();
+}
+function A(e, s) {
+  const t = S(s, 0, 1) * (e.length - 1), r = Math.floor(t), i = Math.min(r + 1, e.length - 1), o = t - r, a = e[r], n = e[i];
+  return [
+    Math.round(a[0] + (n[0] - a[0]) * o),
+    Math.round(a[1] + (n[1] - a[1]) * o),
+    Math.round(a[2] + (n[2] - a[2]) * o)
+  ];
+}
+function G(e, s) {
+  const t = S(s, 0, 1);
+  if (e === "audition")
+    return A(
+      [
+        [0, 0, 0],
+        [12, 7, 34],
+        [25, 37, 114],
+        [18, 104, 174],
+        [39, 178, 172],
+        [244, 180, 43],
+        [252, 76, 27],
+        [255, 238, 117]
+      ],
+      t
+    );
+  if (e === "gray") {
+    const r = Math.round(t * 255);
+    return [r, r, r];
+  }
+  return A(
+    e === "viridis" ? [
+      [68, 1, 84],
+      [59, 82, 139],
+      [33, 145, 140],
+      [94, 201, 98],
+      [253, 231, 37]
+    ] : e === "inferno" ? [
+      [0, 0, 4],
+      [87, 15, 109],
+      [187, 55, 84],
+      [249, 142, 8],
+      [252, 255, 164]
+    ] : [
+      [0, 0, 4],
+      [73, 16, 105],
+      [182, 54, 121],
+      [251, 136, 97],
+      [252, 253, 191]
+    ],
+    t
+  );
+}
+function X(e, s, t) {
+  const r = e.getContext("2d");
+  if (!r) return;
+  const i = e.clientWidth, o = e.clientHeight, a = Math.max(1, e.width), n = Math.max(1, e.height);
+  if (r.clearRect(0, 0, i, o), r.fillStyle = t.background, r.fillRect(0, 0, i, o), !s) return;
+  const h = r.createImageData(a, n), l = s.maxDb - s.minDb;
+  for (let u = 0; u < h.width; u += 1) {
+    const d = Math.min(s.timeFrames - 1, Math.floor(u / h.width * s.timeFrames));
+    for (let m = 0; m < h.height; m += 1) {
+      const p = Math.min(
+        s.freqBins - 1,
+        Math.floor((h.height - 1 - m) / h.height * s.freqBins)
+      ), g = s.values[d * s.freqBins + p], b = S((g - s.minDb) / l, 0, 1), [w, f, k] = G(t.colorMap, b), y = (m * h.width + u) * 4;
+      h.data[y] = w, h.data[y + 1] = f, h.data[y + 2] = k, h.data[y + 3] = 255;
+    }
+  }
+  r.putImageData(h, 0, 0), _(r, i, o, s.sampleRate, t.tickColor);
+}
+function J(e, s) {
+  if (!Number.isFinite(e) || e <= 0) return 1e3;
+  const t = Math.max(2, Math.min(6, Math.floor(s / 28))), r = e / t, i = 10 ** Math.floor(Math.log10(r)), o = r / i;
+  return (o <= 1 ? 1 : o <= 2 ? 2 : o <= 7.5 ? 5 : 10) * i;
+}
+function _(e, s, t, r, i = "rgba(255, 255, 255, 0.42)") {
+  const o = r / 2, a = J(o, t), n = 5;
+  e.save(), e.strokeStyle = i, e.fillStyle = i, e.lineWidth = 1, e.font = "10px system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif", e.textAlign = "left", e.textBaseline = "middle";
+  for (let h = a; h < o; h += a) {
+    const l = t - h / o * t;
+    e.beginPath(), e.moveTo(0, l + 0.5), e.lineTo(s, l + 0.5), e.stroke(), e.fillText(Q(h), n, l);
+  }
+  e.restore();
+}
+function Q(e) {
+  if (e >= 1e3) {
+    const s = e / 1e3;
+    return `${Number.isInteger(s) ? s.toFixed(0) : s.toFixed(1)}k`;
+  }
+  return `${Math.round(e)}`;
+}
+function P(e, s, t) {
+  const r = e.getContext("2d");
+  if (!r) return;
+  const i = e.clientWidth, o = e.clientHeight;
+  if (r.clearRect(0, 0, i, o), r.fillStyle = t.background, r.fillRect(0, 0, i, o), r.strokeStyle = t.centerColor ?? t.color, r.lineWidth = 1, !s) return;
+  const a = t.style ?? "waveform", n = tt(s), h = et(a), l = Math.max(1, t.barWidth ?? h.barWidth), u = Math.max(0, t.barSpacing ?? h.barSpacing);
+  a === "waveform" ? rt(r, s, o, {
+    unplayedColor: t.color,
+    playedColor: t.playedColor ?? t.progressColor ?? t.color,
+    centerColor: t.centerColor ?? t.color,
+    progress: t.progress ?? 0
+  }) : a === "lines" ? it(r, n, i, o, t.color) : a === "blocks" ? st(r, n, i, o, t.color, l, u) : a === "dots" ? at(r, n, i, o, t.color, l, u) : ot(r, n, i, o, t.color, l, u);
+}
+function Z(e, s) {
+  return Math.max(Math.abs(e.min[s] ?? 0), Math.abs(e.max[s] ?? 0));
+}
+function tt(e) {
+  const s = [];
+  for (let t = 0; t < e.max.length; t += 1)
+    s.push(Z(e, t));
+  return s;
+}
+function M(e, s) {
+  if (e.length === s) return e;
+  if (e.length === 0 || s <= 0) return [];
+  const t = [];
+  if (s > e.length) {
+    const r = (e.length - 1) / Math.max(1, s - 1);
+    for (let i = 0; i < s; i += 1) {
+      const o = i * r, a = Math.floor(o), n = Math.ceil(o), h = o - a;
+      n >= e.length ? t.push(e[e.length - 1] ?? 0) : a === n ? t.push(e[a] ?? 0) : t.push((e[a] ?? 0) * (1 - h) + (e[n] ?? 0) * h);
+    }
+  } else {
+    const r = e.length / s;
+    for (let i = 0; i < s; i += 1) {
+      const o = Math.floor(i * r), a = Math.floor((i + 1) * r);
+      let n = 0, h = 0;
+      for (let l = o; l <= a && l < e.length; l += 1)
+        n = Math.max(n, e[l] ?? 0), h += 1;
+      h === 0 && (n = e[Math.min(Math.round(i * r), e.length - 1)] ?? 0), t.push(n);
+    }
+  }
+  return t;
+}
+function et(e) {
+  return e === "bars" ? { barWidth: 3, barSpacing: 1 } : e === "blocks" ? { barWidth: 4, barSpacing: 2 } : e === "dots" ? { barWidth: 3, barSpacing: 3 } : { barWidth: 2, barSpacing: 0 };
+}
+function rt(e, s, t, r) {
+  const i = t / 2;
+  e.strokeStyle = r.centerColor, e.lineWidth = 1, e.beginPath(), e.moveTo(0, i), e.lineTo(s.max.length, i), e.stroke(), B(e, s, t, 0, s.min.length, r.unplayedColor);
+  const o = Math.max(0, Math.min(s.min.length, Math.round(s.min.length * r.progress)));
+  o > 0 && B(e, s, t, 0, o, r.playedColor);
+}
+function B(e, s, t, r, i, o) {
+  const a = t / 2;
+  e.strokeStyle = o, e.beginPath();
+  for (let n = r; n < i; n += 1) {
+    const h = a - s.min[n] * a, l = a - s.max[n] * a;
+    e.moveTo(n + 0.5, h), e.lineTo(n + 0.5, l);
+  }
+  e.stroke();
+}
+function ot(e, s, t, r, i, o, a) {
+  const n = Math.floor(t / (o + a)), h = M(s, n);
+  e.fillStyle = i;
+  for (let l = 0; l < h.length; l += 1) {
+    const u = l * (o + a);
+    if (u + o > t) break;
+    const d = h[l] * r * 0.9;
+    e.fillRect(u, r - d, o, d);
+  }
+}
+function it(e, s, t, r, i) {
+  const o = r / 2, a = M(s, Math.max(2, Math.floor(t / 3)));
+  e.strokeStyle = i, e.lineWidth = 2, e.lineCap = "round", e.lineJoin = "round", e.strokeStyle = "rgba(255, 255, 255, 0.03)", e.lineWidth = 0.5, e.beginPath(), e.moveTo(0, o), e.lineTo(t, o), e.stroke();
+  for (let h = 0; h <= 10; h += 1) {
+    const l = t / 10 * h;
+    e.beginPath(), e.moveTo(l, 0), e.lineTo(l, r), e.stroke();
+  }
+  e.strokeStyle = i, e.lineWidth = 2, e.beginPath(), e.moveTo(0, o);
+  const n = a.map((h, l) => {
+    const u = l / Math.max(1, a.length - 1) * t, d = o + Math.sin(l * 0.1) * h * r * 0.35;
+    return { x: u, y: d };
+  });
+  for (let h = 0; h < n.length - 1; h += 1) {
+    const l = n[h], u = n[h + 1], d = l.x + (u.x - l.x) * 0.5, m = u.x - (u.x - l.x) * 0.5;
+    e.bezierCurveTo(d, l.y, m, u.y, u.x, u.y);
+  }
+  e.stroke();
+}
+function st(e, s, t, r, i, o, a) {
+  const n = r / 2, h = Math.floor(t / (o + a)), l = M(s, h), u = 4, d = 2;
+  e.fillStyle = i;
+  for (let m = 0; m < l.length; m += 1) {
+    const p = m * (o + a);
+    if (p + o > t) break;
+    const g = l[m] * r * 0.9, b = Math.floor(g / (u + d));
+    for (let w = 0; w < b; w += 1) {
+      const f = w * (u + d);
+      e.fillRect(p, n - f - u, o, u), w > 0 && e.fillRect(p, n + f, o, u);
+    }
+  }
+}
+function at(e, s, t, r, i, o, a) {
+  const n = r / 2, h = Math.floor(t / (o + a)), l = M(s, h), u = Math.max(1.5, o / 2);
+  e.fillStyle = i;
+  for (let d = 0; d < l.length; d += 1) {
+    const m = d * (o + a) + o / 2;
+    if (m > t) break;
+    const p = l[d] * r * 0.9;
+    e.beginPath(), e.arc(m, n - p / 2, u, 0, Math.PI * 2), e.fill(), e.beginPath(), e.arc(m, n + p / 2, u, 0, Math.PI * 2), e.fill();
+  }
+}
+function R(e) {
+  if (!Number.isFinite(e) || e < 0)
+    return "00:00.000";
+  const s = Math.floor(e * 1e3), t = s % 1e3, r = Math.floor(s / 1e3), i = r % 60, o = Math.floor(r / 60);
+  return `${String(o).padStart(2, "0")}:${String(i).padStart(2, "0")}.${String(t).padStart(3, "0")}`;
+}
+const L = document.createElement("template");
+L.innerHTML = `
+  <style>
+    :host {
+      --ap-bg: #ffffff;
+      --ap-fg: #222222;
+      --ap-muted: #666666;
+      --ap-waveform-bg: #020604;
+      --ap-waveform: rgba(0, 214, 163, 0.34);
+      --ap-waveform-played: #00f0b5;
+      --ap-waveform-center: rgba(0, 92, 58, 0.7);
+      --ap-waveform-progress: #00f0b5;
+      --ap-cursor: #00d7ff;
+      --ap-cursor-shadow: rgba(0, 0, 0, 0.45);
+      --ap-spectrogram-tick: rgba(255, 255, 255, 0.42);
+      --ap-spectrogram-unplayed-opacity: 0.48;
+      --ap-border: #dddddd;
+      --ap-button-bg: #f7f7f7;
+      --ap-button-border: #cfcfcf;
+      display: block;
+      box-sizing: border-box;
+      color: var(--ap-fg);
+      background: var(--ap-bg);
+      font: 13px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    }
+
+    *, *::before, *::after {
+      box-sizing: border-box;
+    }
+
+    .root {
+      border: 1px solid var(--ap-border);
+      background: var(--ap-bg);
+      min-width: 180px;
+    }
+
+    .toolbar {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 8px;
+      border-bottom: 1px solid var(--ap-border);
+      min-height: 40px;
+    }
+
+    .toolbar.hidden {
+      display: none;
+    }
+
+    button {
+      appearance: none;
+      border: 1px solid var(--ap-button-border);
+      border-radius: 999px;
+      background: var(--ap-button-bg);
+      color: var(--ap-fg);
+      position: relative;
+      width: 30px;
+      min-width: 30px;
+      height: 30px;
+      padding: 0;
+      cursor: pointer;
+      font: inherit;
+      text-indent: -9999px;
+      overflow: hidden;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+      transition:
+        background 120ms ease,
+        border-color 120ms ease,
+        transform 120ms ease,
+        box-shadow 120ms ease;
+    }
+
+    button::before {
+      content: "";
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      width: 0;
+      height: 0;
+      border-top: 7px solid transparent;
+      border-bottom: 7px solid transparent;
+      border-left: 10px solid currentColor;
+      transform: translate(-38%, -50%);
+    }
+
+    button[data-state="pause"]::before,
+    button[data-state="pause"]::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      width: 4px;
+      height: 14px;
+      border: 0;
+      background: currentColor;
+      border-radius: 1px;
+      transform: translateY(-50%);
+    }
+
+    button[data-state="pause"]::before {
+      left: calc(50% - 5px);
+    }
+
+    button[data-state="pause"]::after {
+      left: calc(50% + 1px);
+    }
+
+    button:hover:not(:disabled) {
+      transform: translateY(-1px);
+      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
+    }
+
+    button:focus-visible {
+      outline: 2px solid var(--ap-cursor);
+      outline-offset: 2px;
+    }
+
+    button:disabled {
+      cursor: default;
+      opacity: 0.55;
+    }
+
+    .time {
+      font-variant-numeric: tabular-nums;
+      white-space: nowrap;
+    }
+
+    .status {
+      color: var(--ap-muted);
+      margin-left: auto;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .error {
+      color: #b00020;
+      padding: 8px;
+      border-bottom: 1px solid var(--ap-border);
+      overflow-wrap: anywhere;
+    }
+
+    .hidden {
+      display: none;
+    }
+
+    .visuals {
+      display: grid;
+      width: 100%;
+    }
+
+    .pane {
+      position: relative;
+      border-top: 1px solid var(--ap-border);
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .pane:first-child {
+      border-top: 0;
+    }
+
+    canvas {
+      display: block;
+      width: 100%;
+    }
+
+    .cursor {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+    }
+  </style>
+    <div class="root">
+    <div class="toolbar hidden">
+      <button type="button" aria-label="Play" disabled>Play</button>
+      <span class="time hidden"><span class="current">00:00.000</span> / <span class="duration">00:00.000</span></span>
+      <span class="status"></span>
+    </div>
+    <div class="error hidden" role="alert"></div>
+    <div class="visuals">
+      <div class="pane waveform-pane">
+        <canvas class="waveform"></canvas>
+        <canvas class="cursor waveform-cursor"></canvas>
+      </div>
+      <div class="pane spectrogram-pane">
+        <canvas class="spectrogram"></canvas>
+        <canvas class="cursor spectrogram-overlay"></canvas>
+        <canvas class="cursor spectrogram-cursor"></canvas>
+      </div>
+    </div>
+  </div>
+`;
+class C extends HTMLElement {
+  constructor() {
+    super();
+    c(this, "audio");
+    c(this, "audioBuffer");
+    c(this, "waveformPeaks");
+    c(this, "spectrogram");
+    c(this, "worker");
+    c(this, "resizeObserver");
+    c(this, "animationFrame", 0);
+    c(this, "loadingToken", 0);
+    c(this, "blobUrl");
+    c(this, "playRequestedAt");
+    c(this, "root");
+    c(this, "button");
+    c(this, "toolbar");
+    c(this, "timeEl");
+    c(this, "currentEl");
+    c(this, "durationEl");
+    c(this, "statusEl");
+    c(this, "errorEl");
+    c(this, "waveformPane");
+    c(this, "spectrogramPane");
+    c(this, "waveformCanvas");
+    c(this, "spectrogramCanvas");
+    c(this, "spectrogramOverlay");
+    c(this, "waveformCursor");
+    c(this, "spectrogramCursor");
+    c(this, "handlePlayButton", () => {
+      this.audio && (this.audio.paused ? (this.playRequestedAt = performance.now(), this.audio.play().catch((t) => this.handleError("Audio playback failed.", t))) : this.audio.pause());
+    });
+    c(this, "handleSeekClick", (t) => {
+      if (!this.audio || !Number.isFinite(this.duration) || this.duration <= 0) return;
+      const i = t.currentTarget.getBoundingClientRect(), o = (t.clientX - i.left) / i.width;
+      this.audio.currentTime = Math.max(0, Math.min(this.duration, o * this.duration)), this.updateTimeLabels(), this.drawCursors(), this.dispatchTypedEvent("seek"), this.audio.paused ? (this.playRequestedAt = performance.now(), this.audio.play().catch((a) => this.handleError("Audio playback failed.", a))) : this.audio.pause();
+    });
+    c(this, "handleKeydown", (t) => {
+      t.key !== " " && t.key !== "Enter" || (t.preventDefault(), this.handlePlayButton());
+    });
+    c(this, "handleTimeUpdate", () => {
+      this.updateTimeLabels(), this.dispatchTypedEvent("timeupdate");
+    });
+    c(this, "handleAudioPlay", () => {
+      this.button.textContent = "Pause", this.button.setAttribute("aria-label", "Pause"), this.button.dataset.state = "pause", this.dispatchTypedEvent("play");
+    });
+    c(this, "handleAudioPlaying", () => {
+      if (this.playRequestedAt !== void 0) {
+        const t = {
+          playToPlayingMs: performance.now() - this.playRequestedAt
+        };
+        this.dispatchEvent(new CustomEvent("playprofile", { detail: t })), this.playRequestedAt = void 0;
+      }
+      this.startAnimation();
+    });
+    c(this, "handleAudioPause", () => {
+      this.button.textContent = "Play", this.button.setAttribute("aria-label", "Play"), this.button.dataset.state = "play", this.dispatchTypedEvent("pause"), this.stopAnimation(), this.drawCursors();
+    });
+    c(this, "updateTimeLabels", () => {
+      var t;
+      this.currentEl.textContent = R(((t = this.audio) == null ? void 0 : t.currentTime) ?? 0), this.durationEl.textContent = R(this.duration);
+    });
+    this.root = this.attachShadow({ mode: "open" }), this.root.append(L.content.cloneNode(!0)), this.button = this.requireElement("button"), this.button.dataset.state = "play", this.toolbar = this.requireElement(".toolbar"), this.timeEl = this.requireElement(".time"), this.currentEl = this.requireElement(".current"), this.durationEl = this.requireElement(".duration"), this.statusEl = this.requireElement(".status"), this.errorEl = this.requireElement(".error"), this.waveformPane = this.requireElement(".waveform-pane"), this.spectrogramPane = this.requireElement(".spectrogram-pane"), this.waveformCanvas = this.requireElement(".waveform"), this.spectrogramCanvas = this.requireElement(".spectrogram"), this.spectrogramOverlay = this.requireElement(".spectrogram-overlay"), this.waveformCursor = this.requireElement(".waveform-cursor"), this.spectrogramCursor = this.requireElement(".spectrogram-cursor");
+  }
+  get src() {
+    return this.getAttribute("src") ?? "";
+  }
+  set src(t) {
+    this.setAttribute("src", t);
+  }
+  get height() {
+    return this.getNumberAttribute("height", this.waveformHeight + this.spectrogramHeight);
+  }
+  set height(t) {
+    this.setAttribute("height", String(t));
+  }
+  get waveformHeight() {
+    return this.getNumberAttribute("waveform-height", 80);
+  }
+  set waveformHeight(t) {
+    this.setAttribute("waveform-height", String(t));
+  }
+  get spectrogramHeight() {
+    return this.getNumberAttribute("spectrogram-height", 120);
+  }
+  set spectrogramHeight(t) {
+    this.setAttribute("spectrogram-height", String(t));
+  }
+  get showWaveform() {
+    return this.getBooleanAttribute("show-waveform", !0);
+  }
+  set showWaveform(t) {
+    this.setBooleanAttribute("show-waveform", t);
+  }
+  get showSpectrogram() {
+    return this.getBooleanAttribute("show-spectrogram", !0);
+  }
+  set showSpectrogram(t) {
+    this.setBooleanAttribute("show-spectrogram", t);
+  }
+  get showControls() {
+    return this.getBooleanAttribute("show-controls", !1);
+  }
+  set showControls(t) {
+    this.setBooleanAttribute("show-controls", t);
+  }
+  get showTime() {
+    return this.getBooleanAttribute("show-time", !1);
+  }
+  set showTime(t) {
+    this.setBooleanAttribute("show-time", t);
+  }
+  get waveformStyle() {
+    const t = this.getAttribute("waveform-style");
+    return t === "line" ? "lines" : t === "waveform" ? "waveform" : t === "bars" || t === "lines" || t === "blocks" || t === "dots" ? t : "waveform";
+  }
+  set waveformStyle(t) {
+    this.setAttribute("waveform-style", t);
+  }
+  get waveformBarWidth() {
+    return this.getOptionalNumberAttribute("waveform-bar-width");
+  }
+  set waveformBarWidth(t) {
+    this.setAttribute("waveform-bar-width", String(t));
+  }
+  get waveformBarSpacing() {
+    return this.getOptionalNumberAttribute("waveform-bar-spacing");
+  }
+  set waveformBarSpacing(t) {
+    this.setAttribute("waveform-bar-spacing", String(t));
+  }
+  get autoplay() {
+    return this.getBooleanAttribute("autoplay", !1);
+  }
+  set autoplay(t) {
+    this.setBooleanAttribute("autoplay", t);
+  }
+  get fftSize() {
+    return this.getNumberAttribute("fft-size", 1024);
+  }
+  set fftSize(t) {
+    this.setAttribute("fft-size", String(t));
+  }
+  get hopSize() {
+    return this.getNumberAttribute("hop-size", 256);
+  }
+  set hopSize(t) {
+    this.setAttribute("hop-size", String(t));
+  }
+  get windowType() {
+    const t = this.getAttribute("window-type");
+    return t === "hamming" || t === "rectangular" ? t : "hann";
+  }
+  set windowType(t) {
+    this.setAttribute("window-type", t);
+  }
+  get minDb() {
+    return this.getNumberAttribute("min-db", -80);
+  }
+  set minDb(t) {
+    this.setAttribute("min-db", String(t));
+  }
+  get maxDb() {
+    return this.getNumberAttribute("max-db", 0);
+  }
+  set maxDb(t) {
+    this.setAttribute("max-db", String(t));
+  }
+  get colorMap() {
+    const t = this.getAttribute("color-map");
+    return t === "gray" || t === "magma" || t === "viridis" || t === "inferno" ? t : "audition";
+  }
+  set colorMap(t) {
+    this.setAttribute("color-map", t);
+  }
+  get channel() {
+    const t = this.getAttribute("channel");
+    if (!t || t === "mix") return "mix";
+    const r = Number(t);
+    return Number.isInteger(r) ? r : "mix";
+  }
+  set channel(t) {
+    this.setAttribute("channel", String(t));
+  }
+  connectedCallback() {
+    this.button.addEventListener("click", this.handlePlayButton), this.waveformPane.addEventListener("click", this.handleSeekClick), this.spectrogramPane.addEventListener("click", this.handleSeekClick), this.addEventListener("keydown", this.handleKeydown), this.tabIndex = this.tabIndex >= 0 ? this.tabIndex : 0, this.resizeObserver = new ResizeObserver(() => this.layoutAndRender()), this.resizeObserver.observe(this), this.layoutAndRender(), this.src && this.load();
+  }
+  disconnectedCallback() {
+    var t, r, i;
+    this.button.removeEventListener("click", this.handlePlayButton), this.waveformPane.removeEventListener("click", this.handleSeekClick), this.spectrogramPane.removeEventListener("click", this.handleSeekClick), this.removeEventListener("keydown", this.handleKeydown), (t = this.resizeObserver) == null || t.disconnect(), this.stopAnimation(), (r = this.worker) == null || r.terminate(), (i = this.audio) == null || i.pause(), this.revokeBlobUrl();
+  }
+  attributeChangedCallback(t, r, i) {
+    if (!(r === i || !this.isConnected)) {
+      if (t === "src") {
+        this.load();
+        return;
+      }
+      if (["fft-size", "hop-size", "window-type", "min-db", "max-db", "channel"].includes(t)) {
+        this.audioBuffer && this.recomputeAnalysis();
+        return;
+      }
+      this.layoutAndRender();
+    }
+  }
+  async load() {
+    var i, o, a;
+    const t = this.src, r = ++this.loadingToken;
+    if (this.clearError(), this.setStatus(t ? "Loading" : ""), this.dispatchTypedEvent("loadstart"), this.button.disabled = !0, this.waveformPeaks = void 0, this.spectrogram = void 0, this.layoutAndRender(), (i = this.worker) == null || i.terminate(), (o = this.audio) == null || o.pause(), this.revokeBlobUrl(), !t) {
+      this.setStatus("");
+      return;
+    }
+    try {
+      const n = performance.now(), h = await I(t), l = performance.now();
+      if (r !== this.loadingToken) return;
+      this.blobUrl = URL.createObjectURL(new Blob([h])), this.audio = O(this.blobUrl, this.autoplay), this.bindAudio();
+      const u = this.waitForAudioReady(this.audio);
+      this.audioBuffer = await z(h);
+      const d = performance.now();
+      if (r !== this.loadingToken) return;
+      const m = Math.max(1, Math.floor(this.getCanvasWidth())), p = performance.now();
+      this.waveformPeaks = this.showWaveform ? E(this.audioBuffer, m, this.channel) : void 0;
+      const g = performance.now();
+      await u;
+      const b = performance.now();
+      if (r !== this.loadingToken) return;
+      this.button.disabled = !1, this.setStatus(this.showSpectrogram ? "Analyzing" : ""), this.updateTimeLabels(), this.dispatchTypedEvent("loaded");
+      const w = performance.now(), f = {
+        fetchMs: l - n,
+        audioReadyMs: b - l,
+        decodeMs: d - l,
+        waveformMs: g - p,
+        firstUsableMs: w - n
+      };
+      this.dispatchEvent(new CustomEvent("profile", { detail: f })), this.layoutAndRender(), this.computeSpectrogramForCurrentBuffer(r, f, n), this.autoplay && await ((a = this.audio) == null ? void 0 : a.play());
+    } catch (n) {
+      if (r !== this.loadingToken) return;
+      this.handleError("Failed to load audio.", n);
+    }
+  }
+  async recomputeAnalysis() {
+    if (!this.audioBuffer) return;
+    const t = Math.max(1, Math.floor(this.getCanvasWidth()));
+    this.waveformPeaks = this.showWaveform ? E(this.audioBuffer, t, this.channel) : void 0, this.layoutAndRender(), this.showSpectrogram ? (this.setStatus("Analyzing"), this.spectrogram = await this.computeSpectrogramInWorker(), this.setStatus("")) : this.spectrogram = void 0, this.layoutAndRender();
+  }
+  async computeSpectrogramForCurrentBuffer(t, r, i) {
+    if (!this.audioBuffer || !this.showSpectrogram) {
+      this.spectrogram = void 0, this.setStatus(""), this.layoutAndRender();
+      return;
+    }
+    try {
+      const o = performance.now();
+      this.spectrogram = await this.computeSpectrogramInWorker();
+      const a = performance.now();
+      if (t !== this.loadingToken) return;
+      this.setStatus(""), this.layoutAndRender(), this.dispatchEvent(
+        new CustomEvent("profile", {
+          detail: {
+            ...r,
+            spectrogramMs: a - o,
+            totalMs: a - i
+          }
+        })
+      );
+    } catch (o) {
+      if (t !== this.loadingToken) return;
+      this.spectrogram = void 0, this.setStatus("Spectrogram unavailable"), this.dispatchEvent(
+        new CustomEvent("error", {
+          detail: {
+            message: o instanceof Error ? o.message : "Failed to compute spectrogram.",
+            cause: o
+          }
+        })
+      );
+    }
+  }
+  computeSpectrogramInWorker() {
+    if (!this.audioBuffer) return Promise.resolve(void 0);
+    const t = F(this.audioBuffer, this.channel), r = {
+      samples: t,
+      sampleRate: this.audioBuffer.sampleRate,
+      fftSize: this.fftSize,
+      hopSize: this.hopSize,
+      windowType: this.windowType,
+      minDb: this.minDb,
+      maxDb: this.maxDb
+    };
+    return typeof Worker > "u" ? Promise.resolve(Y(t, this.audioBuffer.sampleRate, r)) : new Promise((i, o) => {
+      var a;
+      (a = this.worker) == null || a.terminate(), this.worker = new Worker(new URL(
+        /* @vite-ignore */
+        "/assets/spectrogram.worker-Burn7NUr.js",
+        import.meta.url
+      ), { type: "module" }), this.worker.addEventListener(
+        "message",
+        (n) => {
+          "error" in n.data ? o(new Error(n.data.error.message)) : i(n.data);
+        },
+        { once: !0 }
+      ), this.worker.addEventListener("error", () => o(new Error("Spectrogram worker failed.")), { once: !0 }), this.worker.postMessage(r, [r.samples.buffer]);
+    });
+  }
+  bindAudio() {
+    this.audio && (this.audio.addEventListener("loadedmetadata", this.updateTimeLabels), this.audio.addEventListener("timeupdate", this.handleTimeUpdate), this.audio.addEventListener("play", this.handleAudioPlay), this.audio.addEventListener("playing", this.handleAudioPlaying), this.audio.addEventListener("pause", this.handleAudioPause), this.audio.addEventListener("ended", this.handleAudioPause), this.audio.addEventListener("error", () => {
+      var t;
+      return this.handleError("Audio playback failed.", (t = this.audio) == null ? void 0 : t.error);
+    }));
+  }
+  layoutAndRender() {
+    const t = Math.max(1, Math.floor(this.getCanvasWidth())), { waveformHeight: r, spectrogramHeight: i } = this.getPaneHeights();
+    this.toolbar.classList.toggle("hidden", !this.showControls && !this.showTime), this.button.classList.toggle("hidden", !this.showControls), this.timeEl.classList.toggle("hidden", !this.showTime), this.waveformPane.classList.toggle("hidden", !this.showWaveform), this.spectrogramPane.classList.toggle("hidden", !this.showSpectrogram), this.showWaveform && (v(this.waveformCanvas, t, r), v(this.waveformCursor, t, r), P(this.waveformCanvas, this.waveformPeaks, {
+      color: this.cssVar("--ap-waveform", "rgba(0, 214, 163, 0.34)"),
+      playedColor: this.cssVar("--ap-waveform-played", "#00f0b5"),
+      centerColor: this.cssVar("--ap-waveform-center", "rgba(0, 92, 58, 0.7)"),
+      progressColor: this.cssVar("--ap-waveform-progress", "#00f0b5"),
+      background: this.cssVar("--ap-waveform-bg", "#020604"),
+      style: this.waveformStyle,
+      barWidth: this.waveformBarWidth,
+      barSpacing: this.waveformBarSpacing,
+      progress: this.playbackProgress
+    })), this.showSpectrogram && (v(this.spectrogramCanvas, t, i), v(this.spectrogramOverlay, t, i), v(this.spectrogramCursor, t, i), X(this.spectrogramCanvas, this.spectrogram, {
+      colorMap: this.colorMap,
+      background: this.cssVar("--ap-bg", "#ffffff"),
+      tickColor: this.cssVar("--ap-spectrogram-tick", "rgba(255, 255, 255, 0.42)")
+    }), this.drawSpectrogramOverlay()), this.drawCursors();
+  }
+  drawCursors() {
+    var a;
+    const t = ((a = this.audio) == null ? void 0 : a.currentTime) ?? 0, r = this.duration, i = this.cssVar("--ap-cursor", "#ff0000"), o = this.cssVar("--ap-cursor-shadow", "rgba(0, 0, 0, 0.45)");
+    this.showWaveform && this.waveformStyle === "waveform" && P(this.waveformCanvas, this.waveformPeaks, {
+      color: this.cssVar("--ap-waveform", "rgba(0, 214, 163, 0.34)"),
+      playedColor: this.cssVar("--ap-waveform-played", "#00f0b5"),
+      centerColor: this.cssVar("--ap-waveform-center", "rgba(0, 92, 58, 0.7)"),
+      progressColor: this.cssVar("--ap-waveform-progress", "#00f0b5"),
+      background: this.cssVar("--ap-waveform-bg", "#020604"),
+      style: this.waveformStyle,
+      barWidth: this.waveformBarWidth,
+      barSpacing: this.waveformBarSpacing,
+      progress: this.playbackProgress
+    }), this.drawSpectrogramOverlay(), this.clearCursor(this.waveformCursor), this.clearCursor(this.spectrogramCursor), this.showWaveform && T(this.waveformCursor, t, r, i, o), this.showSpectrogram && T(this.spectrogramCursor, t, r, i, o);
+  }
+  clearCursor(t) {
+    const r = t.getContext("2d");
+    r == null || r.clearRect(0, 0, t.clientWidth, t.clientHeight);
+  }
+  drawSpectrogramOverlay() {
+    const t = this.spectrogramOverlay.getContext("2d");
+    if (!t) return;
+    const r = this.spectrogramOverlay.clientWidth, i = this.spectrogramOverlay.clientHeight;
+    if (t.clearRect(0, 0, r, i), !this.showSpectrogram || !this.spectrogram) return;
+    const o = r * this.playbackProgress, a = 1 - this.cssNumberVar("--ap-spectrogram-unplayed-opacity", 0.48);
+    o < r && (t.fillStyle = `rgba(0, 0, 0, ${Math.max(0, Math.min(1, a))})`, t.fillRect(o, 0, r - o, i));
+  }
+  startAnimation() {
+    this.stopAnimation();
+    const t = () => {
+      this.updateTimeLabels(), this.drawCursors(), this.animationFrame = requestAnimationFrame(t);
+    };
+    this.animationFrame = requestAnimationFrame(t);
+  }
+  stopAnimation() {
+    this.animationFrame && (cancelAnimationFrame(this.animationFrame), this.animationFrame = 0);
+  }
+  get duration() {
+    var t, r;
+    return ((t = this.audio) == null ? void 0 : t.duration) || ((r = this.audioBuffer) == null ? void 0 : r.duration) || 0;
+  }
+  get playbackProgress() {
+    var r;
+    const t = this.duration;
+    return !Number.isFinite(t) || t <= 0 ? 0 : Math.max(0, Math.min(1, (((r = this.audio) == null ? void 0 : r.currentTime) ?? 0) / t));
+  }
+  dispatchTypedEvent(t) {
+    var i;
+    const r = {
+      currentTime: ((i = this.audio) == null ? void 0 : i.currentTime) ?? 0,
+      duration: this.duration
+    };
+    this.dispatchEvent(new CustomEvent(t, { detail: r }));
+  }
+  handleError(t, r) {
+    this.button.disabled = !0, this.setStatus("");
+    const i = {
+      message: r instanceof Error ? `${t} ${r.message}` : t,
+      cause: r
+    };
+    this.errorEl.textContent = i.message, this.errorEl.classList.remove("hidden"), this.dispatchEvent(new CustomEvent("error", { detail: i }));
+  }
+  clearError() {
+    this.errorEl.textContent = "", this.errorEl.classList.add("hidden");
+  }
+  setStatus(t) {
+    this.statusEl.textContent = t;
+  }
+  getCanvasWidth() {
+    return this.clientWidth || this.getBoundingClientRect().width || 640;
+  }
+  getPaneHeights() {
+    if (!this.showWaveform && !this.showSpectrogram)
+      return { waveformHeight: 0, spectrogramHeight: 0 };
+    const t = this.hasAttribute("height"), r = this.hasAttribute("waveform-height"), i = this.hasAttribute("spectrogram-height");
+    if (!t)
+      return {
+        waveformHeight: this.showWaveform ? this.waveformHeight : 0,
+        spectrogramHeight: this.showSpectrogram ? this.spectrogramHeight : 0
+      };
+    const o = this.height;
+    return this.showWaveform && !this.showSpectrogram ? { waveformHeight: r ? this.waveformHeight : o, spectrogramHeight: 0 } : !this.showWaveform && this.showSpectrogram ? { waveformHeight: 0, spectrogramHeight: i ? this.spectrogramHeight : o } : r && i ? { waveformHeight: this.waveformHeight, spectrogramHeight: this.spectrogramHeight } : r ? { waveformHeight: this.waveformHeight, spectrogramHeight: Math.max(1, o - this.waveformHeight) } : i ? { waveformHeight: Math.max(1, o - this.spectrogramHeight), spectrogramHeight: this.spectrogramHeight } : {
+      waveformHeight: Math.max(1, Math.round(o * (80 / 200))),
+      spectrogramHeight: Math.max(1, o - Math.round(o * (80 / 200)))
+    };
+  }
+  getNumberAttribute(t, r) {
+    const i = Number(this.getAttribute(t));
+    return Number.isFinite(i) && i > 0 ? i : r;
+  }
+  getOptionalNumberAttribute(t) {
+    if (!this.hasAttribute(t)) return;
+    const r = Number(this.getAttribute(t));
+    return Number.isFinite(r) && r > 0 ? r : void 0;
+  }
+  getBooleanAttribute(t, r) {
+    if (!this.hasAttribute(t)) return r;
+    const i = this.getAttribute(t);
+    return i === "" || i === "true" || i === t;
+  }
+  setBooleanAttribute(t, r) {
+    r ? this.setAttribute(t, "") : this.setAttribute(t, "false");
+  }
+  cssVar(t, r) {
+    return getComputedStyle(this).getPropertyValue(t).trim() || r;
+  }
+  cssNumberVar(t, r) {
+    const i = Number(getComputedStyle(this).getPropertyValue(t).trim());
+    return Number.isFinite(i) ? i : r;
+  }
+  requireElement(t) {
+    const r = this.root.querySelector(t);
+    if (!r) throw new Error(`Missing template element: ${t}`);
+    return r;
+  }
+  waitForAudioReady(t) {
+    return t.readyState >= HTMLMediaElement.HAVE_METADATA ? Promise.resolve() : new Promise((r, i) => {
+      const o = () => {
+        t.removeEventListener("loadedmetadata", a), t.removeEventListener("error", n);
+      }, a = () => {
+        o(), r();
+      }, n = () => {
+        o(), i(t.error ?? new Error("Audio metadata failed to load."));
+      };
+      t.addEventListener("loadedmetadata", a, { once: !0 }), t.addEventListener("error", n, { once: !0 }), t.load();
+    });
+  }
+  revokeBlobUrl() {
+    this.blobUrl && (URL.revokeObjectURL(this.blobUrl), this.blobUrl = void 0);
+  }
+}
+c(C, "observedAttributes", [
+  "src",
+  "height",
+  "waveform-height",
+  "spectrogram-height",
+  "show-waveform",
+  "show-spectrogram",
+  "show-controls",
+  "show-time",
+  "waveform-style",
+  "waveform-bar-width",
+  "waveform-bar-spacing",
+  "autoplay",
+  "fft-size",
+  "hop-size",
+  "window-type",
+  "min-db",
+  "max-db",
+  "color-map",
+  "channel"
+]);
+class nt extends C {
+}
+customElements.get("wavegram-player") || customElements.define("wavegram-player", C);
+customElements.get("audio-preview-spectrogram") || customElements.define("audio-preview-spectrogram", nt);
+export {
+  nt as AudioPreviewSpectrogram,
+  C as Wavegram
+};