MediaWiki:MusicPlayer.js

//Emulator iframe with one of my videos as the default src
//Meant to be used with [Template:MusicPlayer] for stories
document.getElementsByTagName('body')[0].onload = function() {
    if (document.getElementById('musicPlayerAllow') !== null) {
        var rail = document.getElementById('WikiaRail');
        var node = document.createElement("div");
        var textnode = document.createTextNode("Loading iframe...");
        node.appendChild(textnode);
        node.id = "EmulatorFrame";
        node.classList.add("EmulatorFrame");
        node.classList.add("rail-module");
       /* node.style.border = 0;
        node.style.frameborder = 0;
        node.style.height = 120;
        node.style.scrolling = 'no';
        node.src = 'https://www.youtube.com/embed/BHfqz68xEY8?version=3&enablejsapi=1';
        node.style.width = 160;
        node.style.position = "relative";
        node.style.display = "none";*/
        rail.insertBefore(node, document.getElementById('WikiaAdInContentPlaceHolder'));
        
        
        // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    }
};

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      var playerReady = false;
      var isAllowed = false;
      var iframe;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('EmulatorFrame', {
          height: '120',
          width: '160',
          videoId: 'BHfqz68xEY8',
          events: {
            'onReady': onPlayerReady
          }
        });
        iframe = document.getElementById('EmulatorFrame');
        iframe.style.display = "none";
      }
      

function onPlayerReady(event) {
        playerReady = true;
      }
      




function allowMusic() {
    iframe.style.display = 'block';
    isAllowed = !isAllowed;
    //if (playerReady) player.playVideo();
}

var mpa = document.getElementById('musicPlayerAllow');
mpa.setAttribute('onclick', 'allowMusic()');

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function fadein(vol) {
    var i = 0;
    while (i < vol) {
        ++i;
        player.setVolume(i);
        await sleep(20);
    }
}
/*
var vol = player.getVolume();
player.setVolume(0);
player.playVideo();
fadein(vol);
*/

async function fadeout() {
    var vol = player.getVolume();
    var i = vol;
    while (i > 0) {
        --i;
        player.setVolume(i);
        await sleep(20);
    }
    return vol;
}

/*
var vol = fadeout();
player.stopVideo();
player.setVolume(vol);
*/

function elementInView(elem){
  return $(window).scrollTop() < $(elem).offset().top + $(elem).height() ;
}

begins = document.find('musicPlayerBegin');
ends = document.find('musicPlayerEnd');

$(window).scroll(function(){
  begins.each(function() {
      if (elementInView($(this))) {
          var vol = player.getVolume();
          player.setVolume(0);
          player.playVideo();
          fadein(vol);
          return false;
      }
  });
  ends.each(function() {
      if (elementInView($(this))) {
         var vol = fadeout();
         player.stopVideo();
         player.setVolume(vol);
         return false;
      }
  });
});