@arraypress/waveform-player 1.10.0 → 1.12.0

package/index.d.ts

@@ -133,6 +133,12 @@ export interface WaveformPlayerOptions {
 	 * @default 'default'
 	 */
 	layout?: 'default' | 'preview';
+	/**
+	 * Play/pause button style. `'minimal'` renders a bare glyph with no circle —
+	 * the look sample-pack and beat stores use in preview grids.
+	 * @default 'circle'
+	 */
+	buttonStyle?: 'circle' | 'minimal';
 	/** Show transport controls. @default true */
 	showControls?: boolean;
 	/** Show the info (title/subtitle) block. @default true */
@@ -143,6 +149,8 @@ export interface WaveformPlayerOptions {
 	showHoverTime?: boolean;
 	/** Show detected BPM. @default false */
 	showBPM?: boolean;
+	/** Known BPM shown in the badge (with `showBPM`); wins over auto-detection. */
+	bpm?: number;
 
 	// ── Behaviour ─────────────────────────────────────────────────
 	/** Begin playback on load. @default false */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arraypress/waveform-player",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "description": "Lightweight, customizable audio player with waveform visualization",
   "type": "module",
   "types": "./index.d.ts",

package/src/css/waveform-player.css

@@ -51,6 +51,32 @@
     transform: scale(1.05);
 }
 
+/* Minimal button style — a bare play/pause glyph with no circle. Set via
+   `buttonStyle: 'minimal'` / data-button-style="minimal". Ideal for sample-pack
+   and beat-store preview grids. */
+.waveform-btn-minimal {
+    /* A FIXED box is essential: toggling the play glyph (which is optically
+       nudged 1px) for the pause glyph would otherwise change the button's
+       auto width, shifting the adjacent waveform — and re-sampling its bars —
+       on every play/pause. Fixed width keeps the canvas (and bars) stable. */
+    width: 1.625rem;
+    height: 1.625rem;
+    min-width: 1.625rem;
+    border: none;
+    border-radius: 0;
+    opacity: 0.7;
+}
+
+.waveform-btn-minimal:hover:not(:disabled) {
+    opacity: 1;
+    transform: none;
+}
+
+.waveform-btn-minimal svg {
+    width: 22px;
+    height: 22px;
+}
+
 .waveform-btn:disabled {
     cursor: not-allowed;
     opacity: 0.3;

package/src/js/core.js

@@ -233,7 +233,7 @@ export class WaveformPlayer {
 
         // Build play button HTML (conditional)
         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};
         ">
@@ -326,6 +326,9 @@ export class WaveformPlayer {
 
         // Set canvas size
         this.resizeCanvas();
+
+        // Show a caller-supplied BPM immediately (no audio decode required).
+        this.updateBPMDisplay();
     }
 
     /**
@@ -1375,8 +1378,12 @@ export class WaveformPlayer {
      * @private
      */
     updateBPMDisplay() {
-        if (this.bpmEl && this.bpmValueEl && this.detectedBPM) {
-            this.bpmValueEl.textContent = Math.round(this.detectedBPM);
+        // A caller-supplied `bpm` wins over auto-detection — useful when peaks
+        // are pre-generated (so the audio is never decoded) but the BPM is known
+        // anyway, e.g. sample-pack previews where the tempo is in the metadata.
+        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';
         }
     }

package/src/js/themes.js

@@ -151,8 +151,11 @@ export function getColorPreset(presetName) {
 export const 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
@@ -174,13 +177,17 @@ export const 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,
@@ -202,6 +209,9 @@ export const 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,
@@ -250,7 +260,7 @@ export const DEFAULT_OPTIONS = {
  */
 export const 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},

package/src/js/utils.js

@@ -138,6 +138,7 @@ export 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;
 
     // Color preset
     if (element.dataset.colorPreset) options.colorPreset = element.dataset.colorPreset;
@@ -163,6 +164,7 @@ export function parseDataAttributes(element) {
     setBool('showTime');
     setBool('showHoverTime');
     setBool('showBPM', 'showBpm');
+    setNum('bpm');
     setBool('singlePlay');
     setBool('playOnSeek');