jmf-player.html

<script type="text/javascript">

// On creer le player
const player = document.createElement('audio')

// Un peu de style pour indiquer d'afficher le player en bas a droite
player.style.display = 'none'
player.style.position = 'fixed'
player.style.bottom = '6px'
player.style.right = '6px'
player.controls = true

// On prend tout les liens de la pages
const audioLinks = [...document.getElementsByTagName('a')]

  // On filtre pour garder que les mp3
  .filter(a => a.href.endsWith('.mp3'))

// On creer une variable qui va dire quelle morceaux est selectionner
const autoplay = () => {
  // On passe au morceau suivant
  const current = Number(document.body.dataset.current || 0) + 1
  document.body.dataset.current = current

  // On regarde si on est rendu au dernier morceau, dans ce cas on a fini !
  if (current >= audioLinks.length) return

  // On dit au player de selectioner le nouveau morceau
  player.src = audioLinks[current].href

  // On commence la lecture
  player.play()
}

// Quand un morceaux fini, on passe au suivant automatiquement
player.addEventListener('ended', autoplay)

// On va gerer le cas ou le fichier est illisible, pour passez au suivant aussi
player.addEventListener('error', autoplay)

// Pour chaques liens:
audioLinks.forEach((a, index) => {

  // on va enregistrer l'index de l'audio choisi pour pouvoir l'afficher dans la page
  a.dataset.index = index

  // on va intercepter les cliques pour changer le comportement
  a.addEventListener('click', event => {

    // on verifie que c'est pas un clique speciale, genre ctrl+click
    // ou clique droit pour pas empecher d'utiliser le lien normalement
    if (event.button  ||
        event.metaKey ||
        event.altKey  ||
        event.ctrlKey ||
        event.shiftKey) return

    // On enregistre le morceau selectionner (pour la lecture automatique du suivant)
    document.body.dataset.current = index

    // si c'est un clique normal, on empeche d'ouvrir la nouvelle page
    event.preventDefault()

    // on dit au player de selectionner le morceau du lien
    player.src = a.href

    // on affiche le player (au cas ou c'est la 1ere fois)
    player.style.display = ''

    // on commence la lecture !
    player.play()
  })
})

// On va creer un peu de style pour que ca gere l'affichage du morceau actif
const style = document.createElement('style')
style.innerHTML = [...audioLinks.keys()]
  .map(index => `body[data-current="${index}"] a[data-index="${index}"]`)
  .join(',\n')
  + ' { color: #3f51b5; outline: 2px dotted; outline-offset: 2px }'

// On insert le fichier audio et le style dans la page:
document.head.append(style)
document.body.append(player)
</script>