Advertisement
Guest User

Untitled

a guest
Dec 15th, 2018
487
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.72 KB | None | 0 0
  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
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement