daily pastebin goal
32%
SHARE
TWEET

Untitled

a guest Dec 15th, 2018 218 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. (function (global, factory) {
  2.     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  3.     typeof define === 'function' && define.amd ? define(factory) :
  4.     (global.Rythm = factory());
  5. }(this, (function () { 'use strict';
  6.  
  7. var classCallCheck = function (instance, Constructor) {
  8.   if (!(instance instanceof Constructor)) {
  9.     throw new TypeError("Cannot call a class as a function");
  10.   }
  11. };
  12.  
  13. var createClass = function () {
  14.   function defineProperties(target, props) {
  15.     for (var i = 0; i < props.length; i++) {
  16.       var descriptor = props[i];
  17.       descriptor.enumerable = descriptor.enumerable || false;
  18.       descriptor.configurable = true;
  19.       if ("value" in descriptor) descriptor.writable = true;
  20.       Object.defineProperty(target, descriptor.key, descriptor);
  21.     }
  22.   }
  23.  
  24.   return function (Constructor, protoProps, staticProps) {
  25.     if (protoProps) defineProperties(Constructor.prototype, protoProps);
  26.     if (staticProps) defineProperties(Constructor, staticProps);
  27.     return Constructor;
  28.   };
  29. }();
  30.  
  31. var Analyser = function Analyser() {
  32.   var _this = this;
  33.  
  34.   classCallCheck(this, Analyser);
  35.  
  36.   this.initialise = function (analyser) {
  37.     _this.analyser = analyser;
  38.     _this.analyser.fftSize = 2048;
  39.   };
  40.  
  41.   this.reset = function () {
  42.     _this.hzHistory = [];
  43.     _this.frequences = new Uint8Array(_this.analyser.frequencyBinCount);
  44.   };
  45.  
  46.   this.analyse = function () {
  47.     _this.analyser.getByteFrequencyData(_this.frequences);
  48.     for (var i = 0; i < _this.frequences.length; i++) {
  49.       if (!_this.hzHistory[i]) {
  50.         _this.hzHistory[i] = [];
  51.       }
  52.       if (_this.hzHistory[i].length > _this.maxValueHistory) {
  53.         _this.hzHistory[i].shift();
  54.       }
  55.       _this.hzHistory[i].push(_this.frequences[i]);
  56.     }
  57.   };
  58.  
  59.   this.getRangeAverageRatio = function (startingValue, nbValue) {
  60.     var total = 0;
  61.     for (var i = startingValue; i < nbValue + startingValue; i++) {
  62.       total += _this.getFrequenceRatio(i);
  63.     }
  64.     return total / nbValue;
  65.   };
  66.  
  67.   this.getFrequenceRatio = function (index) {
  68.     var min = 255;
  69.     var max = 0;
  70.     _this.hzHistory[index].forEach(function (value) {
  71.       if (value < min) {
  72.         min = value;
  73.       }
  74.       if (value > max) {
  75.         max = value;
  76.       }
  77.     });
  78.     var scale = max - min;
  79.     var actualValue = _this.frequences[index] - min;
  80.     var percentage = scale === 0 ? 0 : actualValue / scale;
  81.     return _this.startingScale + _this.pulseRatio * percentage;
  82.   };
  83.  
  84.   this.startingScale = 0;
  85.   this.pulseRatio = 1;
  86.   this.maxValueHistory = 100;
  87.   this.hzHistory = [];
  88. };
  89.  
  90. var Analyser$1 = new Analyser();
  91.  
  92. var Player = function Player(forceAudioContext) {
  93.   var _this = this;
  94.  
  95.   classCallCheck(this, Player);
  96.  
  97.   this.createSourceFromAudioElement = function (audioElement) {
  98.     audioElement.setAttribute('rythm-connected', _this.connectedSources.length);
  99.     var source = _this.audioCtx.createMediaElementSource(audioElement);
  100.     _this.connectedSources.push(source);
  101.     return source;
  102.   };
  103.  
  104.   this.connectExternalAudioElement = function (audioElement) {
  105.     _this.audio = audioElement;
  106.     _this.currentInputType = _this.inputTypeList['EXTERNAL'];
  107.     var connectedIndex = audioElement.getAttribute('rythm-connected');
  108.     if (!connectedIndex) {
  109.       _this.source = _this.createSourceFromAudioElement(_this.audio);
  110.     } else {
  111.       _this.source = _this.connectedSources[connectedIndex];
  112.     }
  113.     _this.connectSource(_this.source);
  114.   };
  115.  
  116.   this.connectSource = function (source) {
  117.     source.connect(_this.gain);
  118.     _this.gain.connect(Analyser$1.analyser);
  119.     if (_this.currentInputType !== _this.inputTypeList['STREAM']) {
  120.       Analyser$1.analyser.connect(_this.audioCtx.destination);
  121.       _this.audio.addEventListener('ended', _this.stop);
  122.     } else {
  123.       Analyser$1.analyser.disconnect();
  124.     }
  125.   };
  126.  
  127.   this.setMusic = function (trackUrl) {
  128.     _this.audio = new Audio();
  129.     _this.audio.crossOrigin = "anonymous";
  130.     _this.audio.src = trackUrl;
  131.     _this.audio.load();
  132.     _this.currentInputType = _this.inputTypeList['TRACK'];
  133.     _this.source = _this.createSourceFromAudioElement(_this.audio);
  134.     _this.connectSource(_this.source);
  135.   };
  136.  
  137.   this.setGain = function (value) {
  138.     _this.gain.gain.value = value;
  139.   };
  140.  
  141.   this.plugMicrophone = function () {
  142.     return _this.getMicrophoneStream().then(function (stream) {
  143.       _this.audio = stream;
  144.       _this.currentInputType = _this.inputTypeList['STREAM'];
  145.       _this.source = _this.audioCtx.createMediaStreamSource(stream);
  146.       _this.connectSource(_this.source);
  147.     });
  148.   };
  149.  
  150.   this.getMicrophoneStream = function () {
  151.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
  152.     return new Promise(function (resolve, reject) {
  153.       navigator.getUserMedia({ audio: true }, function (medias) {
  154.         return resolve(medias);
  155.       }, function (error) {
  156.         return reject(error);
  157.       });
  158.     });
  159.   };
  160.  
  161.   this.start = function () {
  162.     if (_this.currentInputType === _this.inputTypeList['TRACK']) {
  163.       _this.audio.play();
  164.     }
  165.   };
  166.  
  167.   this.stop = function () {
  168.     if (_this.currentInputType === _this.inputTypeList['TRACK']) {
  169.       _this.audio.pause();
  170.     } else if (_this.currentInputType === _this.inputTypeList['STREAM']) {
  171.       _this.audio.getAudioTracks()[0].enabled = false;
  172.     }
  173.   };
  174.  
  175.   this.browserAudioCtx = window.AudioContext || window.webkitAudioContext;
  176.   this.audioCtx = forceAudioContext || new this.browserAudioCtx();
  177.   this.connectedSources = [];
  178.   Analyser$1.initialise(this.audioCtx.createAnalyser());
  179.   this.gain = this.audioCtx.createGain();
  180.   this.source = {};
  181.   this.audio = {};
  182.   this.hzHistory = [];
  183.   this.inputTypeList = {
  184.     TRACK: 0,
  185.     STREAM: 1,
  186.     EXTERNAL: 2
  187.   };
  188. };
  189.  
  190. var pulse = (function (elem, value) {
  191.   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  192.  
  193.   var max = !isNaN(options.max) ? options.max : 1.25;
  194.   var min = !isNaN(options.min) ? options.min : 0.75;
  195.   var scale = (max - min) * value;
  196.   elem.style.transform = 'scale(' + (min + scale) + ') translateZ(0)';
  197. });
  198.  
  199. var reset = function reset(elem) {
  200.   elem.style.transform = '';
  201. };
  202.  
  203. var shake = (function (elem, value) {
  204.   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  205.  
  206.   var max = !isNaN(options.max) ? options.max : 15;
  207.   var min = !isNaN(options.min) ? options.min : -15;
  208.   if (options.direction === 'left') {
  209.     max = -max;
  210.     min = -min;
  211.   }
  212.   var twist = (max - min) * value;
  213.   elem.style.transform = 'translate3d(' + (min + twist) + 'px, 0, 0)';
  214. });
  215.  
  216. var reset$1 = function reset(elem) {
  217.   elem.style.transform = '';
  218. };
  219.  
  220. var jump = (function (elem, value) {
  221.   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  222.  
  223.   var max = !isNaN(options.max) ? options.max : 30;
  224.   var min = !isNaN(options.min) ? options.min : 0;
  225.   var jump = (max - min) * value;
  226.   elem.style.transform = 'translate3d(0, ' + -jump + 'px, 0)';
  227. });
  228.  
  229. var reset$2 = function reset(elem) {
  230.   elem.style.transform = '';
  231. };
  232.  
  233. var twist = (function (elem, value) {
  234.   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  235.  
  236.   var max = !isNaN(options.max) ? options.max : 20;
  237.   var min = !isNaN(options.min) ? options.min : -20;
  238.   if (options.direction === 'left') {
  239.     max = -max;
  240.     min = -min;
  241.   }
  242.   var twist = (max - min) * value;
  243.   elem.style.transform = 'rotate(' + (min + twist) + 'deg) translateZ(0)';
  244. });
  245.  
  246. var reset$3 = function reset(elem) {
  247.   elem.style.transform = '';
  248. };
  249.  
  250. var vanish = (function (elem, value) {
  251.   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  252.  
  253.   var max = !isNaN(options.max) ? options.max : 1;
  254.   var min = !isNaN(options.max) ? options.max : 0;
  255.   var vanish = (max - min) * value;
  256.   if (options.reverse) {
  257.     elem.style.opacity = max - vanish;
  258.   } else {
  259.     elem.style.opacity = min + vanish;
  260.   }
  261. });
  262.  
  263. var reset$4 = function reset(elem) {
  264.   elem.style.opacity = '';
  265. };
  266.  
  267. var borderColor = (function (elem, value) {
  268.   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  269.  
  270.   var from = options.from || [0, 0, 0];
  271.   var to = options.to || [255, 255, 255];
  272.   var scaleR = (to[0] - from[0]) * value;
  273.   var scaleG = (to[1] - from[1]) * value;
  274.   var scaleB = (to[2] - from[2]) * value;
  275.   elem.style.borderColor = 'rgb(' + Math.floor(to[0] - scaleR) + ', ' + Math.floor(to[1] - scaleG) + ', ' + Math.floor(to[2] - scaleB) + ')';
  276. });
  277.  
  278. var reset$5 = function reset(elem) {
  279.   elem.style.borderColor = '';
  280. };
  281.  
  282. var color = (function (elem, value) {
  283.   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  284.  
  285.   var from = options.from || [0, 0, 0];
  286.   var to = options.to || [255, 255, 255];
  287.   var scaleR = (to[0] - from[0]) * value;
  288.   var scaleG = (to[1] - from[1]) * value;
  289.   var scaleB = (to[2] - from[2]) * value;
  290.   elem.style.backgroundColor = 'rgb(' + Math.floor(to[0] - scaleR) + ', ' + Math.floor(to[1] - scaleG) + ', ' + Math.floor(to[2] - scaleB) + ')';
  291. });
  292.  
  293. var reset$6 = function reset(elem) {
  294.   elem.style.backgroundColor = '';
  295. };
  296.  
  297. var radius = (function (elem, value) {
  298.   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  299.  
  300.   var max = !isNaN(options.max) ? options.max : 25;
  301.   var min = !isNaN(options.min) ? options.min : 0;
  302.   var borderRadius = (max - min) * value;
  303.   if (options.reverse) {
  304.     borderRadius = max - borderRadius;
  305.   } else {
  306.     borderRadius = min + borderRadius;
  307.   }
  308.   elem.style.borderRadius = borderRadius + 'px';
  309. });
  310.  
  311. var reset$7 = function reset(elem) {
  312.   elem.style.borderRadius = '';
  313. };
  314.  
  315. var blur = (function (elem, value) {
  316.   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  317.  
  318.   var max = !isNaN(options.max) ? options.max : 8;
  319.   var min = !isNaN(options.min) ? options.min : 0;
  320.   var blur = (max - min) * value;
  321.   if (options.reverse) {
  322.     blur = max - blur;
  323.   } else {
  324.     blur = min + blur;
  325.   }
  326.   elem.style.filter = 'blur(' + blur + 'px)';
  327. });
  328.  
  329. var reset$8 = function reset(elem) {
  330.   elem.style.filter = '';
  331. };
  332.  
  333. var coefficientMap = {
  334.   up: -1,
  335.   down: 1,
  336.   left: 1,
  337.   right: -1
  338. };
  339.  
  340. var swing = (function (elem, value) {
  341.   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  342.  
  343.   var radius = !isNaN(options.radius) ? options.radius : 20;
  344.   var direction = Object.keys(coefficientMap).includes(options.direction) ? options.direction : 'right';
  345.   var curve = Object.keys(coefficientMap).includes(options.curve) ? options.curve : 'down';
  346.   var _ref = [coefficientMap[direction], coefficientMap[curve]],
  347.       xCoefficient = _ref[0],
  348.       yCoefficient = _ref[1];
  349.  
  350.   elem.style.transform = 'translate3d(' + xCoefficient * radius * Math.cos(value * Math.PI) + 'px, ' + yCoefficient * radius * Math.sin(value * Math.PI) + 'px, 0)';
  351. });
  352.  
  353. var reset$9 = function reset(elem) {
  354.   elem.style.transform = '';
  355. };
  356.  
  357. var neon = (function (elem, value) {
  358.   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  359.  
  360.   var from = options.from || [0, 0, 0];
  361.   var to = options.to || [255, 255, 255];
  362.   var scaleR = (to[0] - from[0]) * value;
  363.   var scaleG = (to[1] - from[1]) * value;
  364.   var scaleB = (to[2] - from[2]) * value;
  365.   elem.style.boxShadow = '0 0 1em rgb(' + Math.floor(to[0] - scaleR) + ', ' + Math.floor(to[1] - scaleG) + ', ' + Math.floor(to[2] - scaleB) + ')';
  366. });
  367.  
  368. var reset$10 = function reset(elem) {
  369.   elem.style.boxShadow = '';
  370. };
  371.  
  372. var kern = (function (elem, value) {
  373.   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  374.  
  375.   var max = !isNaN(options.max) ? options.max : 25;
  376.   var min = !isNaN(options.min) ? options.min : 0;
  377.   var kern = (max - min) * value;
  378.   if (options.reverse) {
  379.     kern = max - kern;
  380.   } else {
  381.     kern = min + kern;
  382.   }
  383.   elem.style.letterSpacing = kern + 'px';
  384. });
  385.  
  386. var reset$11 = function reset(elem) {
  387.   elem.style.letterSpacing = '';
  388. };
  389.  
  390. var fontSize = (function (elem, value) {
  391.   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  392.  
  393.   var max = !isNaN(options.max) ? options.max : 0.8;
  394.   var min = !isNaN(options.min) ? options.min : 1.2;
  395.   var fontSize = (max - min) * value + min;
  396.   elem.style.fontSize = fontSize + 'em';
  397. });
  398.  
  399. var reset$12 = function reset(elem) {
  400.   elem.style.fontSize = '1em';
  401. };
  402.  
  403. var borderWidth = (function (elem, value) {
  404.   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  405.  
  406.   var max = !isNaN(options.max) ? options.max : 5;
  407.   var min = !isNaN(options.min) ? options.min : 0;
  408.   var borderWidth = (max - min) * value + min;
  409.   elem.style.borderWidth = borderWidth + 'px';
  410. });
  411.  
  412. var reset$13 = function reset(elem) {
  413.   elem.style.borderWidth = '';
  414. };
  415.  
  416. var Dancer = function () {
  417.   function Dancer() {
  418.     classCallCheck(this, Dancer);
  419.  
  420.     this.resets = {};
  421.     this.dances = {};
  422.     this.registerDance('size', pulse, reset);
  423.     this.registerDance('pulse', pulse, reset);
  424.     this.registerDance('shake', shake, reset$1);
  425.     this.registerDance('jump', jump, reset$2);
  426.     this.registerDance('twist', twist, reset$3);
  427.     this.registerDance('vanish', vanish, reset$4);
  428.     this.registerDance('color', color, reset$6);
  429.     this.registerDance('borderColor', borderColor, reset$5);
  430.     this.registerDance('radius', radius, reset$7);
  431.     this.registerDance('blur', blur, reset$8);
  432.     this.registerDance('swing', swing, reset$9);
  433.     this.registerDance('neon', neon, reset$10);
  434.     this.registerDance('kern', kern, reset$11);
  435.     this.registerDance('borderWidth', borderWidth, reset$13);
  436.     this.registerDance('fontSize', fontSize, reset$12);
  437.   }
  438.  
  439.   createClass(Dancer, [{
  440.     key: 'registerDance',
  441.     value: function registerDance(type, dance) {
  442.       var reset$$1 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {};
  443.  
  444.       this.dances[type] = dance;
  445.       this.resets[type] = reset$$1;
  446.     }
  447.   }, {
  448.     key: 'dance',
  449.     value: function dance(type, className, ratio, options) {
  450.       var dance = type;
  451.       if (typeof type === 'string') {
  452.         //In case of a built in dance
  453.         dance = this.dances[type] || this.dances['pulse'];
  454.       } else {
  455.         //In case of a custom dance
  456.         dance = type.dance;
  457.       }
  458.       var elements = document.getElementsByClassName(className);
  459.       Array.from(elements).forEach(function (elem) {
  460.         return dance(elem, ratio, options);
  461.       });
  462.     }
  463.   }, {
  464.     key: 'reset',
  465.     value: function reset$$1(type, className) {
  466.       var reset$$1 = type;
  467.       if (typeof type === 'string') {
  468.         //In case of a built in dance
  469.         reset$$1 = this.resets[type] || this.resets['pulse'];
  470.       } else {
  471.         //In case of a custom dance
  472.         reset$$1 = type.reset;
  473.       }
  474.       var elements = document.getElementsByClassName(className);
  475.       Array.from(elements).forEach(function (elem) {
  476.         return reset$$1(elem);
  477.       });
  478.     }
  479.   }]);
  480.   return Dancer;
  481. }();
  482.  
  483. var dancer = new Dancer();
  484.  
  485. var Rythm$1 = function Rythm(forceAudioContext) {
  486.   var _this = this;
  487.  
  488.   classCallCheck(this, Rythm);
  489.  
  490.   this.connectExternalAudioElement = function (audioElement) {
  491.     return _this.player.connectExternalAudioElement(audioElement);
  492.   };
  493.  
  494.   this.setMusic = function (url) {
  495.     return _this.player.setMusic(url);
  496.   };
  497.  
  498.   this.plugMicrophone = function () {
  499.     return _this.player.plugMicrophone();
  500.   };
  501.  
  502.   this.setGain = function (value) {
  503.     return _this.player.setGain(value);
  504.   };
  505.  
  506.   this.connectSource = function (source) {
  507.     return _this.player.connectSource(source);
  508.   };
  509.  
  510.   this.addRythm = function (elementClass, type, startValue, nbValue, options) {
  511.     _this.rythms.push({
  512.       elementClass: elementClass,
  513.       type: type,
  514.       startValue: startValue,
  515.       nbValue: nbValue,
  516.       options: options
  517.     });
  518.   };
  519.  
  520.   this.start = function () {
  521.     _this.stopped = false;
  522.     _this.player.start();
  523.     _this.analyser.reset();
  524.     _this.renderRythm();
  525.   };
  526.  
  527.   this.renderRythm = function () {
  528.     if (_this.stopped) return;
  529.     _this.analyser.analyse();
  530.     _this.rythms.forEach(function (mappingItem) {
  531.       var type = mappingItem.type,
  532.           elementClass = mappingItem.elementClass,
  533.           nbValue = mappingItem.nbValue,
  534.           startValue = mappingItem.startValue,
  535.           options = mappingItem.options;
  536.  
  537.       _this.dancer.dance(type, elementClass, _this.analyser.getRangeAverageRatio(startValue, nbValue), options);
  538.     });
  539.     _this.animationFrameRequest = requestAnimationFrame(_this.renderRythm);
  540.   };
  541.  
  542.   this.resetRythm = function () {
  543.     _this.rythms.forEach(function (mappingItem) {
  544.       var type = mappingItem.type,
  545.           elementClass = mappingItem.elementClass,
  546.           nbValue = mappingItem.nbValue,
  547.           startValue = mappingItem.startValue,
  548.           options = mappingItem.options;
  549.  
  550.       _this.dancer.reset(type, elementClass);
  551.     });
  552.   };
  553.  
  554.   this.stop = function (freeze) {
  555.     _this.stopped = true;
  556.     _this.player.stop();
  557.     if (_this.animationFrameRequest) cancelAnimationFrame(_this.animationFrameRequest);
  558.     if (!freeze) _this.resetRythm();
  559.   };
  560.  
  561.   this.player = new Player(forceAudioContext);
  562.   this.analyser = Analyser$1;
  563.   this.maxValueHistory = Analyser$1.maxValueHistory;
  564.   this.dancer = dancer;
  565.   this.rythms = [];
  566.   this.addRythm('rythm-bass', 'pulse', 0, 10);
  567.   this.addRythm('rythm-medium', 'pulse', 150, 40);
  568.   this.addRythm('rythm-high', 'pulse', 400, 200);
  569.   this.animationFrameRequest = void 0;
  570. };
  571.  
  572. return Rythm$1;
  573.  
  574. })));
  575. //# sourceMappingURL=rythm.js.map
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top