<script>'use strict';
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError('Cannot call a class as a function');
}
}
var SG_COLOR_OFF = '#4d4d4d';
var SG_COLOR_ON = '#29ABE2';
var Player = function () {
function Player(song) {
_classCallCheck(this, Player);
this.SPIN_STATE = 0;
this.NEEDLE_STATE = 0;
this.NEEDLE_SWINGDOW = 44 - 18;
this.volume = 40;
this.needleDrag = false;
this.recordScratch = false;
this.volumeDrag = false;
this.song = song || null;
this.actors = {};
this.tweens = {};
this.draggables = {};
this.masterTl = new TimelineMax();
this.sound = new buzz.sound(this.song, {
preload: true,
autoplay: false,
loop: false
});
this.scratchSound = new buzz.sound('https://sites.google.com/site/usesitesto/file/Franky-mys2010.mp3', {
preload: true,
autoplay: false,
loop: true
});
this.actors.record = document.querySelector('#Record');
this.actors.vinyl = this.actors.record.querySelector('#vinyl');
this.actors.recordPlateLight = this.actors.record.querySelector('#play-state-ring');
this.actors.startButton = document.querySelector('#StartButton');
this.actors.startButtonLight = this.actors.startButton.querySelector('#on-light');
this.actors.volumeControl = document.querySelector('#VolumeControl');
this.actors.volumeKnob = this.actors.volumeControl.querySelector('#volume-knob');
this.actors.volumeKnobLight = this.actors.volumeKnob.querySelector('#knob-light');
this.actors.volumeTrack = this.actors.volumeControl.querySelector('#volume-track');
this.actors.volumeLightLevel = this.actors.volumeControl.querySelector('#light-level');
this.actors.needleArperture = document.querySelector('#NeedleArperture');
this.actors.needleArm = this.actors.needleArperture.querySelector('#needle-arm');
this.actors.needleFolcrum = this.actors.needleArperture.querySelector('#needle-folcrum-light');
this.actors.needleHeadHandle = this.actors.needleArperture.querySelector('#needle-head-handle');
this.actors.needleHeadLights = document.querySelectorAll('.needle-head-lights');
}
Player.prototype.setStage = function setStage() {
TweenMax.set(this.actors.startButtonLight, { fill: SG_COLOR_OFF });
TweenMax.set(this.actors.volumeKnob, { y: '+=' + this.actors.volumeTrack.getBBox().height / 2 });
TweenMax.set(this.actors.volumeKnobLight, { stroke: SG_COLOR_OFF });
TweenMax.set(this.actors.volumeLightLevel, {
scaleY: 0,
transformOrigin: '50% 100%'
});
TweenMax.set(this.actors.recordPlateLight, { autoAlpha: 0 });
TweenMax.set(this.actors.vinyl, { transformOrigin: '50% 50%' });
TweenMax.set(this.actors.needleArm, { transformOrigin: '22px 62px' });
this._setupTweens();
this._setupListeners();
};
Player.prototype._setupTweens = function _setupTweens() {
var self = this;
this.tweens.vinyl = new TimelineMax({
repeat: -1,
paused: true
});
this.tweens.vinyl.to(this.actors.vinyl, 3, {
transformOrigin: '50% 50%',
rotation: '+=360',
ease: Linear.easeNone
});
this.tweens.volumeKnob = TweenMax.fromTo(this.actors.volumeKnob, 1, { y: this.actors.volumeTrack.getBBox().height / 2 }, {
y: -1 * (this.actors.volumeTrack.getBBox().height / 2),
ease: Linear.easeNone,
paused: true
});
this.tweens.volumeLightLevel = TweenMax.fromTo(this.actors.volumeLightLevel, 1, {
scaleY: 0,
transformOrigin: '50% 100%'
}, {
scaleY: 1,
paused: true,
transformOrigin: '50% 100%',
ease: Linear.easeNone
});
this.draggables.volumeKnob = Draggable.create(this.actors.volumeKnob, {
type: 'y',
bounds: {
minY: this.actors.volumeTrack.getBBox().height / 2,
maxY: -1 * (this.actors.volumeTrack.getBBox().height / 2)
},
onDragEnd: function onDragEnd(e) {
var range = this.minY - this.maxY, yval = this.y - this.maxY, perc = yval * 100 / range;
self.setVolume(perc);
}
});
this.draggables.needleArm = Draggable.create(this.actors.needleArm, {
type: 'rotation',
throwProps: true,
bounds: {
minRotation: 0,
maxRotation: 44
},
onDrag: function onDrag(e) {
self._needleUpdate(this, self);
},
onDragStart: function onDragStart(e) {
self.needleDrag = true;
if (self.SPIN_STATE == 1 && self.NEEDLE_STATE == 1) {
self.sound.pause();
}
},
onDragEnd: function onDragEnd(e) {
if (this.rotation >= 18 && this.rotation <= 44) {
var pos = (this.rotation - 18) / self.NEEDLE_SWINGDOW;
self.sound.setPercent(pos * 100);
if (self.SPIN_STATE == 1) {
self.sound.play();
}
}
self.needleDrag = false;
}
});
this.draggables.vinyl = Draggable.create(this.actors.vinyl, {
type: 'rotation',
onDrag: function onDrag(e) {
},
onDragStart: function onDragStart(e) {
self.recordScratch = true;
self.tweens.vinyl.pause();
if (self.SPIN_STATE == 1 && self.NEEDLE_STATE == 1) {
self.sound.pause();
self.scratchSound.play();
}
},
onDragEnd: function onDragEnd(e) {
if (self.SPIN_STATE == 1 && self.NEEDLE_STATE == 1) {
self.tweens.vinyl.resume();
self.scratchSound.pause();
self.scratchSound.setPercent(0);
self.sound.play();
}
self.recordScratch = false;
}
});
};
Player.prototype._setupListeners = function _setupListeners() {
var _this = this;
this.actors.startButton.addEventListener('click', function () {
_this.startStop();
});
this.sound.bind('timeupdate', function (e) {
if (_this.NEEDLE_STATE == 1 && _this.SPIN_STATE == 1 && !_this.needleDrag) {
var songProgress = _this.sound.getPercent();
if (songProgress === 100) {
_this.hangUpNeedle();
_this.startStop();
} else {
_this._moveNeedleTo(18 + _this.NEEDLE_SWINGDOW * (songProgress / 100));
}
}
});
};
Player.prototype._needleUpdate = function _needleUpdate(tween, me) {
var rotation = tween.target._gsTransform.rotation;
var lights = [
me.actors.needleFolcrum,
me.actors.needleHeadLights
];
if (rotation >= 18 && rotation <= 44) {
TweenMax.to(lights, 0.3, { fill: SG_COLOR_ON });
me.NEEDLE_STATE = 1;
} else {
TweenMax.to(lights, 0.3, { fill: SG_COLOR_OFF });
me.NEEDLE_STATE = 0;
}
};
Player.prototype.startStop = function startStop() {
if (this.SPIN_STATE) {
this.tweens.vinyl.pause();
TweenMax.set(this.actors.startButtonLight, { fill: SG_COLOR_OFF });
TweenMax.to(this.actors.recordPlateLight, 2, { autoAlpha: 0 });
if (this.NEEDLE_STATE === 1) {
this.sound.pause();
}
this.SPIN_STATE = 0;
} else {
this.setVolume(this.volume);
this.tweens.vinyl.resume();
TweenMax.set(this.actors.startButtonLight, { fill: SG_COLOR_ON });
TweenMax.to(this.actors.recordPlateLight, 1.4, {
autoAlpha: 1,
delay: 0.25
});
if (this.NEEDLE_STATE === 1) {
this.sound.play().fadeTo(this.volume, 500);
} else if (this.NEEDLE_STATE === 0) {
var autoPlay = true;
this.loadNeedle(autoPlay);
}
this.SPIN_STATE = 1;
}
};
Player.prototype.setVolume = function setVolume(val) {
if (val < 0) {
val = 0;
}
if (val > 100) {
val = 100;
}
this.volume = val;
this.tweens.volumeKnob.progress(this.volume / 100);
this.tweens.volumeLightLevel.progress(this.volume / 100);
this.sound.setVolume(this.volume);
if (this.volume > 0) {
TweenMax.set(this.actors.volumeKnobLight, { stroke: SG_COLOR_ON });
} else {
TweenMax.set(this.actors.volumeKnobLight, { stroke: SG_COLOR_OFF });
}
};
Player.prototype._moveNeedleTo = function _moveNeedleTo(val, callback) {
callback = callback || null;
if (val < 0) {
val = 0;
}
if (val > 100) {
val = 100;
}
var origin = '22px 62px';
TweenMax.to(this.actors.needleArm, 1, {
rotation: val,
transformOrigin: origin,
ease: Linear.easeNone,
onUpdate: this._needleUpdate,
onUpdateParams: [
'{self}',
this
],
onComplete: callback
});
};
Player.prototype.loadNeedle = function loadNeedle(andPlay) {
var _this2 = this;
andPlay = andPlay || false;
var needleOrigin = '22px 62px';
this._moveNeedleTo(18, function () {
if (andPlay) {
if (_this2.tweens.volumeKnob.progress() == 0)
_this2.setVolume(_this2.volume);
_this2.sound.setPercent(0);
_this2.sound.play().fadeTo(_this2.volume, 500);
}
});
};
Player.prototype.hangUpNeedle = function hangUpNeedle() {
this._moveNeedleTo(0);
this.sound.setPercent(0);
};
Player.prototype.init = function init() {
this.setStage();
console.log('initialized...');
};
return Player;
}();
var player = new Player('https://sites.google.com/site/belajarakbar/music/betawi-M2010s.mp3');
player.init();</script>
Memasang Kode Test Script :
