play-flac.js

console.info('flac player init start');

const copy = (el, props) => {
  for (let [key, val] of Object.entries(props)) {
    el[key] = val;
  }
};

const audioElements = [];

const initElement = element => {

    element.classList.add('audio_loaded');
    const audio = document.createElement('audio');
    const parent = element.parentNode;
    audioElements.push(audio);
    audio.setAttribute('src', element.getAttribute('href'));
    audio.setAttribute('controls', 'controls');
    audio.setAttribute('title', element.innerText);
    //copy(audio.style, { display: 'inline-block', height: '30px', width: 'calc(100% - 38px)' });
    //copy(element.style, { display: 'none' });
    copy(audio.style, { display: 'inline-block', marginRight: '30px', maxHeight: '30px' });
    copy(element.style, { display: 'inline-block', maxWidth: '100px', maxHeight: '30px', fontSize: '10px', textOverflow: 'ellipsis' });
    parent.querySelector(':scope .page_doc_description_row').style.display = 'none';
    parent.insertBefore(audio, element);

    audio.addEventListener('play', event => {
      for (let el of audioElements) {
        if (el !== event.target) {
          el.pause();
        }
      }
    });

    audio.addEventListener('ended', event => {
      const index = audioElements.indexOf(event.target);
      if (index < audioElements.length) {
        audioElements[index].play();
      }
    });

    audio.addEventListener('volumechange', event => {
      for (let el of audioElements) {
        el.volume = event.target.volume;
      }
    });

    chrome.runtime.sendMessage({ showAction: true });
    console.info('flac player init end');

};

const initPage = () => {
  for (let target of document.querySelectorAll('a.page_doc_title:not(.audio_loaded)'))
    if (target.innerText.match(/^.+.flac$/))
      initElement(target)
};

document.addEventListener('DOMContentLoaded', initPage);
window.addEventListener('scroll', initPage);