Add album display option

README.md

@@ -27,15 +27,15 @@ Load from a CDN and it auto-initializes every `[data-waveform-player]` on the pa
 <link rel="stylesheet" href="https://unpkg.com/@arraypress/waveform-player/dist/waveform-player.css">
 <script src="https://unpkg.com/@arraypress/waveform-player/dist/waveform-player.min.js"></script>
 
-<div data-waveform-player data-url="track.mp3" data-title="My Song" data-artist="The Artist"></div>
+<div data-waveform-player data-url="track.mp3" data-title="My Song" data-artist="The Artist" data-album="The Album" data-show-album="true"></div>
 ```
 
 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

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 {
         <div class="waveform-text">
           <span class="waveform-title"></span>
           ${this.options.artist ? `<span class="waveform-artist">${escapeHtml(this.options.artist)}</span>` : ""}
+          ${this.options.showAlbum && this.options.album ? `<span class="waveform-album">${escapeHtml(this.options.album)}</span>` : ""}
         </div>
         <div class="waveform-meta" style="display: flex; align-items: center; gap: 1rem;">
           ${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,