olivesbdh/js/audioplayer.js

(function (Drupal, once) {

  async function getAudioSourceFromNode(url) {
    const res = await fetch(url, {
      headers: { 'X-Requested-With': 'XMLHttpRequest' }
    });

    const html = await res.text();
    const doc = new DOMParser().parseFromString(html, 'text/html');

    const source = doc.querySelector(
      'audio[data-able-player] source[type="audio/mpeg"]'
    );

    const title =
      doc.querySelector(
        'h1.title.page-title span[property="dcterms:title"]'
      )?.textContent.trim()
      ||
      doc.querySelector('meta[property="og:title"]')?.content
      ||
      doc.querySelector('title')?.textContent
      ||
      '';

    return { src: source?.src, title };
  }

  function playAbleAudio(src) {
    const audio = document.getElementById('global-able-player');
    if (!audio) return;

    const source = audio.querySelector('source');
    source.src = src;

    audio.load();

    if (audio.ablePlayer) {
      audio.ablePlayer.refreshControls();
      audio.ablePlayer.playMedia();
    } else {
      audio.play();
    }

    document.getElementById('global-audio-wrapper')
      ?.classList.remove('is-hidden');
  }

  Drupal.behaviors.ablePlayerRemoteLoad = {
    attach(context) {
      once('able-player-fetch', '.js-play-audio-from-node', context)
        .forEach(link => {

          link.addEventListener('click', async e => {
            e.preventDefault();

            const { src, title } = await getAudioSourceFromNode(link.href);

            if (!src) {
              console.warn('No Able Player audio found on page');
              return;
            }

            playAbleAudio(src);

            const titleEl = document.getElementById('global-audio-title');
            if (titleEl && title) {
              titleEl.textContent = title;
            }
          });
        });
    }
  };

})(Drupal, once);