The Song Fight Bulletin Board

Code: Select all

document.addEventListener('DOMContentLoaded', function() {
  if (typeof Audio !== 'function') return;
  var links = document.querySelectorAll('a[href$=".mp3"]');
  var active;
  var setupPlayer = function(link) {
    var btn = document.createElement('a');
    btn.innerHTML = "\u25ba";
    btn.style.cursor = 'pointer';
    btn.style.fontSize = '80%';
    btn.style.padding = '2px';
    btn.style.marginRight = '1ex';
    btn.style.border = 'solid 1px '+ btn.style.color;
    btn.style.borderRadius = '2px';
    btn.style.textDecoration = 'none';
    btn.addEventListener('click', function(e) {
      if (active) {
        active.button.style.display = 'inline';
        active.player.parentNode.removeChild(active.player);
        active = null;
      }
      btn.style.display = 'none';
      var player = document.createElement('audio');
      player.setAttribute('autoplay', '');
      player.setAttribute('controls', '');
      player.setAttribute('src', link.getAttribute('href'));
      player.style.display = 'block';
      link.parentNode.appendChild(player);
      active = {
        player: player,
        button: btn
      };
    });
    link.parentNode.insertBefore(btn, link);
  }
  for (var i = 0; i < links.length; i++) {
    setupPlayer(links[i]);
  }
});