https://podolog63.ru/script.js

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