@arraypress/waveform-player 1.11.0 → 1.12.0

package/index.d.ts

@@ -149,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.11.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

@@ -55,9 +55,13 @@
    `buttonStyle: 'minimal'` / data-button-style="minimal". Ideal for sample-pack
    and beat-store preview grids. */
 .waveform-btn-minimal {
-    width: auto;
-    height: auto;
-    min-width: 0;
+    /* 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;

package/src/js/core.js

@@ -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

@@ -209,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,

package/src/js/utils.js

@@ -164,6 +164,7 @@ export function parseDataAttributes(element) {
     setBool('showTime');
     setBool('showHoverTime');
     setBool('showBPM', 'showBpm');
+    setNum('bpm');
     setBool('singlePlay');
     setBool('playOnSeek');