davideisinger.com

player.js (5328B)

---

 // Track-list buttons and the persistent header control one audio element.
 (() => {
   const header = document.querySelector('#site-header');
   const player = header?.querySelector('audio');
   if (!player) return;
   const heading = header.querySelector('#latest-track-heading');
   const title = header.querySelector('.track-title');
   const source = header.querySelector('.track-source a');
   let controls = [];
   let playRequest = 0;
 
   function timestamp(seconds) {
     if (!Number.isFinite(seconds)) return '0:00';
     return `${Math.floor(seconds / 60)}:${String(Math.floor(seconds % 60)).padStart(2, '0')}`;
   }
 
   function update() {
     const playing = !player.paused && !player.ended;
     for (const track of controls) {
       const selected = player.src === track.url;
       const active = selected && playing;
       track.row.toggleAttribute('data-current-track', selected);
       track.icon.textContent = active ? '⏸' : '▶';
       track.label.textContent = active ? 'Pause' : 'Play';
       track.button.setAttribute('aria-label', `${active ? 'Pause' : 'Play'} ${track.title}`);
       track.state.textContent = selected
         ? (player.error ? 'Error' : `${timestamp(player.currentTime)} / ${Number.isFinite(player.duration) ? timestamp(player.duration) : '–:––'}`)
         : '';
       track.state.title = selected && player.error ? 'Unable to play. Try the player above.' : '';
     }
   }
 
   async function select(track) {
     const request = ++playRequest;
     if (player.src === track.url && !player.paused && !player.ended) {
       player.pause();
       return;
     }
     if (player.src !== track.url) {
       player.pause();
       title.textContent = track.title;
       source.textContent = track.sourceTitle;
       source.href = track.sourceURL;
       player.setAttribute('aria-label', track.title);
       player.src = track.url;
     }
     try {
       await player.play();
     } catch (error) {
       if (request !== playRequest || error.name === 'AbortError') return;
       // Keep the native header controls available for retrying blocked playback.
       track.state.textContent = 'Error';
       track.state.title = `Unable to play ${track.title}. Try the player above.`;
     }
   }
 
   function preparePostTracks() {
     document.querySelectorAll('#content [data-post-music]').forEach(post => {
       post.querySelectorAll('audio[src]').forEach(audio => {
         if (audio.closest('.music-track')) return;
         const url = new URL(audio.src);
         if (!url.pathname.toLowerCase().endsWith('.mp3')) return;
         let name = url.pathname.split('/').pop().slice(0, -4);
         try { name = decodeURIComponent(name); } catch { /* Keep malformed filenames readable. */ }
         const row = document.createElement('div');
         row.className = 'music-track';
         const details = document.createElement('div');
         const trackTitle = document.createElement('p');
         trackTitle.className = 'track-title';
         trackTitle.textContent = name;
         const trackSource = document.createElement('p');
         trackSource.className = 'track-source';
         const link = document.createElement('a');
         link.href = post.dataset.postUrl;
         link.textContent = post.dataset.postTitle;
         trackSource.append('From ', link);
         details.append(trackTitle, trackSource);
         audio.before(row);
         row.append(audio, details);
       });
     });
   }
 
   function enhance() {
     preparePostTracks();
     controls = [];
     document.querySelectorAll('#content .music-track').forEach(row => {
       const audio = row.querySelector('audio');
       const trackTitle = row.querySelector('.track-title');
       const trackSource = row.querySelector('.track-source a');
       if (!audio || !trackTitle || !trackSource) return;
       const button = document.createElement('button');
       button.type = 'button';
       button.className = 'track-toggle';
       const icon = document.createElement('span');
       icon.className = 'track-toggle-icon';
       icon.setAttribute('aria-hidden', 'true');
       const label = document.createElement('span');
       button.append(icon, label);
       const state = document.createElement('span');
       state.className = 'track-playback';
       const track = { row, button, icon, label, state, url: audio.src, title: trackTitle.textContent,
         sourceTitle: trackSource.textContent, sourceURL: trackSource.href };
       button.addEventListener('click', () => select(track));
       audio.hidden = true;
       audio.before(button);
       const heading = document.createElement('div');
       heading.className = 'track-heading';
       trackTitle.before(heading);
       heading.append(trackTitle, state);
       controls.push(track);
     });
     update();
   }
 
   player.addEventListener('play', () => {
     heading.textContent = 'Now playing';
     update();
   });
   for (const event of ['pause', 'ended', 'timeupdate', 'loadedmetadata', 'durationchange', 'emptied', 'error']) {
     player.addEventListener(event, update);
   }
   document.addEventListener('play', event => {
     if (!(event.target instanceof HTMLAudioElement)) return;
     document.querySelectorAll('audio').forEach(audio => {
       if (audio !== event.target) audio.pause();
     });
   }, true);
   document.addEventListener('site:navigated', enhance);
   enhance();
 })();