https://mode-web.ru/js/script-news.js

1'use strict';
2
3var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
4
5function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
6
7var Balls = function () {
8  function Balls(context, buffer) {
9    _classCallCheck(this, Balls);
10
11    this.context = context;
12    this.buffer = buffer;
13  }
14
15  _createClass(Balls, [{
16    key: 'setup',
17    value: function setup() {
18      this.gainNode = this.context.createGain();
19      this.source = this.context.createBufferSource();
20      this.source.buffer = this.buffer;
21      this.source.connect(this.gainNode);
22      this.gainNode.connect(this.context.destination);
23      this.gainNode.gain.setValueAtTime(1, this.context.currentTime);
24    }
25  }, {
26    key: 'play',
27    value: function play() {
28      this.setup();
29      this.source.start(this.context.currentTime);
30    }
31  }, {
32    key: 'stop',
33    value: function stop() {
34      var ct = this.context.currentTime + 1;
35      this.gainNode.gain.exponentialRampToValueAtTime(.1, ct);
36      this.source.stop(ct);
37    }
38  }]);
39
40  return Balls;
41}();
42
43var Buffer = function () {
44  function Buffer(context, urls) {
45    _classCallCheck(this, Buffer);
46
47    this.context = context;
48    this.urls = urls;
49    this.buffer = [];
50  }
51
52  _createClass(Buffer, [{
53    key: 'loadSound',
54    value: function loadSound(url, index) {
55      var request = new XMLHttpRequest();
56      request.open('get', url, true);
57      request.responseType = 'arraybuffer';
58      var thisBuffer = this;
59      request.onload = function () {
60        thisBuffer.context.decodeAudioData(request.response, function (buffer) {
61          thisBuffer.buffer[index] = buffer;
62          if (index == thisBuffer.urls.length - 1) {
63            thisBuffer.loaded();
64          }
65        });
66      };
67      request.send();
68    }
69  }, {
70    key: 'getBuffer',
71    value: function getBuffer() {
72      var _this = this;
73
74      this.urls.forEach(function (url, index) {
75        _this.loadSound(url, index);
76      });
77    }
78  }, {
79    key: 'loaded',
80    value: function loaded() {
81      _loaded = true;
82    }
83  }, {
84    key: 'getSound',
85    value: function getSound(index) {
86      return this.buffer[index];
87    }
88  }]);
89
90  return Buffer;
91}();
92
93var balls = null,
94    preset = 0,
95    _loaded = false;
96var path = '/audio2/';
97var sounds = [path + 'sound1.mp3', path + 'sound2.mp3', path + 'sound3.mp3', path + 'sound4.mp3', path + 'sound5.mp3', path + 'sound6.mp3', path + 'sound7.mp3', path + 'sound8.mp3', path + 'sound9.mp3', path + 'sound10.mp3', path + 'sound11.mp3', path + 'sound12.mp3', path + 'sound13.mp3', path + 'sound14.mp3', path + 'sound15.mp3', path + 'sound16.mp3', path + 'sound17.mp3', path + 'sound18.mp3', path + 'sound19.mp3', path + 'sound20.mp3', path + 'sound21.mp3', path + 'sound22.mp3', path + 'sound23.mp3', path + 'sound24.mp3', path + 'sound25.mp3', path + 'sound26.mp3', path + 'sound27.mp3', path + 'sound28.mp3', path + 'sound29.mp3', path + 'sound30.mp3', path + 'sound31.mp3', path + 'sound32.mp3', path + 'sound33.mp3', path + 'sound34.mp3', path + 'sound35.mp3', path + 'sound36.mp3'];
98var context = new (window.AudioContext || window.webkitAudioContext)();
99
100function playBalls() {
101  var index = parseInt(this.dataset.note) + preset;
102  balls = new Balls(context, buffer.getSound(index));
103  balls.play();
104}
105
106function stopBalls() {
107  balls.stop();
108}
109
110var buffer = new Buffer(context, sounds);
111var ballsSound = buffer.getBuffer();
112var buttons = document.querySelectorAll('.b-ball_bounce');
113buttons.forEach(function (button) {
114  button.addEventListener('mouseenter', playBalls.bind(button));
115  button.addEventListener('mouseleave', stopBalls);
116});
117
118function ballBounce(e) {
119  var i = e;
120  if (e.className.indexOf(" bounce") > -1) {
121    return;
122  }
123  toggleBounce(i);
124}
125
126function toggleBounce(i) {
127  i.classList.add("bounce");
128  function n() {
129    i.classList.remove("bounce");
130    i.classList.add("bounce1");
131    function o() {
132      i.classList.remove("bounce1");
133      i.classList.add("bounce2");
134      function p() {
135        i.classList.remove("bounce2");
136        i.classList.add("bounce3");
137        function q() {
138          i.classList.remove("bounce3");
139        }
140        setTimeout(q, 300);
141      }
142      setTimeout(p, 300);
143    }
144    setTimeout(o, 300);
145  }
146  setTimeout(n, 300);
147}
148
149var array1 = document.querySelectorAll('.b-ball_bounce');
150var array2 = document.querySelectorAll('.b-ball_bounce .b-ball__right');
151
152for (var i = 0; i < array1.length; i++) {
153  array1[i].addEventListener('mouseenter', function () {
154    ballBounce(this);
155  });
156}
157
158for (var i = 0; i < array2.length; i++) {
159  array2[i].addEventListener('mouseenter', function () {
160    ballBounce(this);
161  });
162}
163
164var l = ["49", "50", "51", "52", "53", "54", "55", "56", "57", "48", "189", "187", "81", "87", "69", "82", "84", "89", "85", "73", "79", "80", "219", "221", "65", "83", "68", "70", "71", "72", "74", "75", "76", "186", "222", "220"];
165var k = ["90", "88", "67", "86", "66", "78", "77", "188", "190", "191"];
166var a = {};
167for (var e = 0, c = l.length; e < c; e++) {
168  a[l[e]] = e;
169}
170for (var _e = 0, _c = k.length;

170 _e < _c; _e++) {
171  a[k[_e]] = _e;
172}
173
174document.addEventListener('keydown', function (j) {
175  var i = j.target;
176  if (j.which in a) {
177    var index = parseInt(a[j.which]);
178    balls = new Balls(context, buffer.getSound(index));
179    balls.play();
180    var ball = document.querySelector('[data-note="' + index + '"]');
181    toggleBounce(ball);
182  }
183});