m-labelize/assets/labelize.js

var current = undefined
const progressMargin = 50;
var progress = undefined;
window.addEventListener('DOMContentLoaded', (event) => {
    progress = document.getElementById('player-progress');
    document.getElementById('player-progress').addEventListener('click', (e) => {
      if(current){
        let media = current.getElementsByTagName('audio')[0];
        media.currentTime = e.layerX * media.duration / progress.offsetWidth;

      }
    });

    let toggler = document.getElementById('player-toggler');
    toggler.setAttribute('title','afficher/masquer la liste des morceaux');
    toggler.addEventListener('click', (e) => {
      document.getElementsByTagName('ul')[0].classList.toggle('invisible');
    })
});


function togglePlay(src) {
    let media = src.getElementsByTagName('audio')[0];
    let icon = src.getElementsByTagName('img')[0];
    if (current){//stops current media and reset its play icon
      pause();
    }
    if(current != src){
      //sets current media icon and plays media
      icon.setAttribute('src','assets/pause.png');
      media.play();
      progress.max = Math.floor(media.duration);
      current = src;
      document.getElementById('time-info').style.visibility = 'visible';
    }
    else{
      current = undefined;
    }
}

function pause(){
  current.getElementsByTagName('audio')[0].pause();
  current.getElementsByTagName('img')[0].setAttribute('src','assets/play.png');
  document.getElementById('time-info').style.visibility = 'hidden';
}

function updateProgress(media){
  progress.value = Math.floor(media.currentTime);
  document.getElementById('time-info').innerHTML =
       prettyDuration(media.currentTime) + ' / ' + prettyDuration(media.duration);
}

function prettyDuration(duration) {
    let sec = Math.floor( duration );
    let min = Math.floor( sec / 60 );
    min = min >= 10 ? min : '0' + min;
    sec = Math.floor( sec % 60 );
    sec = sec >= 10 ? sec : '0' + sec;
    return min + ':' + sec;
}