@arraypress/waveform-player 1.10.0 → 1.12.0

package/dist/waveform-player.cjs

@@ -86,6 +86,7 @@ function parseDataAttributes(element) {
   setNum("barRadius");
   if (element.dataset.buttonAlign) options.buttonAlign = element.dataset.buttonAlign;
   if (element.dataset.layout) options.layout = element.dataset.layout;
+  if (element.dataset.buttonStyle) options.buttonStyle = element.dataset.buttonStyle;
   if (element.dataset.colorPreset) options.colorPreset = element.dataset.colorPreset;
   if (element.dataset.waveformColor) options.waveformColor = parseColorValue(element.dataset.waveformColor);
   if (element.dataset.progressColor) options.progressColor = parseColorValue(element.dataset.progressColor);
@@ -103,6 +104,7 @@ function parseDataAttributes(element) {
   setBool("showTime");
   setBool("showHoverTime");
   setBool("showBPM", "showBpm");
+  setNum("bpm");
   setBool("singlePlay");
   setBool("playOnSeek");
   if (element.dataset.title) options.title = element.dataset.title;
@@ -682,8 +684,11 @@ function getColorPreset(presetName) {
 var DEFAULT_OPTIONS = {
   // Core settings
   url: "",
-  height: 60,
-  samples: 200,
+  height: 64,
+  // Source peak resolution. The drawer resamples these to fit
+  // canvasWidth / (barWidth + barSpacing) bars, so this is fidelity headroom,
+  // not the visible bar count.
+  samples: 256,
   preload: "metadata",
   // Audio mode — 'self' = player owns the <audio> element (default, current
   // behavior). 'external' = player is a visualization-only surface; no audio
@@ -702,12 +707,16 @@ var DEFAULT_OPTIONS = {
   // waveform and the meta row (time / speed / BPM) is trimmed — ideal for
   // sample-pack sample previews and dense grids.
   layout: "default",
+  // Play/pause button style. 'circle' = bordered circle (default).
+  // 'minimal' = a bare play/pause glyph with no circle — the look sample-pack
+  // and beat stores use in their preview grids.
+  buttonStyle: "circle",
   // Default waveform style
   waveformStyle: "mirror",
   barWidth: 2,
   barSpacing: 0,
-  // Rounded bar caps (px). 0 = square (default). Applies to bars/mirror.
-  barRadius: 0,
+  // Rounded bar caps (px). 0 = square; 1 = soft caps (default). Applies to bars/mirror.
+  barRadius: 1,
   // Color preset: null = auto-detect, 'dark' = force dark, 'light' = force light
   colorPreset: null,
   // Individual color overrides (null means use preset)
@@ -726,6 +735,9 @@ var DEFAULT_OPTIONS = {
   showTime: true,
   showHoverTime: false,
   showBPM: false,
+  // Known BPM to display in the badge (with showBPM). Wins over auto-detection
+  // — set it when peaks are pre-generated so the tempo still shows. null = auto.
+  bpm: null,
   singlePlay: true,
   playOnSeek: true,
   enableMediaSession: true,
@@ -758,7 +770,7 @@ var DEFAULT_OPTIONS = {
 };
 var STYLE_DEFAULTS = {
   bars: { barWidth: 3, barSpacing: 1 },
-  mirror: { barWidth: 2, barSpacing: 0 },
+  mirror: { barWidth: 2, barSpacing: 2 },
   line: { barWidth: 2, barSpacing: 0 },
   blocks: { barWidth: 4, barSpacing: 2 },
   dots: { barWidth: 3, barSpacing: 3 },
@@ -925,7 +937,7 @@ var WaveformPlayer = class _WaveformPlayer {
       this.container.classList.add("waveform-layout-preview");
     }
     const buttonHTML = this.options.showControls ? `
-        <button class="waveform-btn" aria-label="Play/Pause" style="
+        <button class="waveform-btn${this.options.buttonStyle === "minimal" ? " waveform-btn-minimal" : ""}" aria-label="Play/Pause" style="
             border-color: ${this.options.buttonColor};
             color: ${this.options.buttonColor};
         ">
@@ -1010,6 +1022,7 @@ var WaveformPlayer = class _WaveformPlayer {
     this.speedBtn = this.container.querySelector(".speed-btn");
     this.speedMenu = this.container.querySelector(".speed-menu");
     this.resizeCanvas();
+    this.updateBPMDisplay();
   }
   /**
    * Create audio element
@@ -1815,8 +1828,9 @@ var WaveformPlayer = class _WaveformPlayer {
    * @private
    */
   updateBPMDisplay() {
-    if (this.bpmEl && this.bpmValueEl && this.detectedBPM) {
-      this.bpmValueEl.textContent = Math.round(this.detectedBPM);
+    const bpm = this.options.bpm || this.detectedBPM;
+    if (this.bpmEl && this.bpmValueEl && bpm) {
+      this.bpmValueEl.textContent = Math.round(bpm);
       this.bpmEl.style.display = "inline-flex";
     }
   }