diff --git a/README.md b/README.md
index 79a39cc..9c69c8f 100644
--- a/README.md
+++ b/README.md
@@ -27,7 +27,7 @@ Load from a CDN and it auto-initializes every `[data-waveform-player]` on the pa
+
```
Or drive it from JavaScript:
@@ -35,7 +35,7 @@ Or drive it from JavaScript:
```js
import WaveformPlayer from '@arraypress/waveform-player';
-new WaveformPlayer('#player', { url: 'track.mp3', title: 'My Song', artist: 'The Artist' });
+new WaveformPlayer('#player', { url: 'track.mp3', title: 'My Song', artist: 'The Artist', album: 'The Album', showAlbum: true });
```
### Initializing only what you control
diff --git a/dist/waveform-player.cjs b/dist/waveform-player.cjs
index e71aa25..5ecac33 100644
--- a/dist/waveform-player.cjs
+++ b/dist/waveform-player.cjs
@@ -153,6 +153,7 @@ function parseDataAttributes(element) {
setBool("autoplay");
setBool("showControls");
setBool("showInfo");
+ setBool("showAlbum");
setBool("showTime");
setBool("showHoverTime");
setBool("seekHandle");
@@ -834,6 +835,7 @@ var DEFAULT_OPTIONS = {
autoplay: false,
showControls: true,
showInfo: true,
+ showAlbum: false,
showTime: true,
showHoverTime: false,
// Show a draggable circle handle + hover brightness-lift on the SEEKBAR
@@ -946,6 +948,7 @@ var BOOLEANS = [
"autoplay",
"showControls",
"showInfo",
+ "showAlbum",
"showTime",
"showHoverTime",
"seekHandle",
@@ -1186,7 +1189,7 @@ var WaveformPlayer = class _WaveformPlayer {
*
* Clears the container, resolves button alignment (`auto` → `bottom` for
* the `bars` style, `center` otherwise), and conditionally renders the play
- * button, info row (artwork/title/artist), BPM badge, playback-speed
+ * button, info row (artwork/title/artist/album), BPM badge, playback-speed
* menu, and time display based on the relevant `show*` options. Caches the
* canvas, controls, and text elements onto `this`, then sizes the canvas.
* @private
@@ -1239,6 +1242,7 @@ var WaveformPlayer = class _WaveformPlayer {
${escapeHtml(this.options.artist)} ` : ""}
+ ${this.options.showAlbum && this.options.album ? `${escapeHtml(this.options.album)} ` : ""}
${this.options.showBPM ? `
@@ -1291,6 +1295,7 @@ var WaveformPlayer = class _WaveformPlayer {
this.ctx = this.canvas.getContext("2d");
this.titleEl = this.container.querySelector(".waveform-title");
this.artistEl = this.container.querySelector(".waveform-artist");
+ this.albumEl = this.container.querySelector(".waveform-album");
this.artworkEl = this.container.querySelector(".waveform-artwork, .waveform-btn-artwork");
this.bindArtworkFallback(this.artworkEl);
this.currentTimeEl = this.container.querySelector(".time-current");
@@ -1363,6 +1368,17 @@ var WaveformPlayer = class _WaveformPlayer {
span.className = "waveform-artist";
return span;
}
+ /**
+ * Create an album text element matching the initial player markup.
+ *
+ * @returns {HTMLSpanElement} Album text element.
+ * @private
+ */
+ createAlbumElement() {
+ const span = document.createElement("span");
+ span.className = "waveform-album";
+ return span;
+ }
/**
* Reconcile artist metadata and markup for the current track.
*
@@ -1386,6 +1402,33 @@ var WaveformPlayer = class _WaveformPlayer {
this.artistEl.textContent = artist;
this.artistEl.style.display = "";
}
+ /**
+ * Reconcile album metadata and markup for the current track.
+ *
+ * @param {string|null} album - Album text, or a falsy value to remove it.
+ * @private
+ */
+ syncAlbum(album) {
+ this.options.album = album || "";
+ if (!this.options.showInfo || !this.options.showAlbum) {
+ this.albumEl?.remove();
+ this.albumEl = null;
+ return;
+ }
+ if (!album) {
+ this.albumEl?.remove();
+ this.albumEl = null;
+ return;
+ }
+ if (!this.albumEl) {
+ const anchorEl = this.artistEl || this.container.querySelector(".waveform-title");
+ if (!anchorEl) return;
+ this.albumEl = this.createAlbumElement();
+ anchorEl.after(this.albumEl);
+ }
+ this.albumEl.textContent = album;
+ this.albumEl.style.display = "";
+ }
/**
* Reconcile the play button's artwork image (`artworkPosition: 'button'`).
*
@@ -1997,7 +2040,7 @@ var WaveformPlayer = class _WaveformPlayer {
*
* Pauses any current playback, fully resets the audio element (self mode),
* clears error/marker/progress state, merges the new metadata into
- * `this.options`, updates the artist/artwork DOM, then calls
+ * `this.options`, updates the artist/album/artwork DOM, then calls
* {@link WaveformPlayer#load}. Auto-plays the new track unless
* `options.autoplay === false`.
* @param {string} url - Audio URL.
@@ -2012,6 +2055,8 @@ var WaveformPlayer = class _WaveformPlayer {
async loadTrack(url, title = null, artist = null, options = {}) {
const hasArtworkOption = Object.prototype.hasOwnProperty.call(options, "artwork");
const hasArtworkAltOption = Object.prototype.hasOwnProperty.call(options, "artworkAlt");
+ const hasAlbumOption = Object.prototype.hasOwnProperty.call(options, "album");
+ const hasShowAlbumOption = Object.prototype.hasOwnProperty.call(options, "showAlbum");
if (this.isPlaying) {
this.pause();
}
@@ -2054,6 +2099,9 @@ var WaveformPlayer = class _WaveformPlayer {
if (artist !== null) {
this.syncArtist(artist);
}
+ if (hasAlbumOption || hasShowAlbumOption) {
+ this.syncAlbum(this.options.album);
+ }
if (hasArtworkOption || hasArtworkAltOption) {
this.syncArtwork(
hasArtworkOption ? options.artwork : this.options.artwork,
@@ -2717,13 +2765,14 @@ var WaveformPlayer = class _WaveformPlayer {
* directly: `WaveformBar.play(event.detail)`.
*
* @private
- * @return {{url:string,title:?string,artist:?string,artwork:?string,player:WaveformPlayer}}
+ * @return {{url:string,title:?string,artist:?string,album:string,artwork:?string,player:WaveformPlayer}}
*/
_buildTrackDetail() {
return {
url: this.options.url,
title: this.options.title,
artist: this.options.artist,
+ album: this.options.album,
artwork: this.options.artwork,
markers: this.options.markers,
waveform: this.options.waveform,
diff --git a/dist/waveform-player.css b/dist/waveform-player.css
index 1481620..b861ed9 100644
--- a/dist/waveform-player.css
+++ b/dist/waveform-player.css
@@ -1 +1 @@
-.waveform-player{font-family:inherit;color:inherit;line-height:var(--waveform-line-height, 1.4);--wfp-accent: #71717a;--wfp-button-color: rgba(255, 255, 255, .9);--wfp-text-color: #ffffff;--wfp-text-secondary-color: rgba(255, 255, 255, .6);--wfp-btn-artwork-color: rgba(255, 255, 255, .9);--wfp-btn-artwork-scrim: rgba(0, 0, 0, .5)}.waveform-player.waveform-theme-light{--wfp-button-color: rgba(0, 0, 0, .8);--wfp-text-color: #333333;--wfp-text-secondary-color: rgba(0, 0, 0, .6)}.waveform-player *{box-sizing:border-box}.waveform-body{display:flex;flex-direction:column;gap:var(--waveform-body-gap, 8px)}.waveform-track{display:flex;align-items:center;gap:var(--waveform-track-gap, 12px);position:relative}.waveform-btn{width:var(--wfp-btn-size, 36px);height:var(--wfp-btn-size, 36px);min-width:var(--wfp-btn-size, 36px);border-radius:var(--wfp-btn-radius, 50%);border:2px solid currentColor;background:transparent;color:var(--wfp-button-color, inherit);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;opacity:.9;flex-shrink:0}.waveform-btn:hover:not(:disabled){opacity:1;transform:scale(1.05)}.waveform-btn-minimal{width:calc(var(--wfp-btn-size, 36px) * 1.1);height:calc(var(--wfp-btn-size, 36px) * 1.1);min-width:calc(var(--wfp-btn-size, 36px) * 1.1);border:none;border-radius:0;opacity:.7}.waveform-btn-minimal:hover:not(:disabled){opacity:1;transform:none}.waveform-btn.waveform-btn-minimal svg{width:calc(var(--wfp-btn-size, 36px) * .94);height:calc(var(--wfp-btn-size, 36px) * .94)}.waveform-btn:disabled{cursor:not-allowed;opacity:.3}.waveform-btn>*{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.waveform-btn svg{width:calc(var(--wfp-btn-size, 36px) * .45);height:calc(var(--wfp-btn-size, 36px) * .45);fill:currentColor;display:block}.waveform-btn-has-artwork{--wfp-btn-size: 64px;--wfp-btn-radius: 8px;position:relative;overflow:hidden;border:none;color:var(--wfp-btn-artwork-color)}.waveform-btn>.waveform-btn-artwork{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:0}.waveform-btn-has-artwork:after{content:"";position:absolute;inset:0;background:var(--wfp-btn-artwork-scrim);pointer-events:none;z-index:1}.waveform-btn-has-artwork>:not(.waveform-btn-artwork){position:relative;z-index:2}.waveform-icon-play svg{margin-left:1px}.waveform-container{flex:1;position:relative;min-height:60px;cursor:pointer;min-width:0;width:100%}.waveform-container:focus-visible{outline:2px solid currentColor}.waveform-container canvas{display:block;width:100%;height:100%;max-width:100%;transition:opacity .3s ease;position:relative;z-index:1}.waveform-info{display:flex;align-items:center;gap:8px;font-size:13px;min-height:20px}.waveform-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.waveform-title{color:var(--wfp-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}.waveform-artist{color:var(--wfp-text-secondary-color);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.waveform-time{color:var(--wfp-text-secondary-color);font-size:11px;white-space:nowrap;flex-shrink:0}.waveform-bpm{color:var(--wfp-text-secondary-color);font-size:11px;white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:4px}.waveform-loading{position:absolute;inset:0;background:#0000001a;z-index:10}.waveform-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0003;z-index:10}.waveform-error-text{font-size:12px;opacity:.7;text-align:center;padding:0 20px}.waveform-markers{position:absolute;inset:0;pointer-events:none;z-index:5}.waveform-marker{position:absolute;top:0;width:2px;height:100%;background:#ffffff80;border:none;padding:0;cursor:pointer;pointer-events:all;transition:all .2s}.waveform-marker:hover{width:4px;z-index:20}.waveform-marker.active{width:4px;background:currentColor;z-index:10}.waveform-marker-tooltip{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%);background:#000000e6;color:#fff;padding:4px 8px;border-radius:4px;font-size:11px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s;z-index:1000}.waveform-marker:hover .waveform-marker-tooltip,.waveform-marker.show-label .waveform-marker-tooltip{opacity:1}.waveform-hover-time{position:absolute;bottom:calc(100% + 4px);transform:translate(-50%);background:#000000e6;color:#fff;padding:3px 7px;border-radius:4px;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:1000}.waveform-seek-handle{position:absolute;top:50%;left:0;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #00000059;transform:translate(-50%,-50%) scale(0);opacity:0;transition:opacity .12s ease,transform .12s ease;pointer-events:none;z-index:6}.waveform-seek-handle.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.waveform-seek-handle.is-active{transform:translate(-50%,-50%) scale(1.25)}.waveform-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px}.waveform-marker:focus-visible{outline:2px solid currentColor;outline-offset:1px;width:4px}.waveform-speed{position:relative;flex-shrink:0}.speed-btn{background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:4px 8px;color:inherit;font-size:11px;cursor:pointer;transition:all .2s;min-width:40px}.speed-btn:hover{background:#ffffff0d;border-color:#ffffff4d}.speed-value{font-weight:600}.speed-menu{position:absolute;bottom:100%;right:0;margin-bottom:4px;background:#000000f2;border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:4px;z-index:100;min-width:60px}.speed-option{display:block;width:100%;background:transparent;border:none;color:#ffffffb3;padding:6px 12px;font-size:12px;cursor:pointer;transition:all .2s;text-align:left;border-radius:4px}.speed-option:hover{background:#ffffff1a;color:#fff}.speed-option.active{background:#ffffff29;color:#fff;font-weight:600}.waveform-player.waveform-focused{outline:2px solid var(--wfp-accent);outline-offset:2px;border-radius:4px}.waveform-player:focus{outline:none}.waveform-player:focus-visible{outline:1px solid var(--wfp-accent);outline-offset:1px}.waveform-layout-preview .waveform-meta{display:none!important}.waveform-layout-preview .waveform-info{justify-content:center}.waveform-layout-preview .waveform-text{flex:0 1 auto;align-items:center;text-align:center}.waveform-player.waveform-focused{outline:none}.waveform-track.waveform-align-top{align-items:flex-start}.waveform-track.waveform-align-top .waveform-btn{margin-top:5px}.waveform-track.waveform-align-center{align-items:center}.waveform-track.waveform-align-bottom{align-items:flex-end}.waveform-track.waveform-align-bottom .waveform-btn{margin-bottom:5px}@media(max-width:480px){.waveform-btn{width:var(--wfp-btn-size, 32px);height:var(--wfp-btn-size, 32px);min-width:var(--wfp-btn-size, 32px)}.waveform-container{min-height:50px}.waveform-info{font-size:12px}.waveform-artist,.waveform-time,.waveform-bpm{font-size:10px}}@media(prefers-reduced-motion:reduce){.waveform-player *,.waveform-player *:before,.waveform-player *:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
+.waveform-player{font-family:inherit;color:inherit;line-height:var(--waveform-line-height, 1.4);--wfp-accent: #71717a;--wfp-button-color: rgba(255, 255, 255, .9);--wfp-text-color: #ffffff;--wfp-text-secondary-color: rgba(255, 255, 255, .6);--wfp-btn-artwork-color: rgba(255, 255, 255, .9);--wfp-btn-artwork-scrim: rgba(0, 0, 0, .5)}.waveform-player.waveform-theme-light{--wfp-button-color: rgba(0, 0, 0, .8);--wfp-text-color: #333333;--wfp-text-secondary-color: rgba(0, 0, 0, .6)}.waveform-player *{box-sizing:border-box}.waveform-body{display:flex;flex-direction:column;gap:var(--waveform-body-gap, 8px)}.waveform-track{display:flex;align-items:center;gap:var(--waveform-track-gap, 12px);position:relative}.waveform-btn{width:var(--wfp-btn-size, 36px);height:var(--wfp-btn-size, 36px);min-width:var(--wfp-btn-size, 36px);border-radius:var(--wfp-btn-radius, 50%);border:2px solid currentColor;background:transparent;color:var(--wfp-button-color, inherit);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;opacity:.9;flex-shrink:0}.waveform-btn:hover:not(:disabled){opacity:1;transform:scale(1.05)}.waveform-btn-minimal{width:calc(var(--wfp-btn-size, 36px) * 1.1);height:calc(var(--wfp-btn-size, 36px) * 1.1);min-width:calc(var(--wfp-btn-size, 36px) * 1.1);border:none;border-radius:0;opacity:.7}.waveform-btn-minimal:hover:not(:disabled){opacity:1;transform:none}.waveform-btn.waveform-btn-minimal svg{width:calc(var(--wfp-btn-size, 36px) * .94);height:calc(var(--wfp-btn-size, 36px) * .94)}.waveform-btn:disabled{cursor:not-allowed;opacity:.3}.waveform-btn>*{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.waveform-btn svg{width:calc(var(--wfp-btn-size, 36px) * .45);height:calc(var(--wfp-btn-size, 36px) * .45);fill:currentColor;display:block}.waveform-btn-has-artwork{--wfp-btn-size: 64px;--wfp-btn-radius: 8px;position:relative;overflow:hidden;border:none;color:var(--wfp-btn-artwork-color)}.waveform-btn>.waveform-btn-artwork{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:0}.waveform-btn-has-artwork:after{content:"";position:absolute;inset:0;background:var(--wfp-btn-artwork-scrim);pointer-events:none;z-index:1}.waveform-btn-has-artwork>:not(.waveform-btn-artwork){position:relative;z-index:2}.waveform-icon-play svg{margin-left:1px}.waveform-container{flex:1;position:relative;min-height:60px;cursor:pointer;min-width:0;width:100%}.waveform-container:focus-visible{outline:2px solid currentColor}.waveform-container canvas{display:block;width:100%;height:100%;max-width:100%;transition:opacity .3s ease;position:relative;z-index:1}.waveform-info{display:flex;align-items:center;gap:8px;font-size:13px;min-height:20px}.waveform-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.waveform-title{color:var(--wfp-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}.waveform-artist,.waveform-album{color:var(--wfp-text-secondary-color);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.waveform-time{color:var(--wfp-text-secondary-color);font-size:11px;white-space:nowrap;flex-shrink:0}.waveform-bpm{color:var(--wfp-text-secondary-color);font-size:11px;white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:4px}.waveform-loading{position:absolute;inset:0;background:#0000001a;z-index:10}.waveform-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0003;z-index:10}.waveform-error-text{font-size:12px;opacity:.7;text-align:center;padding:0 20px}.waveform-markers{position:absolute;inset:0;pointer-events:none;z-index:5}.waveform-marker{position:absolute;top:0;width:2px;height:100%;background:#ffffff80;border:none;padding:0;cursor:pointer;pointer-events:all;transition:all .2s}.waveform-marker:hover{width:4px;z-index:20}.waveform-marker.active{width:4px;background:currentColor;z-index:10}.waveform-marker-tooltip{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%);background:#000000e6;color:#fff;padding:4px 8px;border-radius:4px;font-size:11px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s;z-index:1000}.waveform-marker:hover .waveform-marker-tooltip,.waveform-marker.show-label .waveform-marker-tooltip{opacity:1}.waveform-hover-time{position:absolute;bottom:calc(100% + 4px);transform:translate(-50%);background:#000000e6;color:#fff;padding:3px 7px;border-radius:4px;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:1000}.waveform-seek-handle{position:absolute;top:50%;left:0;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #00000059;transform:translate(-50%,-50%) scale(0);opacity:0;transition:opacity .12s ease,transform .12s ease;pointer-events:none;z-index:6}.waveform-seek-handle.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.waveform-seek-handle.is-active{transform:translate(-50%,-50%) scale(1.25)}.waveform-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px}.waveform-marker:focus-visible{outline:2px solid currentColor;outline-offset:1px;width:4px}.waveform-speed{position:relative;flex-shrink:0}.speed-btn{background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:4px 8px;color:inherit;font-size:11px;cursor:pointer;transition:all .2s;min-width:40px}.speed-btn:hover{background:#ffffff0d;border-color:#ffffff4d}.speed-value{font-weight:600}.speed-menu{position:absolute;bottom:100%;right:0;margin-bottom:4px;background:#000000f2;border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:4px;z-index:100;min-width:60px}.speed-option{display:block;width:100%;background:transparent;border:none;color:#ffffffb3;padding:6px 12px;font-size:12px;cursor:pointer;transition:all .2s;text-align:left;border-radius:4px}.speed-option:hover{background:#ffffff1a;color:#fff}.speed-option.active{background:#ffffff29;color:#fff;font-weight:600}.waveform-player.waveform-focused{outline:2px solid var(--wfp-accent);outline-offset:2px;border-radius:4px}.waveform-player:focus{outline:none}.waveform-player:focus-visible{outline:1px solid var(--wfp-accent);outline-offset:1px}.waveform-layout-preview .waveform-meta{display:none!important}.waveform-layout-preview .waveform-info{justify-content:center}.waveform-layout-preview .waveform-text{flex:0 1 auto;align-items:center;text-align:center}.waveform-player.waveform-focused{outline:none}.waveform-track.waveform-align-top{align-items:flex-start}.waveform-track.waveform-align-top .waveform-btn{margin-top:5px}.waveform-track.waveform-align-center{align-items:center}.waveform-track.waveform-align-bottom{align-items:flex-end}.waveform-track.waveform-align-bottom .waveform-btn{margin-bottom:5px}@media(max-width:480px){.waveform-btn{width:var(--wfp-btn-size, 32px);height:var(--wfp-btn-size, 32px);min-width:var(--wfp-btn-size, 32px)}.waveform-container{min-height:50px}.waveform-info{font-size:12px}.waveform-artist,.waveform-album,.waveform-time,.waveform-bpm{font-size:10px}}@media(prefers-reduced-motion:reduce){.waveform-player *,.waveform-player *:before,.waveform-player *:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
diff --git a/dist/waveform-player.esm.js b/dist/waveform-player.esm.js
index c0387ed..6c30c9e 100644
--- a/dist/waveform-player.esm.js
+++ b/dist/waveform-player.esm.js
@@ -1,4 +1,4 @@
-function $(e){let t=-1/0;for(let i=0;i
t&&(t=e[i]);return t}function S(e){return String(e??"").replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'")}function q(e){return S(typeof e=="number"?`${e}px`:e)}function st(e){if(typeof e!="string"||e==="")return!1;try{let t=new URL(e,"http://localhost/");return t.protocol==="http:"||t.protocol==="https:"}catch{return!1}}function m(e,t=0,i=1){return Math.max(t,Math.min(e,i))}function _(e,t=null,i={}){let{min:s=-1/0,max:r=1/0,integer:a=!1}=i,o=typeof e=="number"?e:typeof e=="string"&&e.trim()!==""?Number(e):NaN;if(!Number.isFinite(o))return t;let n=m(o,s,r);return a?Math.round(n):n}function H(e,t=null){if(Array.isArray(e))return e;if(typeof e=="string"&&e.trim().startsWith("["))try{let i=JSON.parse(e);if(Array.isArray(i))return i}catch{}return t}function D(e,t={}){let{min:i=-1/0,max:s=1/0,fallback:r=null}=t,a=H(e);if(!a&&typeof e=="string"&&e.trim()!==""&&(a=e.split(/[,\s]+/)),!a)return r;let o=a.map(n=>_(n)).filter(n=>n!==null&&n>=i&&n<=s);return o.length?o:r}function rt(e,t,i=null){return t.includes(e)?e:i}function at(e){if(typeof e=="string"){let t=e.trim().toLowerCase();return t!==""&&t!=="false"&&t!=="0"}return!!e}function vt(e){return e===void 0?void 0:e==="true"}function it(e){if(typeof e=="string"&&e.trim().startsWith("["))try{return JSON.parse(e)}catch{}return e}function I(e){let t={},i=(o,n=o)=>{let l=vt(e.dataset[n]);l!==void 0&&(t[o]=l)},s=(o,n=o,l=!1)=>{let h=e.dataset[n];h&&(t[o]=l?parseFloat(h):parseInt(h,10))},r=(o,n=o)=>{let l=e.dataset[n];l&&(t[o]=/^\d+(\.\d+)?$/.test(l.trim())?parseFloat(l):l)},a=(o,n=o)=>{let l=e.dataset[n];if(!l)return;let h=H(l);h?t[o]=h:console.warn(`[WaveformPlayer] Invalid ${n} attribute, expected a JSON array:`,l)};if(e.dataset.src&&(t.url=e.dataset.src),e.dataset.url&&(t.url=e.dataset.url),s("height"),s("samples"),e.dataset.preload&&(t.preload=e.dataset.preload),e.dataset.crossOrigin&&(t.crossOrigin=e.dataset.crossOrigin),e.dataset.audioMode&&(t.audioMode=e.dataset.audioMode),e.dataset.style&&(t.waveformStyle=e.dataset.style),e.dataset.waveformStyle&&(t.waveformStyle=e.dataset.waveformStyle),e.dataset.waveformGradient&&(t.waveformGradient=e.dataset.waveformGradient),s("barWidth"),s("barSpacing"),s("barRadius"),e.dataset.buttonAlign&&(t.buttonAlign=e.dataset.buttonAlign),e.dataset.layout&&(t.layout=e.dataset.layout),e.dataset.buttonStyle&&(t.buttonStyle=e.dataset.buttonStyle),r("buttonSize"),r("buttonRadius"),e.dataset.colorPreset&&(t.colorPreset=e.dataset.colorPreset),e.dataset.waveformColor&&(t.waveformColor=it(e.dataset.waveformColor)),e.dataset.progressColor&&(t.progressColor=it(e.dataset.progressColor)),e.dataset.color&&(t.waveformColor=e.dataset.color),e.dataset.theme&&(t.colorPreset=e.dataset.theme),i("autoplay"),i("showControls"),i("showInfo"),i("showTime"),i("showHoverTime"),i("seekHandle"),i("showBPM","showBpm"),s("bpm"),i("singlePlay"),i("playOnSeek"),e.dataset.title&&(t.title=e.dataset.title),e.dataset.artist&&(t.artist=e.dataset.artist),e.dataset.album&&(t.album=e.dataset.album),e.dataset.artwork&&(t.artwork=e.dataset.artwork),e.dataset.artworkPosition&&(t.artworkPosition=e.dataset.artworkPosition),e.dataset.waveform&&(t.waveform=e.dataset.waveform),a("markers"),s("playbackRate","playbackRate",!0),i("showPlaybackSpeed"),e.dataset.playbackRates){let o=D(e.dataset.playbackRates);o?t.playbackRates=o:console.warn("[WaveformPlayer] Invalid playbackRates attribute:",e.dataset.playbackRates)}return i("enableMediaSession"),i("showMarkers"),i("accessibleSeek"),e.dataset.seekLabel&&(t.seekLabel=e.dataset.seekLabel),e.dataset.seekValueText&&(t.seekValueText=e.dataset.seekValueText),e.dataset.errorText&&(t.errorText=e.dataset.errorText),e.dataset.playPauseLabel&&(t.playPauseLabel=e.dataset.playPauseLabel),e.dataset.speedLabel&&(t.speedLabel=e.dataset.speedLabel),e.dataset.artworkAlt&&(t.artworkAlt=e.dataset.artworkAlt),e.dataset.unknownTrackText&&(t.unknownTrackText=e.dataset.unknownTrackText),e.dataset.playIcon&&(t.playIcon=e.dataset.playIcon),e.dataset.pauseIcon&&(t.pauseIcon=e.dataset.pauseIcon),t}function ot(e,...t){let i=0;return e.replace(/%(?:(\d+)\$)?s/g,(s,r)=>{let a=r?Number(r)-1:i++;return t[a]??s})}function E(e){let t=Number(e);if(!t||!Number.isFinite(t)||t<0)return"0:00";let i=Math.floor(t/3600),s=Math.floor(t%3600/60),r=Math.floor(t%60);return i>0?`${i}:${s.toString().padStart(2,"0")}:${r.toString().padStart(2,"0")}`:`${s}:${r.toString().padStart(2,"0")}`}var St=0;function nt(e){let t=e||"audio",i=5381;for(let s=0;s>>0).toString(36)}_${(St++).toString(36)}`}function O(e){if(!e)return"Audio";let t=e.split("/");return t[t.length-1].split(".")[0].replace(/[-_]/g," ").replace(/\b\w/g,r=>r.toUpperCase())}function U(e){if(typeof e!="string")return null;let t=e.match(/rgba?\(\s*([\d.]+)\s*[,\s]\s*([\d.]+)\s*[,\s]\s*([\d.]+)\s*(?:[,/]\s*([\d.]+)(%?))?/i);if(!t)return null;let i=Number(t[1]),s=Number(t[2]),r=Number(t[3]);if(!Number.isFinite(i)||!Number.isFinite(s)||!Number.isFinite(r))return null;let a=t[4]===void 0?1:Number(t[4]);return Number.isFinite(a)?(t[5]==="%"&&(a/=100),{r:i,g:s,b:r,a:m(a,0,1)}):null}function lt(e){let t=U(e);return!t||t.a<=0?null:(t.r*299+t.g*587+t.b*114)/1e3}function j(...e){let t={};for(let i of e)for(let s in i)i[s]!==null&&i[s]!==void 0&&(t[s]=i[s]);return t}function ht(e,t){let i;return function(...r){let a=()=>{clearTimeout(i),e(...r)};clearTimeout(i),i=setTimeout(a,t)}}function B(e,t){if(e.length===t)return e;if(e.length===0||t===0)return[];let i=[];if(t>e.length){let s=(e.length-1)/(t-1);for(let r=0;r=e.length)i.push(e[e.length-1]);else if(o===n)i.push(e[o]);else{let h=e[o]*(1-l)+e[n]*l;i.push(h)}}}else{let s=e.length/t;for(let r=0;rn&&(n=e[h]),l++;if(l===0){let h=Math.min(Math.round(r*s),e.length-1);n=e[h]}i.push(n)}}return i}function P(e,t,i,s){if(!Array.isArray(t))return t;if(t.length<2)return t[0];let r=i.width,a=i.height,o=s&&s.waveformGradient,[n,l,h,c]=o==="horizontal"?[0,0,r,0]:o==="diagonal"?[0,0,r,a]:[0,0,0,a];try{let d=e.createLinearGradient(n,l,h,c);return t.forEach((b,y)=>d.addColorStop(y/(t.length-1),b)),d}catch{return t[0]}}function x(e,t,i,s,r,a){if((Array.isArray(a)?a.some(n=>n>0):a>0)&&typeof e.roundRect=="function"){let n=Math.min(s/2,Math.abs(r)/2),l=h=>m(h,0,n);e.beginPath(),e.roundRect(t,i,s,r,Array.isArray(a)?a.map(l):l(a)),e.fill()}else e.fillRect(t,i,s,r)}function pt(e,t){return(e.barRadius||0)*t}function Et(e,t){let i=pt(e,t);return[i,i,0,0]}function ct(e,t,i,s,r){let a=r/2;e.beginPath(),e.moveTo(t,s-a),e.lineTo(i-a,s-a),e.arc(i-a,s,a,-Math.PI/2,Math.PI/2),e.lineTo(t,s+a),e.arc(t,s,a,Math.PI/2,-Math.PI/2),e.closePath()}function V(e,t,i,s,r){let a=window.devicePixelRatio||1,o=r.barWidth*a,n=r.barSpacing*a,l=Math.floor(t.width/(o+n)),h=B(i,l),c=t.height,d=s*t.width,b=Et(r,a),y=P(e,r.color,t,r),w=P(e,r.progressColor,t,r);e.clearRect(0,0,t.width,t.height),e.fillStyle=y;for(let f=0;ft.width)break;let g=h[f]*c*.9,u=c-g;x(e,p,u,o,g,b)}e.save(),e.beginPath(),e.rect(0,0,d,c),e.clip(),e.fillStyle=w;for(let f=0;fd)break;let g=h[f]*c*.9,u=c-g;x(e,p,u,o,g,b)}e.restore()}function Pt(e,t,i,s,r){let a=window.devicePixelRatio||1,o=r.barWidth*a,n=r.barSpacing*a,l=Math.floor(t.width/(o+n)),h=B(i,l),c=t.height,d=c/2,b=s*t.width,y=pt(r,a),w=[y,y,0,0],f=[0,0,y,y],p=P(e,r.color,t,r),g=P(e,r.progressColor,t,r);e.clearRect(0,0,t.width,t.height),e.fillStyle=p;for(let u=0;ut.width)break;let v=h[u]*c*.45;x(e,k,d-v,o,v,w),x(e,k,d,o,v,f)}e.save(),e.beginPath(),e.rect(0,0,b,c),e.clip(),e.fillStyle=g;for(let u=0;ub)break;let v=h[u]*c*.45;x(e,k,d-v,o,v,w),x(e,k,d,o,v,f)}e.restore()}function Tt(e,t,i,s,r){let a=t.width,o=t.height,n=o/2,l=o*.35;e.clearRect(0,0,a,o);let h=(c,d,b=1,y=!1)=>{let w=P(e,c,t,r),f=Array.isArray(c)?c[c.length-1]:c;y&&(e.shadowBlur=12,e.shadowColor=f),e.strokeStyle=w,e.lineWidth=d,e.lineCap="round",e.lineJoin="round",e.beginPath(),e.moveTo(0,n);let p=[],g=Math.floor(i.length*b);for(let u=0;u0&&h(r.progressColor,3,s,!0)}function ut(e,t,i,s,r){let a=window.devicePixelRatio||1,o=(r.barWidth||3)*a,n=(r.barSpacing||1)*a,l=Math.floor(t.width/(o+n)),h=B(i,l),c=t.height,d=4*a,b=2*a,y=s*t.width,w=c/2,f=P(e,r.color,t,r),p=P(e,r.progressColor,t,r);e.clearRect(0,0,t.width,t.height);for(let g=0;gt.width)break;let k=h[g]*c*.9,v=Math.floor(k/(d+b));e.fillStyle=u0&&e.fillRect(u,w+L,o,d)}}}function dt(e,t,i,s,r){let a=window.devicePixelRatio||1,o=(r.barWidth||2)*a,n=(r.barSpacing||3)*a,l=Math.floor(t.width/(o+n)),h=B(i,l),c=t.height,d=Math.max(1.5*a,o/2),b=s*t.width,y=c/2,w=P(e,r.color,t,r),f=P(e,r.progressColor,t,r);e.clearRect(0,0,t.width,t.height);for(let p=0;pt.width)break;let u=h[p]*c*.9;e.fillStyle=g0){let d=Math.max(h*2,s*a);e.save(),e.globalAlpha=r.seekHandle&&!c?.7:1,e.fillStyle=P(e,r.progressColor,t,r)||"rgba(255, 255, 255, 0.9)",ct(e,h,d,n,l),e.fill(),e.restore()}}var Mt={bars:V,bar:V,mirror:Pt,line:Tt,blocks:ut,block:ut,dots:dt,dot:dt,seekbar:At};function ft(e,t,i,s,r){(Mt[r.waveformStyle]||V)(e,t,i,s,r)}function mt(e){try{let t=e.getChannelData(0),i=e.sampleRate,s=Ct(t,i);if(s.length<2)return 120;let r=[];for(let l=1;l{let h=60/l,c=Math.round(h/3)*3;c>60&&c<200&&(a[c]=(a[c]||0)+1)});let o=0,n=120;for(let[l,h]of Object.entries(a))h>o&&(o=h,n=parseInt(l));return n<70&&a[n*2]?n*=2:n>160&&a[Math.round(n/2)]&&(n=Math.round(n/2)),n-1}catch(t){return console.warn("[WaveformPlayer] BPM detection failed:",t),null}}function Ct(e,t){let r=[],a=0;for(let o=0;oh&&n>.01){let c=r[r.length-1]||0,d=t*.15;o-c>d&&r.push(o)}a=n*.8+a*.2}return r}function Lt(e,t=1800){let i=e.length/t,s=e.numberOfChannels,r=[];for(let o=0;ob&&(b=f),fr[l])&&(r[l]=y)}}let a=$(r);return a>0?r.map(o=>o/a):r}async function G(e,t=1800,i=!1){let s;try{let r=window.AudioContext||window.webkitAudioContext;s=new r;let o=await(await fetch(e)).arrayBuffer(),n=await s.decodeAudioData(o),l=Lt(n,t);l=_t(l);let h=null;return i&&(h=mt(n)),{peaks:l,bpm:h}}finally{s&&s.close()}}function yt(e=1800){let t=[];for(let i=0;it)return e;let s=t/i;return e.map(r=>r*s)}var K=128;function gt(e){let t=document.documentElement,i=document.body;return t.classList.contains(e)||t.classList.contains(`${e}-mode`)||t.classList.contains(`theme-${e}`)||t.getAttribute("data-theme")===e||t.getAttribute("data-color-scheme")===e||i.classList.contains(e)||i.classList.contains(`${e}-mode`)||i.getAttribute("data-theme")===e}function xt(e){let t=0,i=0;for(let s=e;s&&s.nodeType===1&&i<.995;s=s.parentElement){let r=U(getComputedStyle(s).backgroundColor);if(!r||r.a<=0)continue;let a=r.a*(1-i);t+=(r.r*299+r.g*587+r.b*114)/1e3*a,i+=a}return{sum:t,alpha:i}}function Rt(){let e=lt(getComputedStyle(document.body).color);if(e!==null)return e>K?"dark":"light";if(window.matchMedia){if(window.matchMedia("(prefers-color-scheme: dark)").matches)return"dark";if(window.matchMedia("(prefers-color-scheme: light)").matches)return"light"}return"dark"}function R(e){if(gt("dark"))return"dark";if(gt("light"))return"light";try{let t=e&&e.nodeType===1?e:document.body,{sum:i,alpha:s}=xt(t),r=Rt(),a=i+(r==="dark"?0:255)*(1-s);return a>K?"light":at&&(t=e[i]);return t}function S(e){return String(e??"").replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'")}function q(e){return S(typeof e=="number"?`${e}px`:e)}function st(e){if(typeof e!="string"||e==="")return!1;try{let t=new URL(e,"http://localhost/");return t.protocol==="http:"||t.protocol==="https:"}catch{return!1}}function m(e,t=0,i=1){return Math.max(t,Math.min(e,i))}function _(e,t=null,i={}){let{min:s=-1/0,max:r=1/0,integer:a=!1}=i,o=typeof e=="number"?e:typeof e=="string"&&e.trim()!==""?Number(e):NaN;if(!Number.isFinite(o))return t;let n=m(o,s,r);return a?Math.round(n):n}function B(e,t=null){if(Array.isArray(e))return e;if(typeof e=="string"&&e.trim().startsWith("["))try{let i=JSON.parse(e);if(Array.isArray(i))return i}catch{}return t}function D(e,t={}){let{min:i=-1/0,max:s=1/0,fallback:r=null}=t,a=B(e);if(!a&&typeof e=="string"&&e.trim()!==""&&(a=e.split(/[,\s]+/)),!a)return r;let o=a.map(n=>_(n)).filter(n=>n!==null&&n>=i&&n<=s);return o.length?o:r}function rt(e,t,i=null){return t.includes(e)?e:i}function at(e){if(typeof e=="string"){let t=e.trim().toLowerCase();return t!==""&&t!=="false"&&t!=="0"}return!!e}function vt(e){return e===void 0?void 0:e==="true"}function it(e){if(typeof e=="string"&&e.trim().startsWith("["))try{return JSON.parse(e)}catch{}return e}function H(e){let t={},i=(o,n=o)=>{let l=vt(e.dataset[n]);l!==void 0&&(t[o]=l)},s=(o,n=o,l=!1)=>{let h=e.dataset[n];h&&(t[o]=l?parseFloat(h):parseInt(h,10))},r=(o,n=o)=>{let l=e.dataset[n];l&&(t[o]=/^\d+(\.\d+)?$/.test(l.trim())?parseFloat(l):l)},a=(o,n=o)=>{let l=e.dataset[n];if(!l)return;let h=B(l);h?t[o]=h:console.warn(`[WaveformPlayer] Invalid ${n} attribute, expected a JSON array:`,l)};if(e.dataset.src&&(t.url=e.dataset.src),e.dataset.url&&(t.url=e.dataset.url),s("height"),s("samples"),e.dataset.preload&&(t.preload=e.dataset.preload),e.dataset.crossOrigin&&(t.crossOrigin=e.dataset.crossOrigin),e.dataset.audioMode&&(t.audioMode=e.dataset.audioMode),e.dataset.style&&(t.waveformStyle=e.dataset.style),e.dataset.waveformStyle&&(t.waveformStyle=e.dataset.waveformStyle),e.dataset.waveformGradient&&(t.waveformGradient=e.dataset.waveformGradient),s("barWidth"),s("barSpacing"),s("barRadius"),e.dataset.buttonAlign&&(t.buttonAlign=e.dataset.buttonAlign),e.dataset.layout&&(t.layout=e.dataset.layout),e.dataset.buttonStyle&&(t.buttonStyle=e.dataset.buttonStyle),r("buttonSize"),r("buttonRadius"),e.dataset.colorPreset&&(t.colorPreset=e.dataset.colorPreset),e.dataset.waveformColor&&(t.waveformColor=it(e.dataset.waveformColor)),e.dataset.progressColor&&(t.progressColor=it(e.dataset.progressColor)),e.dataset.color&&(t.waveformColor=e.dataset.color),e.dataset.theme&&(t.colorPreset=e.dataset.theme),i("autoplay"),i("showControls"),i("showInfo"),i("showAlbum"),i("showTime"),i("showHoverTime"),i("seekHandle"),i("showBPM","showBpm"),s("bpm"),i("singlePlay"),i("playOnSeek"),e.dataset.title&&(t.title=e.dataset.title),e.dataset.artist&&(t.artist=e.dataset.artist),e.dataset.album&&(t.album=e.dataset.album),e.dataset.artwork&&(t.artwork=e.dataset.artwork),e.dataset.artworkPosition&&(t.artworkPosition=e.dataset.artworkPosition),e.dataset.waveform&&(t.waveform=e.dataset.waveform),a("markers"),s("playbackRate","playbackRate",!0),i("showPlaybackSpeed"),e.dataset.playbackRates){let o=D(e.dataset.playbackRates);o?t.playbackRates=o:console.warn("[WaveformPlayer] Invalid playbackRates attribute:",e.dataset.playbackRates)}return i("enableMediaSession"),i("showMarkers"),i("accessibleSeek"),e.dataset.seekLabel&&(t.seekLabel=e.dataset.seekLabel),e.dataset.seekValueText&&(t.seekValueText=e.dataset.seekValueText),e.dataset.errorText&&(t.errorText=e.dataset.errorText),e.dataset.playPauseLabel&&(t.playPauseLabel=e.dataset.playPauseLabel),e.dataset.speedLabel&&(t.speedLabel=e.dataset.speedLabel),e.dataset.artworkAlt&&(t.artworkAlt=e.dataset.artworkAlt),e.dataset.unknownTrackText&&(t.unknownTrackText=e.dataset.unknownTrackText),e.dataset.playIcon&&(t.playIcon=e.dataset.playIcon),e.dataset.pauseIcon&&(t.pauseIcon=e.dataset.pauseIcon),t}function ot(e,...t){let i=0;return e.replace(/%(?:(\d+)\$)?s/g,(s,r)=>{let a=r?Number(r)-1:i++;return t[a]??s})}function E(e){let t=Number(e);if(!t||!Number.isFinite(t)||t<0)return"0:00";let i=Math.floor(t/3600),s=Math.floor(t%3600/60),r=Math.floor(t%60);return i>0?`${i}:${s.toString().padStart(2,"0")}:${r.toString().padStart(2,"0")}`:`${s}:${r.toString().padStart(2,"0")}`}var St=0;function nt(e){let t=e||"audio",i=5381;for(let s=0;s>>0).toString(36)}_${(St++).toString(36)}`}function I(e){if(!e)return"Audio";let t=e.split("/");return t[t.length-1].split(".")[0].replace(/[-_]/g," ").replace(/\b\w/g,r=>r.toUpperCase())}function U(e){if(typeof e!="string")return null;let t=e.match(/rgba?\(\s*([\d.]+)\s*[,\s]\s*([\d.]+)\s*[,\s]\s*([\d.]+)\s*(?:[,/]\s*([\d.]+)(%?))?/i);if(!t)return null;let i=Number(t[1]),s=Number(t[2]),r=Number(t[3]);if(!Number.isFinite(i)||!Number.isFinite(s)||!Number.isFinite(r))return null;let a=t[4]===void 0?1:Number(t[4]);return Number.isFinite(a)?(t[5]==="%"&&(a/=100),{r:i,g:s,b:r,a:m(a,0,1)}):null}function lt(e){let t=U(e);return!t||t.a<=0?null:(t.r*299+t.g*587+t.b*114)/1e3}function j(...e){let t={};for(let i of e)for(let s in i)i[s]!==null&&i[s]!==void 0&&(t[s]=i[s]);return t}function ht(e,t){let i;return function(...r){let a=()=>{clearTimeout(i),e(...r)};clearTimeout(i),i=setTimeout(a,t)}}function O(e,t){if(e.length===t)return e;if(e.length===0||t===0)return[];let i=[];if(t>e.length){let s=(e.length-1)/(t-1);for(let r=0;r=e.length)i.push(e[e.length-1]);else if(o===n)i.push(e[o]);else{let h=e[o]*(1-l)+e[n]*l;i.push(h)}}}else{let s=e.length/t;for(let r=0;rn&&(n=e[h]),l++;if(l===0){let h=Math.min(Math.round(r*s),e.length-1);n=e[h]}i.push(n)}}return i}function P(e,t,i,s){if(!Array.isArray(t))return t;if(t.length<2)return t[0];let r=i.width,a=i.height,o=s&&s.waveformGradient,[n,l,h,c]=o==="horizontal"?[0,0,r,0]:o==="diagonal"?[0,0,r,a]:[0,0,0,a];try{let d=e.createLinearGradient(n,l,h,c);return t.forEach((g,y)=>d.addColorStop(y/(t.length-1),g)),d}catch{return t[0]}}function x(e,t,i,s,r,a){if((Array.isArray(a)?a.some(n=>n>0):a>0)&&typeof e.roundRect=="function"){let n=Math.min(s/2,Math.abs(r)/2),l=h=>m(h,0,n);e.beginPath(),e.roundRect(t,i,s,r,Array.isArray(a)?a.map(l):l(a)),e.fill()}else e.fillRect(t,i,s,r)}function pt(e,t){return(e.barRadius||0)*t}function Et(e,t){let i=pt(e,t);return[i,i,0,0]}function ct(e,t,i,s,r){let a=r/2;e.beginPath(),e.moveTo(t,s-a),e.lineTo(i-a,s-a),e.arc(i-a,s,a,-Math.PI/2,Math.PI/2),e.lineTo(t,s+a),e.arc(t,s,a,Math.PI/2,-Math.PI/2),e.closePath()}function V(e,t,i,s,r){let a=window.devicePixelRatio||1,o=r.barWidth*a,n=r.barSpacing*a,l=Math.floor(t.width/(o+n)),h=O(i,l),c=t.height,d=s*t.width,g=Et(r,a),y=P(e,r.color,t,r),w=P(e,r.progressColor,t,r);e.clearRect(0,0,t.width,t.height),e.fillStyle=y;for(let f=0;ft.width)break;let b=h[f]*c*.9,u=c-b;x(e,p,u,o,b,g)}e.save(),e.beginPath(),e.rect(0,0,d,c),e.clip(),e.fillStyle=w;for(let f=0;fd)break;let b=h[f]*c*.9,u=c-b;x(e,p,u,o,b,g)}e.restore()}function Pt(e,t,i,s,r){let a=window.devicePixelRatio||1,o=r.barWidth*a,n=r.barSpacing*a,l=Math.floor(t.width/(o+n)),h=O(i,l),c=t.height,d=c/2,g=s*t.width,y=pt(r,a),w=[y,y,0,0],f=[0,0,y,y],p=P(e,r.color,t,r),b=P(e,r.progressColor,t,r);e.clearRect(0,0,t.width,t.height),e.fillStyle=p;for(let u=0;ut.width)break;let v=h[u]*c*.45;x(e,k,d-v,o,v,w),x(e,k,d,o,v,f)}e.save(),e.beginPath(),e.rect(0,0,g,c),e.clip(),e.fillStyle=b;for(let u=0;ug)break;let v=h[u]*c*.45;x(e,k,d-v,o,v,w),x(e,k,d,o,v,f)}e.restore()}function At(e,t,i,s,r){let a=t.width,o=t.height,n=o/2,l=o*.35;e.clearRect(0,0,a,o);let h=(c,d,g=1,y=!1)=>{let w=P(e,c,t,r),f=Array.isArray(c)?c[c.length-1]:c;y&&(e.shadowBlur=12,e.shadowColor=f),e.strokeStyle=w,e.lineWidth=d,e.lineCap="round",e.lineJoin="round",e.beginPath(),e.moveTo(0,n);let p=[],b=Math.floor(i.length*g);for(let u=0;u0&&h(r.progressColor,3,s,!0)}function ut(e,t,i,s,r){let a=window.devicePixelRatio||1,o=(r.barWidth||3)*a,n=(r.barSpacing||1)*a,l=Math.floor(t.width/(o+n)),h=O(i,l),c=t.height,d=4*a,g=2*a,y=s*t.width,w=c/2,f=P(e,r.color,t,r),p=P(e,r.progressColor,t,r);e.clearRect(0,0,t.width,t.height);for(let b=0;bt.width)break;let k=h[b]*c*.9,v=Math.floor(k/(d+g));e.fillStyle=u0&&e.fillRect(u,w+L,o,d)}}}function dt(e,t,i,s,r){let a=window.devicePixelRatio||1,o=(r.barWidth||2)*a,n=(r.barSpacing||3)*a,l=Math.floor(t.width/(o+n)),h=O(i,l),c=t.height,d=Math.max(1.5*a,o/2),g=s*t.width,y=c/2,w=P(e,r.color,t,r),f=P(e,r.progressColor,t,r);e.clearRect(0,0,t.width,t.height);for(let p=0;pt.width)break;let u=h[p]*c*.9;e.fillStyle=b0){let d=Math.max(h*2,s*a);e.save(),e.globalAlpha=r.seekHandle&&!c?.7:1,e.fillStyle=P(e,r.progressColor,t,r)||"rgba(255, 255, 255, 0.9)",ct(e,h,d,n,l),e.fill(),e.restore()}}var Mt={bars:V,bar:V,mirror:Pt,line:At,blocks:ut,block:ut,dots:dt,dot:dt,seekbar:Tt};function ft(e,t,i,s,r){(Mt[r.waveformStyle]||V)(e,t,i,s,r)}function mt(e){try{let t=e.getChannelData(0),i=e.sampleRate,s=Ct(t,i);if(s.length<2)return 120;let r=[];for(let l=1;l{let h=60/l,c=Math.round(h/3)*3;c>60&&c<200&&(a[c]=(a[c]||0)+1)});let o=0,n=120;for(let[l,h]of Object.entries(a))h>o&&(o=h,n=parseInt(l));return n<70&&a[n*2]?n*=2:n>160&&a[Math.round(n/2)]&&(n=Math.round(n/2)),n-1}catch(t){return console.warn("[WaveformPlayer] BPM detection failed:",t),null}}function Ct(e,t){let r=[],a=0;for(let o=0;oh&&n>.01){let c=r[r.length-1]||0,d=t*.15;o-c>d&&r.push(o)}a=n*.8+a*.2}return r}function Lt(e,t=1800){let i=e.length/t,s=e.numberOfChannels,r=[];for(let o=0;og&&(g=f),fr[l])&&(r[l]=y)}}let a=z(r);return a>0?r.map(o=>o/a):r}async function G(e,t=1800,i=!1){let s;try{let r=window.AudioContext||window.webkitAudioContext;s=new r;let o=await(await fetch(e)).arrayBuffer(),n=await s.decodeAudioData(o),l=Lt(n,t);l=_t(l);let h=null;return i&&(h=mt(n)),{peaks:l,bpm:h}}finally{s&&s.close()}}function yt(e=1800){let t=[];for(let i=0;it)return e;let s=t/i;return e.map(r=>r*s)}var K=128;function bt(e){let t=document.documentElement,i=document.body;return t.classList.contains(e)||t.classList.contains(`${e}-mode`)||t.classList.contains(`theme-${e}`)||t.getAttribute("data-theme")===e||t.getAttribute("data-color-scheme")===e||i.classList.contains(e)||i.classList.contains(`${e}-mode`)||i.getAttribute("data-theme")===e}function xt(e){let t=0,i=0;for(let s=e;s&&s.nodeType===1&&i<.995;s=s.parentElement){let r=U(getComputedStyle(s).backgroundColor);if(!r||r.a<=0)continue;let a=r.a*(1-i);t+=(r.r*299+r.g*587+r.b*114)/1e3*a,i+=a}return{sum:t,alpha:i}}function Rt(){let e=lt(getComputedStyle(document.body).color);if(e!==null)return e>K?"dark":"light";if(window.matchMedia){if(window.matchMedia("(prefers-color-scheme: dark)").matches)return"dark";if(window.matchMedia("(prefers-color-scheme: light)").matches)return"light"}return"dark"}function R(e){if(bt("dark"))return"dark";if(bt("light"))return"light";try{let t=e&&e.nodeType===1?e:document.body,{sum:i,alpha:s}=xt(t),r=Rt(),a=i+(r==="dark"?0:255)*(1-s);return a>K?"light":a
${o}
${this.options.playIcon}
@@ -18,6 +18,7 @@ function $(e){let t=-1/0;for(let i=0;it&&(t=e[i]);return t}fu
${S(this.options.artist)} `:""}
+ ${this.options.showAlbum&&this.options.album?`${S(this.options.album)} `:""}
${this.options.showBPM?`
@@ -61,4 +62,4 @@ function $(e){let t=-1/0;for(let i=0;it&&(t=e[i]);return t}fu
${l}
${escapeHtml(this.options.artist)} ` : ""}
+ ${this.options.showAlbum && this.options.album ? `${escapeHtml(this.options.album)} ` : ""}
${this.options.showBPM ? `
@@ -1266,6 +1270,7 @@
this.ctx = this.canvas.getContext("2d");
this.titleEl = this.container.querySelector(".waveform-title");
this.artistEl = this.container.querySelector(".waveform-artist");
+ this.albumEl = this.container.querySelector(".waveform-album");
this.artworkEl = this.container.querySelector(".waveform-artwork, .waveform-btn-artwork");
this.bindArtworkFallback(this.artworkEl);
this.currentTimeEl = this.container.querySelector(".time-current");
@@ -1338,6 +1343,17 @@
span.className = "waveform-artist";
return span;
}
+ /**
+ * Create an album text element matching the initial player markup.
+ *
+ * @returns {HTMLSpanElement} Album text element.
+ * @private
+ */
+ createAlbumElement() {
+ const span = document.createElement("span");
+ span.className = "waveform-album";
+ return span;
+ }
/**
* Reconcile artist metadata and markup for the current track.
*
@@ -1361,6 +1377,33 @@
this.artistEl.textContent = artist;
this.artistEl.style.display = "";
}
+ /**
+ * Reconcile album metadata and markup for the current track.
+ *
+ * @param {string|null} album - Album text, or a falsy value to remove it.
+ * @private
+ */
+ syncAlbum(album) {
+ this.options.album = album || "";
+ if (!this.options.showInfo || !this.options.showAlbum) {
+ this.albumEl?.remove();
+ this.albumEl = null;
+ return;
+ }
+ if (!album) {
+ this.albumEl?.remove();
+ this.albumEl = null;
+ return;
+ }
+ if (!this.albumEl) {
+ const anchorEl = this.artistEl || this.container.querySelector(".waveform-title");
+ if (!anchorEl) return;
+ this.albumEl = this.createAlbumElement();
+ anchorEl.after(this.albumEl);
+ }
+ this.albumEl.textContent = album;
+ this.albumEl.style.display = "";
+ }
/**
* Reconcile the play button's artwork image (`artworkPosition: 'button'`).
*
@@ -1972,7 +2015,7 @@
*
* Pauses any current playback, fully resets the audio element (self mode),
* clears error/marker/progress state, merges the new metadata into
- * `this.options`, updates the artist/artwork DOM, then calls
+ * `this.options`, updates the artist/album/artwork DOM, then calls
* {@link WaveformPlayer#load}. Auto-plays the new track unless
* `options.autoplay === false`.
* @param {string} url - Audio URL.
@@ -1987,6 +2030,8 @@
async loadTrack(url, title = null, artist = null, options = {}) {
const hasArtworkOption = Object.prototype.hasOwnProperty.call(options, "artwork");
const hasArtworkAltOption = Object.prototype.hasOwnProperty.call(options, "artworkAlt");
+ const hasAlbumOption = Object.prototype.hasOwnProperty.call(options, "album");
+ const hasShowAlbumOption = Object.prototype.hasOwnProperty.call(options, "showAlbum");
if (this.isPlaying) {
this.pause();
}
@@ -2029,6 +2074,9 @@
if (artist !== null) {
this.syncArtist(artist);
}
+ if (hasAlbumOption || hasShowAlbumOption) {
+ this.syncAlbum(this.options.album);
+ }
if (hasArtworkOption || hasArtworkAltOption) {
this.syncArtwork(
hasArtworkOption ? options.artwork : this.options.artwork,
@@ -2692,13 +2740,14 @@
* directly: `WaveformBar.play(event.detail)`.
*
* @private
- * @return {{url:string,title:?string,artist:?string,artwork:?string,player:WaveformPlayer}}
+ * @return {{url:string,title:?string,artist:?string,album:string,artwork:?string,player:WaveformPlayer}}
*/
_buildTrackDetail() {
return {
url: this.options.url,
title: this.options.title,
artist: this.options.artist,
+ album: this.options.album,
artwork: this.options.artwork,
markers: this.options.markers,
waveform: this.options.waveform,
diff --git a/dist/waveform-player.min.js b/dist/waveform-player.min.js
index 4b6e9ec..28c87d1 100644
--- a/dist/waveform-player.min.js
+++ b/dist/waveform-player.min.js
@@ -1,4 +1,4 @@
-(()=>{function $(e){let t=-1/0;for(let i=0;i
t&&(t=e[i]);return t}function S(e){return String(e??"").replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'")}function q(e){return S(typeof e=="number"?`${e}px`:e)}function st(e){if(typeof e!="string"||e==="")return!1;try{let t=new URL(e,"http://localhost/");return t.protocol==="http:"||t.protocol==="https:"}catch{return!1}}function m(e,t=0,i=1){return Math.max(t,Math.min(e,i))}function _(e,t=null,i={}){let{min:s=-1/0,max:r=1/0,integer:a=!1}=i,o=typeof e=="number"?e:typeof e=="string"&&e.trim()!==""?Number(e):NaN;if(!Number.isFinite(o))return t;let n=m(o,s,r);return a?Math.round(n):n}function H(e,t=null){if(Array.isArray(e))return e;if(typeof e=="string"&&e.trim().startsWith("["))try{let i=JSON.parse(e);if(Array.isArray(i))return i}catch{}return t}function D(e,t={}){let{min:i=-1/0,max:s=1/0,fallback:r=null}=t,a=H(e);if(!a&&typeof e=="string"&&e.trim()!==""&&(a=e.split(/[,\s]+/)),!a)return r;let o=a.map(n=>_(n)).filter(n=>n!==null&&n>=i&&n<=s);return o.length?o:r}function rt(e,t,i=null){return t.includes(e)?e:i}function at(e){if(typeof e=="string"){let t=e.trim().toLowerCase();return t!==""&&t!=="false"&&t!=="0"}return!!e}function vt(e){return e===void 0?void 0:e==="true"}function it(e){if(typeof e=="string"&&e.trim().startsWith("["))try{return JSON.parse(e)}catch{}return e}function I(e){let t={},i=(o,n=o)=>{let l=vt(e.dataset[n]);l!==void 0&&(t[o]=l)},s=(o,n=o,l=!1)=>{let h=e.dataset[n];h&&(t[o]=l?parseFloat(h):parseInt(h,10))},r=(o,n=o)=>{let l=e.dataset[n];l&&(t[o]=/^\d+(\.\d+)?$/.test(l.trim())?parseFloat(l):l)},a=(o,n=o)=>{let l=e.dataset[n];if(!l)return;let h=H(l);h?t[o]=h:console.warn(`[WaveformPlayer] Invalid ${n} attribute, expected a JSON array:`,l)};if(e.dataset.src&&(t.url=e.dataset.src),e.dataset.url&&(t.url=e.dataset.url),s("height"),s("samples"),e.dataset.preload&&(t.preload=e.dataset.preload),e.dataset.crossOrigin&&(t.crossOrigin=e.dataset.crossOrigin),e.dataset.audioMode&&(t.audioMode=e.dataset.audioMode),e.dataset.style&&(t.waveformStyle=e.dataset.style),e.dataset.waveformStyle&&(t.waveformStyle=e.dataset.waveformStyle),e.dataset.waveformGradient&&(t.waveformGradient=e.dataset.waveformGradient),s("barWidth"),s("barSpacing"),s("barRadius"),e.dataset.buttonAlign&&(t.buttonAlign=e.dataset.buttonAlign),e.dataset.layout&&(t.layout=e.dataset.layout),e.dataset.buttonStyle&&(t.buttonStyle=e.dataset.buttonStyle),r("buttonSize"),r("buttonRadius"),e.dataset.colorPreset&&(t.colorPreset=e.dataset.colorPreset),e.dataset.waveformColor&&(t.waveformColor=it(e.dataset.waveformColor)),e.dataset.progressColor&&(t.progressColor=it(e.dataset.progressColor)),e.dataset.color&&(t.waveformColor=e.dataset.color),e.dataset.theme&&(t.colorPreset=e.dataset.theme),i("autoplay"),i("showControls"),i("showInfo"),i("showTime"),i("showHoverTime"),i("seekHandle"),i("showBPM","showBpm"),s("bpm"),i("singlePlay"),i("playOnSeek"),e.dataset.title&&(t.title=e.dataset.title),e.dataset.artist&&(t.artist=e.dataset.artist),e.dataset.album&&(t.album=e.dataset.album),e.dataset.artwork&&(t.artwork=e.dataset.artwork),e.dataset.artworkPosition&&(t.artworkPosition=e.dataset.artworkPosition),e.dataset.waveform&&(t.waveform=e.dataset.waveform),a("markers"),s("playbackRate","playbackRate",!0),i("showPlaybackSpeed"),e.dataset.playbackRates){let o=D(e.dataset.playbackRates);o?t.playbackRates=o:console.warn("[WaveformPlayer] Invalid playbackRates attribute:",e.dataset.playbackRates)}return i("enableMediaSession"),i("showMarkers"),i("accessibleSeek"),e.dataset.seekLabel&&(t.seekLabel=e.dataset.seekLabel),e.dataset.seekValueText&&(t.seekValueText=e.dataset.seekValueText),e.dataset.errorText&&(t.errorText=e.dataset.errorText),e.dataset.playPauseLabel&&(t.playPauseLabel=e.dataset.playPauseLabel),e.dataset.speedLabel&&(t.speedLabel=e.dataset.speedLabel),e.dataset.artworkAlt&&(t.artworkAlt=e.dataset.artworkAlt),e.dataset.unknownTrackText&&(t.unknownTrackText=e.dataset.unknownTrackText),e.dataset.playIcon&&(t.playIcon=e.dataset.playIcon),e.dataset.pauseIcon&&(t.pauseIcon=e.dataset.pauseIcon),t}function ot(e,...t){let i=0;return e.replace(/%(?:(\d+)\$)?s/g,(s,r)=>{let a=r?Number(r)-1:i++;return t[a]??s})}function E(e){let t=Number(e);if(!t||!Number.isFinite(t)||t<0)return"0:00";let i=Math.floor(t/3600),s=Math.floor(t%3600/60),r=Math.floor(t%60);return i>0?`${i}:${s.toString().padStart(2,"0")}:${r.toString().padStart(2,"0")}`:`${s}:${r.toString().padStart(2,"0")}`}var St=0;function nt(e){let t=e||"audio",i=5381;for(let s=0;s>>0).toString(36)}_${(St++).toString(36)}`}function O(e){if(!e)return"Audio";let t=e.split("/");return t[t.length-1].split(".")[0].replace(/[-_]/g," ").replace(/\b\w/g,r=>r.toUpperCase())}function U(e){if(typeof e!="string")return null;let t=e.match(/rgba?\(\s*([\d.]+)\s*[,\s]\s*([\d.]+)\s*[,\s]\s*([\d.]+)\s*(?:[,/]\s*([\d.]+)(%?))?/i);if(!t)return null;let i=Number(t[1]),s=Number(t[2]),r=Number(t[3]);if(!Number.isFinite(i)||!Number.isFinite(s)||!Number.isFinite(r))return null;let a=t[4]===void 0?1:Number(t[4]);return Number.isFinite(a)?(t[5]==="%"&&(a/=100),{r:i,g:s,b:r,a:m(a,0,1)}):null}function lt(e){let t=U(e);return!t||t.a<=0?null:(t.r*299+t.g*587+t.b*114)/1e3}function j(...e){let t={};for(let i of e)for(let s in i)i[s]!==null&&i[s]!==void 0&&(t[s]=i[s]);return t}function ht(e,t){let i;return function(...r){let a=()=>{clearTimeout(i),e(...r)};clearTimeout(i),i=setTimeout(a,t)}}function B(e,t){if(e.length===t)return e;if(e.length===0||t===0)return[];let i=[];if(t>e.length){let s=(e.length-1)/(t-1);for(let r=0;r=e.length)i.push(e[e.length-1]);else if(o===n)i.push(e[o]);else{let h=e[o]*(1-l)+e[n]*l;i.push(h)}}}else{let s=e.length/t;for(let r=0;rn&&(n=e[h]),l++;if(l===0){let h=Math.min(Math.round(r*s),e.length-1);n=e[h]}i.push(n)}}return i}function P(e,t,i,s){if(!Array.isArray(t))return t;if(t.length<2)return t[0];let r=i.width,a=i.height,o=s&&s.waveformGradient,[n,l,h,c]=o==="horizontal"?[0,0,r,0]:o==="diagonal"?[0,0,r,a]:[0,0,0,a];try{let d=e.createLinearGradient(n,l,h,c);return t.forEach((b,y)=>d.addColorStop(y/(t.length-1),b)),d}catch{return t[0]}}function x(e,t,i,s,r,a){if((Array.isArray(a)?a.some(n=>n>0):a>0)&&typeof e.roundRect=="function"){let n=Math.min(s/2,Math.abs(r)/2),l=h=>m(h,0,n);e.beginPath(),e.roundRect(t,i,s,r,Array.isArray(a)?a.map(l):l(a)),e.fill()}else e.fillRect(t,i,s,r)}function pt(e,t){return(e.barRadius||0)*t}function Et(e,t){let i=pt(e,t);return[i,i,0,0]}function ct(e,t,i,s,r){let a=r/2;e.beginPath(),e.moveTo(t,s-a),e.lineTo(i-a,s-a),e.arc(i-a,s,a,-Math.PI/2,Math.PI/2),e.lineTo(t,s+a),e.arc(t,s,a,Math.PI/2,-Math.PI/2),e.closePath()}function V(e,t,i,s,r){let a=window.devicePixelRatio||1,o=r.barWidth*a,n=r.barSpacing*a,l=Math.floor(t.width/(o+n)),h=B(i,l),c=t.height,d=s*t.width,b=Et(r,a),y=P(e,r.color,t,r),w=P(e,r.progressColor,t,r);e.clearRect(0,0,t.width,t.height),e.fillStyle=y;for(let f=0;ft.width)break;let g=h[f]*c*.9,u=c-g;x(e,p,u,o,g,b)}e.save(),e.beginPath(),e.rect(0,0,d,c),e.clip(),e.fillStyle=w;for(let f=0;fd)break;let g=h[f]*c*.9,u=c-g;x(e,p,u,o,g,b)}e.restore()}function Pt(e,t,i,s,r){let a=window.devicePixelRatio||1,o=r.barWidth*a,n=r.barSpacing*a,l=Math.floor(t.width/(o+n)),h=B(i,l),c=t.height,d=c/2,b=s*t.width,y=pt(r,a),w=[y,y,0,0],f=[0,0,y,y],p=P(e,r.color,t,r),g=P(e,r.progressColor,t,r);e.clearRect(0,0,t.width,t.height),e.fillStyle=p;for(let u=0;ut.width)break;let v=h[u]*c*.45;x(e,k,d-v,o,v,w),x(e,k,d,o,v,f)}e.save(),e.beginPath(),e.rect(0,0,b,c),e.clip(),e.fillStyle=g;for(let u=0;ub)break;let v=h[u]*c*.45;x(e,k,d-v,o,v,w),x(e,k,d,o,v,f)}e.restore()}function Tt(e,t,i,s,r){let a=t.width,o=t.height,n=o/2,l=o*.35;e.clearRect(0,0,a,o);let h=(c,d,b=1,y=!1)=>{let w=P(e,c,t,r),f=Array.isArray(c)?c[c.length-1]:c;y&&(e.shadowBlur=12,e.shadowColor=f),e.strokeStyle=w,e.lineWidth=d,e.lineCap="round",e.lineJoin="round",e.beginPath(),e.moveTo(0,n);let p=[],g=Math.floor(i.length*b);for(let u=0;u0&&h(r.progressColor,3,s,!0)}function ut(e,t,i,s,r){let a=window.devicePixelRatio||1,o=(r.barWidth||3)*a,n=(r.barSpacing||1)*a,l=Math.floor(t.width/(o+n)),h=B(i,l),c=t.height,d=4*a,b=2*a,y=s*t.width,w=c/2,f=P(e,r.color,t,r),p=P(e,r.progressColor,t,r);e.clearRect(0,0,t.width,t.height);for(let g=0;gt.width)break;let k=h[g]*c*.9,v=Math.floor(k/(d+b));e.fillStyle=u0&&e.fillRect(u,w+L,o,d)}}}function dt(e,t,i,s,r){let a=window.devicePixelRatio||1,o=(r.barWidth||2)*a,n=(r.barSpacing||3)*a,l=Math.floor(t.width/(o+n)),h=B(i,l),c=t.height,d=Math.max(1.5*a,o/2),b=s*t.width,y=c/2,w=P(e,r.color,t,r),f=P(e,r.progressColor,t,r);e.clearRect(0,0,t.width,t.height);for(let p=0;pt.width)break;let u=h[p]*c*.9;e.fillStyle=g0){let d=Math.max(h*2,s*a);e.save(),e.globalAlpha=r.seekHandle&&!c?.7:1,e.fillStyle=P(e,r.progressColor,t,r)||"rgba(255, 255, 255, 0.9)",ct(e,h,d,n,l),e.fill(),e.restore()}}var Mt={bars:V,bar:V,mirror:Pt,line:Tt,blocks:ut,block:ut,dots:dt,dot:dt,seekbar:At};function ft(e,t,i,s,r){(Mt[r.waveformStyle]||V)(e,t,i,s,r)}function mt(e){try{let t=e.getChannelData(0),i=e.sampleRate,s=Ct(t,i);if(s.length<2)return 120;let r=[];for(let l=1;l{let h=60/l,c=Math.round(h/3)*3;c>60&&c<200&&(a[c]=(a[c]||0)+1)});let o=0,n=120;for(let[l,h]of Object.entries(a))h>o&&(o=h,n=parseInt(l));return n<70&&a[n*2]?n*=2:n>160&&a[Math.round(n/2)]&&(n=Math.round(n/2)),n-1}catch(t){return console.warn("[WaveformPlayer] BPM detection failed:",t),null}}function Ct(e,t){let r=[],a=0;for(let o=0;oh&&n>.01){let c=r[r.length-1]||0,d=t*.15;o-c>d&&r.push(o)}a=n*.8+a*.2}return r}function Lt(e,t=1800){let i=e.length/t,s=e.numberOfChannels,r=[];for(let o=0;ob&&(b=f),fr[l])&&(r[l]=y)}}let a=$(r);return a>0?r.map(o=>o/a):r}async function G(e,t=1800,i=!1){let s;try{let r=window.AudioContext||window.webkitAudioContext;s=new r;let o=await(await fetch(e)).arrayBuffer(),n=await s.decodeAudioData(o),l=Lt(n,t);l=_t(l);let h=null;return i&&(h=mt(n)),{peaks:l,bpm:h}}finally{s&&s.close()}}function yt(e=1800){let t=[];for(let i=0;it)return e;let s=t/i;return e.map(r=>r*s)}var K=128;function gt(e){let t=document.documentElement,i=document.body;return t.classList.contains(e)||t.classList.contains(`${e}-mode`)||t.classList.contains(`theme-${e}`)||t.getAttribute("data-theme")===e||t.getAttribute("data-color-scheme")===e||i.classList.contains(e)||i.classList.contains(`${e}-mode`)||i.getAttribute("data-theme")===e}function xt(e){let t=0,i=0;for(let s=e;s&&s.nodeType===1&&i<.995;s=s.parentElement){let r=U(getComputedStyle(s).backgroundColor);if(!r||r.a<=0)continue;let a=r.a*(1-i);t+=(r.r*299+r.g*587+r.b*114)/1e3*a,i+=a}return{sum:t,alpha:i}}function Rt(){let e=lt(getComputedStyle(document.body).color);if(e!==null)return e>K?"dark":"light";if(window.matchMedia){if(window.matchMedia("(prefers-color-scheme: dark)").matches)return"dark";if(window.matchMedia("(prefers-color-scheme: light)").matches)return"light"}return"dark"}function R(e){if(gt("dark"))return"dark";if(gt("light"))return"light";try{let t=e&&e.nodeType===1?e:document.body,{sum:i,alpha:s}=xt(t),r=Rt(),a=i+(r==="dark"?0:255)*(1-s);return a>K?"light":at&&(t=e[i]);return t}function S(e){return String(e??"").replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'")}function q(e){return S(typeof e=="number"?`${e}px`:e)}function st(e){if(typeof e!="string"||e==="")return!1;try{let t=new URL(e,"http://localhost/");return t.protocol==="http:"||t.protocol==="https:"}catch{return!1}}function m(e,t=0,i=1){return Math.max(t,Math.min(e,i))}function _(e,t=null,i={}){let{min:s=-1/0,max:r=1/0,integer:a=!1}=i,o=typeof e=="number"?e:typeof e=="string"&&e.trim()!==""?Number(e):NaN;if(!Number.isFinite(o))return t;let n=m(o,s,r);return a?Math.round(n):n}function B(e,t=null){if(Array.isArray(e))return e;if(typeof e=="string"&&e.trim().startsWith("["))try{let i=JSON.parse(e);if(Array.isArray(i))return i}catch{}return t}function D(e,t={}){let{min:i=-1/0,max:s=1/0,fallback:r=null}=t,a=B(e);if(!a&&typeof e=="string"&&e.trim()!==""&&(a=e.split(/[,\s]+/)),!a)return r;let o=a.map(n=>_(n)).filter(n=>n!==null&&n>=i&&n<=s);return o.length?o:r}function rt(e,t,i=null){return t.includes(e)?e:i}function at(e){if(typeof e=="string"){let t=e.trim().toLowerCase();return t!==""&&t!=="false"&&t!=="0"}return!!e}function vt(e){return e===void 0?void 0:e==="true"}function it(e){if(typeof e=="string"&&e.trim().startsWith("["))try{return JSON.parse(e)}catch{}return e}function H(e){let t={},i=(o,n=o)=>{let l=vt(e.dataset[n]);l!==void 0&&(t[o]=l)},s=(o,n=o,l=!1)=>{let h=e.dataset[n];h&&(t[o]=l?parseFloat(h):parseInt(h,10))},r=(o,n=o)=>{let l=e.dataset[n];l&&(t[o]=/^\d+(\.\d+)?$/.test(l.trim())?parseFloat(l):l)},a=(o,n=o)=>{let l=e.dataset[n];if(!l)return;let h=B(l);h?t[o]=h:console.warn(`[WaveformPlayer] Invalid ${n} attribute, expected a JSON array:`,l)};if(e.dataset.src&&(t.url=e.dataset.src),e.dataset.url&&(t.url=e.dataset.url),s("height"),s("samples"),e.dataset.preload&&(t.preload=e.dataset.preload),e.dataset.crossOrigin&&(t.crossOrigin=e.dataset.crossOrigin),e.dataset.audioMode&&(t.audioMode=e.dataset.audioMode),e.dataset.style&&(t.waveformStyle=e.dataset.style),e.dataset.waveformStyle&&(t.waveformStyle=e.dataset.waveformStyle),e.dataset.waveformGradient&&(t.waveformGradient=e.dataset.waveformGradient),s("barWidth"),s("barSpacing"),s("barRadius"),e.dataset.buttonAlign&&(t.buttonAlign=e.dataset.buttonAlign),e.dataset.layout&&(t.layout=e.dataset.layout),e.dataset.buttonStyle&&(t.buttonStyle=e.dataset.buttonStyle),r("buttonSize"),r("buttonRadius"),e.dataset.colorPreset&&(t.colorPreset=e.dataset.colorPreset),e.dataset.waveformColor&&(t.waveformColor=it(e.dataset.waveformColor)),e.dataset.progressColor&&(t.progressColor=it(e.dataset.progressColor)),e.dataset.color&&(t.waveformColor=e.dataset.color),e.dataset.theme&&(t.colorPreset=e.dataset.theme),i("autoplay"),i("showControls"),i("showInfo"),i("showAlbum"),i("showTime"),i("showHoverTime"),i("seekHandle"),i("showBPM","showBpm"),s("bpm"),i("singlePlay"),i("playOnSeek"),e.dataset.title&&(t.title=e.dataset.title),e.dataset.artist&&(t.artist=e.dataset.artist),e.dataset.album&&(t.album=e.dataset.album),e.dataset.artwork&&(t.artwork=e.dataset.artwork),e.dataset.artworkPosition&&(t.artworkPosition=e.dataset.artworkPosition),e.dataset.waveform&&(t.waveform=e.dataset.waveform),a("markers"),s("playbackRate","playbackRate",!0),i("showPlaybackSpeed"),e.dataset.playbackRates){let o=D(e.dataset.playbackRates);o?t.playbackRates=o:console.warn("[WaveformPlayer] Invalid playbackRates attribute:",e.dataset.playbackRates)}return i("enableMediaSession"),i("showMarkers"),i("accessibleSeek"),e.dataset.seekLabel&&(t.seekLabel=e.dataset.seekLabel),e.dataset.seekValueText&&(t.seekValueText=e.dataset.seekValueText),e.dataset.errorText&&(t.errorText=e.dataset.errorText),e.dataset.playPauseLabel&&(t.playPauseLabel=e.dataset.playPauseLabel),e.dataset.speedLabel&&(t.speedLabel=e.dataset.speedLabel),e.dataset.artworkAlt&&(t.artworkAlt=e.dataset.artworkAlt),e.dataset.unknownTrackText&&(t.unknownTrackText=e.dataset.unknownTrackText),e.dataset.playIcon&&(t.playIcon=e.dataset.playIcon),e.dataset.pauseIcon&&(t.pauseIcon=e.dataset.pauseIcon),t}function ot(e,...t){let i=0;return e.replace(/%(?:(\d+)\$)?s/g,(s,r)=>{let a=r?Number(r)-1:i++;return t[a]??s})}function E(e){let t=Number(e);if(!t||!Number.isFinite(t)||t<0)return"0:00";let i=Math.floor(t/3600),s=Math.floor(t%3600/60),r=Math.floor(t%60);return i>0?`${i}:${s.toString().padStart(2,"0")}:${r.toString().padStart(2,"0")}`:`${s}:${r.toString().padStart(2,"0")}`}var St=0;function nt(e){let t=e||"audio",i=5381;for(let s=0;s>>0).toString(36)}_${(St++).toString(36)}`}function I(e){if(!e)return"Audio";let t=e.split("/");return t[t.length-1].split(".")[0].replace(/[-_]/g," ").replace(/\b\w/g,r=>r.toUpperCase())}function U(e){if(typeof e!="string")return null;let t=e.match(/rgba?\(\s*([\d.]+)\s*[,\s]\s*([\d.]+)\s*[,\s]\s*([\d.]+)\s*(?:[,/]\s*([\d.]+)(%?))?/i);if(!t)return null;let i=Number(t[1]),s=Number(t[2]),r=Number(t[3]);if(!Number.isFinite(i)||!Number.isFinite(s)||!Number.isFinite(r))return null;let a=t[4]===void 0?1:Number(t[4]);return Number.isFinite(a)?(t[5]==="%"&&(a/=100),{r:i,g:s,b:r,a:m(a,0,1)}):null}function lt(e){let t=U(e);return!t||t.a<=0?null:(t.r*299+t.g*587+t.b*114)/1e3}function j(...e){let t={};for(let i of e)for(let s in i)i[s]!==null&&i[s]!==void 0&&(t[s]=i[s]);return t}function ht(e,t){let i;return function(...r){let a=()=>{clearTimeout(i),e(...r)};clearTimeout(i),i=setTimeout(a,t)}}function O(e,t){if(e.length===t)return e;if(e.length===0||t===0)return[];let i=[];if(t>e.length){let s=(e.length-1)/(t-1);for(let r=0;r=e.length)i.push(e[e.length-1]);else if(o===n)i.push(e[o]);else{let h=e[o]*(1-l)+e[n]*l;i.push(h)}}}else{let s=e.length/t;for(let r=0;rn&&(n=e[h]),l++;if(l===0){let h=Math.min(Math.round(r*s),e.length-1);n=e[h]}i.push(n)}}return i}function P(e,t,i,s){if(!Array.isArray(t))return t;if(t.length<2)return t[0];let r=i.width,a=i.height,o=s&&s.waveformGradient,[n,l,h,c]=o==="horizontal"?[0,0,r,0]:o==="diagonal"?[0,0,r,a]:[0,0,0,a];try{let d=e.createLinearGradient(n,l,h,c);return t.forEach((g,y)=>d.addColorStop(y/(t.length-1),g)),d}catch{return t[0]}}function x(e,t,i,s,r,a){if((Array.isArray(a)?a.some(n=>n>0):a>0)&&typeof e.roundRect=="function"){let n=Math.min(s/2,Math.abs(r)/2),l=h=>m(h,0,n);e.beginPath(),e.roundRect(t,i,s,r,Array.isArray(a)?a.map(l):l(a)),e.fill()}else e.fillRect(t,i,s,r)}function pt(e,t){return(e.barRadius||0)*t}function Et(e,t){let i=pt(e,t);return[i,i,0,0]}function ct(e,t,i,s,r){let a=r/2;e.beginPath(),e.moveTo(t,s-a),e.lineTo(i-a,s-a),e.arc(i-a,s,a,-Math.PI/2,Math.PI/2),e.lineTo(t,s+a),e.arc(t,s,a,Math.PI/2,-Math.PI/2),e.closePath()}function V(e,t,i,s,r){let a=window.devicePixelRatio||1,o=r.barWidth*a,n=r.barSpacing*a,l=Math.floor(t.width/(o+n)),h=O(i,l),c=t.height,d=s*t.width,g=Et(r,a),y=P(e,r.color,t,r),w=P(e,r.progressColor,t,r);e.clearRect(0,0,t.width,t.height),e.fillStyle=y;for(let f=0;ft.width)break;let b=h[f]*c*.9,u=c-b;x(e,p,u,o,b,g)}e.save(),e.beginPath(),e.rect(0,0,d,c),e.clip(),e.fillStyle=w;for(let f=0;fd)break;let b=h[f]*c*.9,u=c-b;x(e,p,u,o,b,g)}e.restore()}function Pt(e,t,i,s,r){let a=window.devicePixelRatio||1,o=r.barWidth*a,n=r.barSpacing*a,l=Math.floor(t.width/(o+n)),h=O(i,l),c=t.height,d=c/2,g=s*t.width,y=pt(r,a),w=[y,y,0,0],f=[0,0,y,y],p=P(e,r.color,t,r),b=P(e,r.progressColor,t,r);e.clearRect(0,0,t.width,t.height),e.fillStyle=p;for(let u=0;ut.width)break;let v=h[u]*c*.45;x(e,k,d-v,o,v,w),x(e,k,d,o,v,f)}e.save(),e.beginPath(),e.rect(0,0,g,c),e.clip(),e.fillStyle=b;for(let u=0;ug)break;let v=h[u]*c*.45;x(e,k,d-v,o,v,w),x(e,k,d,o,v,f)}e.restore()}function At(e,t,i,s,r){let a=t.width,o=t.height,n=o/2,l=o*.35;e.clearRect(0,0,a,o);let h=(c,d,g=1,y=!1)=>{let w=P(e,c,t,r),f=Array.isArray(c)?c[c.length-1]:c;y&&(e.shadowBlur=12,e.shadowColor=f),e.strokeStyle=w,e.lineWidth=d,e.lineCap="round",e.lineJoin="round",e.beginPath(),e.moveTo(0,n);let p=[],b=Math.floor(i.length*g);for(let u=0;u0&&h(r.progressColor,3,s,!0)}function ut(e,t,i,s,r){let a=window.devicePixelRatio||1,o=(r.barWidth||3)*a,n=(r.barSpacing||1)*a,l=Math.floor(t.width/(o+n)),h=O(i,l),c=t.height,d=4*a,g=2*a,y=s*t.width,w=c/2,f=P(e,r.color,t,r),p=P(e,r.progressColor,t,r);e.clearRect(0,0,t.width,t.height);for(let b=0;bt.width)break;let k=h[b]*c*.9,v=Math.floor(k/(d+g));e.fillStyle=u0&&e.fillRect(u,w+L,o,d)}}}function dt(e,t,i,s,r){let a=window.devicePixelRatio||1,o=(r.barWidth||2)*a,n=(r.barSpacing||3)*a,l=Math.floor(t.width/(o+n)),h=O(i,l),c=t.height,d=Math.max(1.5*a,o/2),g=s*t.width,y=c/2,w=P(e,r.color,t,r),f=P(e,r.progressColor,t,r);e.clearRect(0,0,t.width,t.height);for(let p=0;pt.width)break;let u=h[p]*c*.9;e.fillStyle=b0){let d=Math.max(h*2,s*a);e.save(),e.globalAlpha=r.seekHandle&&!c?.7:1,e.fillStyle=P(e,r.progressColor,t,r)||"rgba(255, 255, 255, 0.9)",ct(e,h,d,n,l),e.fill(),e.restore()}}var Mt={bars:V,bar:V,mirror:Pt,line:At,blocks:ut,block:ut,dots:dt,dot:dt,seekbar:Tt};function ft(e,t,i,s,r){(Mt[r.waveformStyle]||V)(e,t,i,s,r)}function mt(e){try{let t=e.getChannelData(0),i=e.sampleRate,s=Ct(t,i);if(s.length<2)return 120;let r=[];for(let l=1;l{let h=60/l,c=Math.round(h/3)*3;c>60&&c<200&&(a[c]=(a[c]||0)+1)});let o=0,n=120;for(let[l,h]of Object.entries(a))h>o&&(o=h,n=parseInt(l));return n<70&&a[n*2]?n*=2:n>160&&a[Math.round(n/2)]&&(n=Math.round(n/2)),n-1}catch(t){return console.warn("[WaveformPlayer] BPM detection failed:",t),null}}function Ct(e,t){let r=[],a=0;for(let o=0;oh&&n>.01){let c=r[r.length-1]||0,d=t*.15;o-c>d&&r.push(o)}a=n*.8+a*.2}return r}function Lt(e,t=1800){let i=e.length/t,s=e.numberOfChannels,r=[];for(let o=0;og&&(g=f),fr[l])&&(r[l]=y)}}let a=z(r);return a>0?r.map(o=>o/a):r}async function G(e,t=1800,i=!1){let s;try{let r=window.AudioContext||window.webkitAudioContext;s=new r;let o=await(await fetch(e)).arrayBuffer(),n=await s.decodeAudioData(o),l=Lt(n,t);l=_t(l);let h=null;return i&&(h=mt(n)),{peaks:l,bpm:h}}finally{s&&s.close()}}function yt(e=1800){let t=[];for(let i=0;it)return e;let s=t/i;return e.map(r=>r*s)}var K=128;function bt(e){let t=document.documentElement,i=document.body;return t.classList.contains(e)||t.classList.contains(`${e}-mode`)||t.classList.contains(`theme-${e}`)||t.getAttribute("data-theme")===e||t.getAttribute("data-color-scheme")===e||i.classList.contains(e)||i.classList.contains(`${e}-mode`)||i.getAttribute("data-theme")===e}function xt(e){let t=0,i=0;for(let s=e;s&&s.nodeType===1&&i<.995;s=s.parentElement){let r=U(getComputedStyle(s).backgroundColor);if(!r||r.a<=0)continue;let a=r.a*(1-i);t+=(r.r*299+r.g*587+r.b*114)/1e3*a,i+=a}return{sum:t,alpha:i}}function Rt(){let e=lt(getComputedStyle(document.body).color);if(e!==null)return e>K?"dark":"light";if(window.matchMedia){if(window.matchMedia("(prefers-color-scheme: dark)").matches)return"dark";if(window.matchMedia("(prefers-color-scheme: light)").matches)return"light"}return"dark"}function R(e){if(bt("dark"))return"dark";if(bt("light"))return"light";try{let t=e&&e.nodeType===1?e:document.body,{sum:i,alpha:s}=xt(t),r=Rt(),a=i+(r==="dark"?0:255)*(1-s);return a>K?"light":a
${o}
${this.options.playIcon}
@@ -18,6 +18,7 @@
${S(this.options.artist)} `:""}
+ ${this.options.showAlbum&&this.options.album?`${S(this.options.album)} `:""}
${this.options.showBPM?`
@@ -61,4 +62,4 @@
${l}
${escapeHtml(this.options.artist)} ` : ''}
+ ${this.options.showAlbum && this.options.album ? `${escapeHtml(this.options.album)} ` : ''}
${this.options.showBPM ? `
@@ -403,6 +404,7 @@ export class WaveformPlayer {
this.ctx = this.canvas.getContext('2d');
this.titleEl = this.container.querySelector('.waveform-title');
this.artistEl = this.container.querySelector('.waveform-artist');
+ this.albumEl = this.container.querySelector('.waveform-album');
// One reference for either placement — artworkPosition is structural
// (like showInfo/buttonStyle) and fixed for the player's lifetime, so
// the image only ever has one home.
@@ -489,6 +491,18 @@ export class WaveformPlayer {
return span;
}
+ /**
+ * Create an album text element matching the initial player markup.
+ *
+ * @returns {HTMLSpanElement} Album text element.
+ * @private
+ */
+ createAlbumElement() {
+ const span = document.createElement('span');
+ span.className = 'waveform-album';
+ return span;
+ }
+
/**
* Reconcile artist metadata and markup for the current track.
*
@@ -517,6 +531,38 @@ export class WaveformPlayer {
this.artistEl.style.display = '';
}
+ /**
+ * Reconcile album metadata and markup for the current track.
+ *
+ * @param {string|null} album - Album text, or a falsy value to remove it.
+ * @private
+ */
+ syncAlbum(album) {
+ this.options.album = album || '';
+
+ if (!this.options.showInfo || !this.options.showAlbum) {
+ this.albumEl?.remove();
+ this.albumEl = null;
+ return;
+ }
+
+ if (!album) {
+ this.albumEl?.remove();
+ this.albumEl = null;
+ return;
+ }
+
+ if (!this.albumEl) {
+ const anchorEl = this.artistEl || this.container.querySelector('.waveform-title');
+ if (!anchorEl) return;
+ this.albumEl = this.createAlbumElement();
+ anchorEl.after(this.albumEl);
+ }
+
+ this.albumEl.textContent = album;
+ this.albumEl.style.display = '';
+ }
+
/**
* Reconcile the play button's artwork image (`artworkPosition: 'button'`).
*
@@ -1289,7 +1335,7 @@ export class WaveformPlayer {
*
* Pauses any current playback, fully resets the audio element (self mode),
* clears error/marker/progress state, merges the new metadata into
- * `this.options`, updates the artist/artwork DOM, then calls
+ * `this.options`, updates the artist/album/artwork DOM, then calls
* {@link WaveformPlayer#load}. Auto-plays the new track unless
* `options.autoplay === false`.
* @param {string} url - Audio URL.
@@ -1304,6 +1350,8 @@ export class WaveformPlayer {
async loadTrack(url, title = null, artist = null, options = {}) {
const hasArtworkOption = Object.prototype.hasOwnProperty.call(options, 'artwork');
const hasArtworkAltOption = Object.prototype.hasOwnProperty.call(options, 'artworkAlt');
+ const hasAlbumOption = Object.prototype.hasOwnProperty.call(options, 'album');
+ const hasShowAlbumOption = Object.prototype.hasOwnProperty.call(options, 'showAlbum');
// Stop current playback and clear state
if (this.isPlaying) {
@@ -1368,6 +1416,13 @@ export class WaveformPlayer {
this.syncArtist(artist);
}
+ // Update album when explicitly provided in the options bag. Album is
+ // not part of the legacy positional signature, so null/undefined means
+ // "leave it alone" while an empty string removes the displayed line.
+ if (hasAlbumOption || hasShowAlbumOption) {
+ this.syncAlbum(this.options.album);
+ }
+
// Update artwork when explicitly provided. The caller can pass an empty
// value to remove existing artwork from the in-place player.
if (hasArtworkOption || hasArtworkAltOption) {
@@ -2202,13 +2257,14 @@ export class WaveformPlayer {
* directly: `WaveformBar.play(event.detail)`.
*
* @private
- * @return {{url:string,title:?string,artist:?string,artwork:?string,player:WaveformPlayer}}
+ * @return {{url:string,title:?string,artist:?string,album:string,artwork:?string,player:WaveformPlayer}}
*/
_buildTrackDetail() {
return {
url: this.options.url,
title: this.options.title,
artist: this.options.artist,
+ album: this.options.album,
artwork: this.options.artwork,
markers: this.options.markers,
waveform: this.options.waveform,
diff --git a/src/js/themes.js b/src/js/themes.js
index c02515a..2f47c13 100644
--- a/src/js/themes.js
+++ b/src/js/themes.js
@@ -313,6 +313,7 @@ export const DEFAULT_OPTIONS = {
autoplay: false,
showControls: true,
showInfo: true,
+ showAlbum: false,
showTime: true,
showHoverTime: false,
// Show a draggable circle handle + hover brightness-lift on the SEEKBAR
@@ -480,7 +481,7 @@ const NUMBERS = {
* @private
*/
const BOOLEANS = [
- 'autoplay', 'showControls', 'showInfo', 'showTime', 'showHoverTime',
+ 'autoplay', 'showControls', 'showInfo', 'showAlbum', 'showTime', 'showHoverTime',
'seekHandle', 'showBPM', 'singlePlay', 'playOnSeek', 'enableMediaSession',
'showMarkers', 'accessibleSeek', 'showPlaybackSpeed'
];
@@ -628,4 +629,4 @@ export function normalizeOptions(options) {
}
return options;
-}
\ No newline at end of file
+}
diff --git a/src/js/utils.js b/src/js/utils.js
index e84f92f..5cf889c 100644
--- a/src/js/utils.js
+++ b/src/js/utils.js
@@ -342,6 +342,7 @@ export function parseDataAttributes(element) {
setBool('autoplay');
setBool('showControls');
setBool('showInfo');
+ setBool('showAlbum');
setBool('showTime');
setBool('showHoverTime');
setBool('seekHandle');
@@ -661,4 +662,4 @@ export function resampleData(data, targetLength) {
}
return result;
-}
\ No newline at end of file
+}
diff --git a/test/player.test.js b/test/player.test.js
index aa193f4..0280de9 100644
--- a/test/player.test.js
+++ b/test/player.test.js
@@ -371,6 +371,41 @@ describe('lifecycle + external events', () => {
expect(player.options.artist).toBe('Artist');
});
+ it('shows album only when showAlbum is enabled', () => {
+ const hidden = track(mount({ album: 'Hidden LP' }));
+ expect(hidden.el.querySelector('.waveform-album')).toBe(null);
+
+ const shown = track(mount({ album: 'Visible LP', showAlbum: true }));
+ expect(shown.el.querySelector('.waveform-album').textContent).toBe('Visible LP');
+ });
+
+ it('loadTrack updates existing album text', async () => {
+ const { el, player } = track(mount({ album: 'First LP', showAlbum: true }));
+ const albumEl = el.querySelector('.waveform-album');
+
+ await player.loadTrack('next.mp3', 'Next', null, {
+ album: 'Second LP',
+ autoplay: false,
+ });
+
+ expect(el.querySelector('.waveform-album')).toBe(albumEl);
+ expect(albumEl.textContent).toBe('Second LP');
+ expect(player.options.album).toBe('Second LP');
+ });
+
+ it('loadTrack removes existing album when album is empty', async () => {
+ const { el, player } = track(mount({ album: 'Album', showAlbum: true }));
+ expect(el.querySelector('.waveform-album')).toBeTruthy();
+
+ await player.loadTrack('next.mp3', 'Next', null, {
+ album: '',
+ autoplay: false,
+ });
+
+ expect(el.querySelector('.waveform-album')).toBe(null);
+ expect(player.options.album).toBe('');
+ });
+
it('loadTrack removes existing artwork when artwork is empty', async () => {
const { el, player } = track(mount({
artwork: 'cover.jpg',
@@ -442,12 +477,13 @@ describe('core additions for controllers (v1.8.0)', () => {
expect(span.textContent).toContain('
{
- const { el, player } = track(mount({ artist: 'DJ Foo' }));
+ it('request-play detail carries the artist and album', () => {
+ const { el, player } = track(mount({ artist: 'DJ Foo', album: 'Club Vol. 1' }));
let detail = null;
el.addEventListener('waveformplayer:request-play', (e) => { detail = e.detail; });
player.play();
expect(detail.artist).toBe('DJ Foo');
+ expect(detail.album).toBe('Club Vol. 1');
});
});
@@ -680,6 +716,16 @@ describe('_build escapes author-supplied values', () => {
.toBe('