soundmap_theme/carnaval/js/hotsPlayer.js

function HotsPlayer(){

  var self = this,
      pl = this,
      sm = soundManager; // soundManager instance

  this.files = [];
  this.sounds = [];
  this.graphicPaths = {};
  this.ready = false;
  this.listeners = [];

  this.config = {
    playerDomID: '#player',
    playerWidth: 200,
    playerHeight: 100,
    canvasHeight:200,
    canvasWidth:300,
    autoPlay: true,
    filesDomID: '#track-list',
    buttonHeight: 10,
    volume: 80,
    random: false,
    graphic: {
      circleWidth: 20,
      waitColor: 'white',
      loadedColor: 'red',
      playedColor: 'green',
      controlsColor: '#333333',
    }

  };

  this.currentTime = 0;
  this.currentDuration = 0;
  this.currentBytes = 0;
  this.currentTotalBytes = 0;
  this.state = 'waiting';
  this.currentIndex = -1;

  this.events = {
    onfinish: function() {
        self.playNext();
      },
    whileplaying: function() {
        self.currentTime = this.position;
        self.currentDuration = this.durationEstimate;
        self.redrawPlay();
      },
    whileloading: function() {
        self.currentBytes = this.bytesLoaded;
        self.currentTotalBytes = this.bytesTotal;
        self.redrawLoad();
    },
  };

  this.playNext = function() {
    var pos = self.currentIndex + 1;
    if (pos == self.sounds.length){
      pos = 0;
    }
    if (self.config.random){
      pos = Math.floor((Math.random()*(self.sounds.length -1 )) + 0);
    }
    self.startPlay(pos);
  };

  this.playPrevious = function() {
    var pos = self.currentIndex - 1;
    if (pos == -1 ){
      pos = self.sounds.length - 1;
    }
    if (self.config.random){
      pos = Math.floor((Math.random()*(self.sounds.length -1 )) + 0);
    }
    self.startPlay(pos);
  };

  this.redrawLoad = function() {
      var graphics = self.config.graphic;
      var path = self.config.graphic.loadingBar;
      var radius = self.config.graphic.loadingRadius;
      path.remove();
      if(self.currentBytes ==self.currentTotalBytes ){
        //path = self.drawArc(radius, 100, 100);
      }else{
        path = self.drawArc(radius, self.currentBytes, self.currentTotalBytes);
        path.strokeColor = graphics.loadedColor;
        path.strokeWidth = graphics.circleWidth - 5;
        path.opacity = 0.6;
        self.config.graphic.loadingBar = path;
      }
      paper.view.draw();
  };


  this.redrawPlay = function() {
      var graphics = self.config.graphic;
      var angle = (2 * Math.PI) / self.currentDuration;
      var path = self.config.graphic.playingBar;
      var radius = self.config.graphic.playingRadius;
      path.remove();
      paper.view.draw();
      path = self.drawArc(radius, self.currentTime, self.currentDuration);
      path.strokeColor = graphics.playedColor;
      path.strokeWidth = graphics.circleWidth - 5 ;
      path.opacity = 0.6;
      self.config.graphic.playingBar = path;
      paper.view.draw();
  };

  this.init = function() {

    self.loadSongs(self.config.filesDomID);
    self.loadSounds();

    self.autoStart();
    self.ready = true;
  };

  this.startPlay = function(index){
    var song = self.files[index];
    self.clearBars();
    sm.play(song.id, {volume:self.config.volume});
    self.currentIndex = index;
    self.state = 'playing';
    var uri = song.file;
    jQuery('.hotsPlayer-controls-down a', self.config.playerDomID).attr('href', uri);
    var evt = {};
    evt.target = self.activeFile(song.id);
    self.trigger('startPlay', evt);
    jQuery('.hotsPlayer-controls-play', self.config.playerDomID).addClass('pause');
  };

  this.activeFile = function(songID) {
    jQuery(self.config.filesDomID + ' a').removeClass('active');
    var idRoto = songID.split('_');
    var active = jQuery(self.config.filesDomID + ' a[data-id="' + idRoto[1] + '"]');
    active.addClass('active');
    return active[0];
  }

  this.clearBars = function() {
      var path = self.config.graphic.playingBar;
      var loadPath = self.config.graphic.loadingBar;
      path.remove();
      loadPath.remove();
      paper.view.draw();
  };

  this.starPlayByID = function(songID){
    sm.play(songID, {volume:self.config.volume});
    var index = self.searchByIndex(songID);
    self.clearBars();
    self.currentIndex = index;
    self.state = 'playing';
    var song = self.files[index];
    var uri = song.file;
    jQuery('.hotsPlayer-controls-down a', self.config.playerDomID).attr('href', uri);
    jQuery('.hotsPlayer-controls-play', self.config.playerDomID).addClass('pause');
    var evt = {};
    evt.target = self.activeFile(song.id);
    self.trigger('startPlay', evt);
  };

  this.searchByIndex = function(id) {
    var salir = false;
    var pos = 0;
    while(!salir && pos < self.files.length){
      if (self.files[pos].id == id){
        salir = true;
      }else{
        pos += 1;
      }
    };
    return pos;
  };

  this.stop = function(){
    if (self.state == "playing" || self.state == "paused"){
      var song = self.files[self.currentIndex];
      sm.stop(song.id);
      self.state = 'waiting';
      jQuery('.hotsPlayer-controls-play', self.config.playerDomID).removeClass('pause');
    }
  };

  this.handleClick = function(e){
    var elemento = e.currentTarget;
    var tipoControl = elemento.dataset.controlType;

    switch (tipoControl){
      case 'play':
        e.preventDefault();
        if (self.state == 'waiting'){
          if (self.currentIndex == -1){
            self.startPlay(0);
          }else{
            self.startPlay(self.currentIndex);
          }
        }else if (self.state == "playing"){
          self.pause();
        }else if (self.state == 'paused'){
          self.resume();
        }
      break;
      case 'random':
        e.preventDefault();
        if (self.config.random){
          jQuery('.hotsPlayer-controls-random', self.config.playerDomID).removeClass('active');
          self.config.random = false;
        }else{
          jQuery('.hotsPlayer-controls-random', self.config.playerDomID).addClass('active');
          self.config.random = true;
        }
      break;
      case 'next':
        e.preventDefault();
        self.stop();
        self.playNext();
      break;
      case 'prev':
        e.preventDefault();
        self.stop();
        self.playPrevious();
      case 'down':
      break;
    };
  };

  this.resume = function() {
    var song = self.files[self.currentIndex];
    sm.resume(song.id);
    self.state = 'playing';
    jQuery('.hotsPlayer-controls-play', self.config.playerDomID).addClass('pause');
  }

  this.pause = function() {
    var song = self.files[self.currentIndex];
    sm.pause(song.id);
    self.state = 'paused';
    jQuery('.hotsPlayer-controls-play', self.config.playerDomID).removeClass('pause');
  };

  this.draw = function() {
        // Create an empty project and a view for the canvas:
    self.insertDomElements();
    var t =jQuery('canvas', self.config.playerDomID);
    paper.setup(jQuery('canvas', self.config.playerDomID)[0]);
    var graphics = self.config.graphic;
    var centerX = self.config.canvasWidth / 2;
    var centerY = self.config.canvasHeight / 2;
    var radius = (((self.config.playerWidth < self.config.playerHeight) ? self.config.playerWidth : self.config.playerHeight ) / 2) - (graphics.circleWidth/2);
    graphics.radius = radius;
    graphics.centerX = centerX;
    graphics.centerY = centerY;

    var waitCircle = new paper.Path.Circle(new paper.Point(centerX,centerY), radius);
    waitCircle.strokeColor ='white';
    waitCircle.strokeWidth = graphics.circleWidth;

    //Positioning Controls

    var alturaCirculo = (radius * 2) + 24;
    var espacio = (alturaCirculo - (self.config.buttonHeight * 4)) / 3;

    jQuery(self.config.playerDomID).width(self.config.canvasWidth).height(self.config.canvasHeight).css('position', 'relative');
    jQuery('.hotsPlayer-controls').width(self.config.canvasWidth).height(self.config.canvasHeight);
    jQuery('.hotsPlayer-controls-play', self.config.playerDomID).css('top', centerY-10).css('left',centerX-10).height(20).width(20);
    var top =  centerY - radius - self.config.buttonHeight;
    var left = centerX + radius + 18;
    jQuery('.hotsPlayer-controls-random', self.config.playerDomID).css('top',top).css('left', left - 15);

    if (self.config.random){
      jQuery('.hotsPlayer-controls-random', self.config.playerDomID).addClass('active');
    }

    top += espacio + self.config.buttonHeight;
    jQuery('.hotsPlayer-controls-next', self.config.playerDomID).css('top',top).css('left', left);
    top += espacio + self.config.buttonHeight;
    jQuery('.hotsPlayer-controls-prev', self.config.playerDomID).css('top',top).css('left', left);
    top += espacio + self.config.buttonHeight;
    jQuery('.hotsPlayer-controls-down', self.config.playerDomID).css('top',top).css('left', left - 15);
    left = centerX - radius - 18 - self.config.buttonHeight;
    top = centerY - radius - 10;
    jQuery('.hotsPlayer-controls-vol-up', self.config.playerDomID).css('top',top).css('left', left);
    top += espacio * 3  + self.config.buttonHeight * 3;
    jQuery('.hotsPlayer-controls-vol-down', self.config.playerDomID).css('top',top).css('left', left);

    jQuery('.hotsPlayer-controls>div>a').click(self.handleClick);

    var volumenBackBar = new paper.Path.Line(new paper.Point(left + 5, centerY - radius + 10 ), new paper.Point(left + 5,centerY + radius - 10));

    volumenBackBar.strokeWidth = 8;
    volumenBackBar.strokeColor = 'white';
    volumenBackBar.opacity = 0.4;
    var distanciaVolumen = (centerY + radius - 10) - (centerY - radius + 10);
    var longitudBarra = (distanciaVolumen / 100) * self.config.volume;
    var volumenBar = new paper.Path.Line(new paper.Point(left + 5, centerY + radius - 10), new paper.Point(left + 5, centerY + radius - 10 - longitudBarra));
    volumenBar.strokeWidth = 8;
    volumenBar.strokeColor = 'white';
    volumenBar.opacity = 0.6;

    var playRadius = radius -10;
    var start = new paper.Point(centerX, centerY - playRadius);

    var pR = new paper.Path.Arc(start, start, start);
    pR.strokeColor = 'red';
    pR.strokeWidth = 25;
    pR.opacity = 0.6;

    graphics.loadingBar = pR;
    graphics.loadingRadius = radius - 10;

    var sR = radius +5 ;

    start = new paper.Point(centerX, centerY - sR);
    //end = new paper.Point(centerX, centerY + sR);
    //through = new paper.Point(centerX + sR, centerY);
    var nn = new paper.Path.Arc(start, start, start);
    nn.strokeColor = 'green';
    nn.strokeWidth = 15;
    nn.opacity = 0.6;

    graphics.playingBar = nn;
    graphics.playingRadius = radius + 6;


    paper.view.draw();

    self.autoStart();
    self.ready = true;

  };

  this.drawArc = function(radio, valor, total){


    var centerX = self.config.graphic.centerX;
    var centerY = self.config.graphic.centerY;
    var ratio = (valor % total)/ total;

    var angulo =Math.round(360 * ratio);

    var vPoint = new paper.Point({length: radio, angle:-90});
    var start = new paper.Point(centerX + vPoint.x, centerY + vPoint.y);
    var middle = vPoint.rotate(angulo/2);
    var end = vPoint.rotate(angulo);
    var middlePoint = new paper.Point(centerX + middle.x, centerY + middle.y);
    var endPoint = new paper.Point(centerX + end.x, centerY + end.y);


    return new paper.Path.Arc(start, middlePoint, endPoint);

  }




  this.autoStart = function() {
    if (self.ready && self.config.autoPlay) {
      self.startPlay(0);
      //window.setInterval(function(){self.currentTime = self.currentTime + 2; self.currentDuration = 50; self.redrawPlay();},1000);
    };
  };

  this.insertDomElements = function() {

    var playerDom = jQuery(self.config.playerDomID);

    var canvas = document.createElement('canvas');
    canvas.height = self.config.canvasHeight;
    canvas.width = self.config.canvasWidth;

    var controls = document.createElement('div');
    controls.className="hotsPlayer-controls";

    var controlPlay = document.createElement('div');
    controlPlay.className="hotsPlayer-controls-play hotsControl";
    var controlPlayLink = document.createElement('a');
    controlPlayLink.dataset.controlType = "play";
    controlPlayLink.href="#";
    controlPlay.appendChild(controlPlayLink);

    var controlRandom = document.createElement('div');
    controlRandom.className = 'hotsPlayer-controls-random hotsControl';
    var controlRandomLink = document.createElement('a');
    controlRandomLink.dataset.controlType = "random";
    controlRandomLink.href="#";
    controlRandom.appendChild(controlRandomLink);

    var controlNext = document.createElement('div');
    controlNext.className = 'hotsPlayer-controls-next hotsControl'
    var controlNextLink = document.createElement('a');
    controlNextLink.dataset.controlType = "next";
    controlNextLink.href="#";
    controlNext.appendChild(controlNextLink);

    var controlPrev = document.createElement('div');
    controlPrev.className = 'hotsPlayer-controls-prev hotsControl'
    var controlPrevLink = document.createElement('a');
    controlPrevLink.dataset.controlType = "prev";
    controlPrevLink.href="#";
    controlPrev.appendChild(controlPrevLink);

    var controlDown = document.createElement('div');
    controlDown.className = 'hotsPlayer-controls-down hotsControl'
    var controlDownLink = document.createElement('a');
    controlDownLink.dataset.controlType = "down";
    controlDownLink.href="#";
    controlDown.appendChild(controlDownLink);

    var controlVolDown = document.createElement('div');
    controlVolDown.className = 'hotsPlayer-controls-vol-down hotsControl'
    var controlVolDownLink = document.createElement('a');
    controlVolDownLink.dataset.controlType = "vol-down";
    controlVolDownLink.href="#";
    controlVolDown.appendChild(controlVolDownLink);

    var controlVolUp = document.createElement('div');
    controlVolUp.className = 'hotsPlayer-controls-vol-up hotsControl'
    var controlVolUpLink = document.createElement('a');
    controlVolUpLink.dataset.controlType = "vol-up";
    controlVolUpLink.href="#";
    controlVolUp.appendChild(controlVolUpLink);

    controls.appendChild(controlPlay);
    controls.appendChild(controlRandom);
    controls.appendChild(controlNext);
    controls.appendChild(controlPrev);
    controls.appendChild(controlDown);
    controls.appendChild(controlVolDown);
    controls.appendChild(controlVolUp);

    playerDom.append(canvas);
    playerDom.append(controls);

  };


  this.loadSounds = function() {
      this.sounds = [];
      for(var i in this.files)
      {
        var song = this.files[i];
        this.sounds.push(sm.createSound({
                        id: song.id,
                        url: song.file,
                        volume: self.config.volume,
                        onfinish: self.events.onfinish,
                        whileplaying: self.events.whileplaying,
                        whileloading: self.events.whileloading
                        }));
      }
  };

  this.handleFileClick = function(e) {
    e.preventDefault();
    var elemento = e.currentTarget;
    var id = elemento.dataset.id;
    self.changeSong('hotsPlayer_' + id);
  };

  this.changeSong = function(songID) {
    self.stop();
    self.starPlayByID(songID);
  };

  this.loadSongs = function(filesDomID) {
    var files = [];
    if(filesDomID == null){
      return;
    }
    jQuery(filesDomID + ' a').click(self.handleFileClick);

    jQuery(filesDomID + ' a').each(function (index, Element){
      var link = Element.href;
      var songID = Element.dataset.id;
      self.files.push({
          file : link,
          id : 'hotsPlayer_' + songID
      });
    });
  };

  this.registerEvent = function(type, func){
    if (func != null) {
      var listeners = self.listeners[type];
        if (!listeners) {
            listeners = [];
            self.listeners[type] = listeners;
        }
        var listener = {func: func};
        listeners.push(listener);
    }
  };

  this.trigger = function(type, obj) {
    var listeners = self.listeners[type];
        if (listeners) {
          var callback = listeners[0];
          var evt = {};
          evt.obj = self;
          evt.info = obj;
          callback.func.apply(self, [evt]);
        }
  };
}  // Function HostsPlayer

paper.install(window);

var hotsPlayer;
hotsPlayer = new HotsPlayer();


// hook into SM2 init
soundManager.onready(hotsPlayer.init);