Spectrogram/spectrogram.html at main · gorillaPet/Spectrogram · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<style>

body {
  background: #111;
  margin: 0;
}

.container {
  position: relative;
  width: 100%;
  height: 250px;
  margin-top: 80px;
  cursor: pointer;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
}

#playhead {
  position: absolute;
  top: 0;
  width: 2px;
  height: 250px;
  background: white;
  pointer-events: none;
}

#playButton {
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 100%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  cursor: pointer;
}

#playButton::after {
  content: '';
  border-left: 30px solid white;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
}

</style>
</head>

<body>

<audio id="audio" src="./audio/audio_test.mp3"></audio>

<div class="container" id="container">
  <canvas id="spectrogram"></canvas>
  <div id="playhead"></div>
  <div id="playButton"></div>
</div>

<script>

(async function() {

  const audio = document.getElementById("audio");
  const canvas = document.getElementById("spectrogram");
  const ctx = canvas.getContext("2d");
  const playhead = document.getElementById("playhead");
  const container = document.getElementById("container");
  const playButton = document.getElementById("playButton");

  canvas.width = window.innerWidth; /* Fits to screen, reevalutate when implementing to echonet*/
  canvas.height = 250;

  let generated = false;

  audio.addEventListener("loadeddata", async () => {
    if (!generated) {
      await generateSpectrogram();
      generated = true;
    }
  });

  playButton.addEventListener("click", (e) => {
    e.stopPropagation();
    if (audio.paused) {
      audio.play();
    } else {
      audio.pause();
    }
  });

  container.addEventListener("click", (e) => {
    const rect = container.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const percent = x / rect.width;

    audio.currentTime = percent * audio.duration;
  });

  audio.addEventListener("play", animatePlayhead);

  function animatePlayhead() {
    function frame() {
      if (!audio.duration) return;

      const percent = audio.currentTime / audio.duration;
      playhead.style.left = (percent * canvas.width) + "px";

      if (!audio.paused) requestAnimationFrame(frame);
    }
    frame();
  }

  /*Generate canvas block colours based on frequency distribution*/

  function getColor(v) {
    v = Math.pow(Math.max(0, Math.min(1, v)), 0.5);

    let r, g, b;

    if (v < 0.25) {
      r = 0; g = 0; b = 255 * (v / 0.25);
    } else if (v < 0.5) {
      r = 255 * ((v - 0.25) / 0.25); g = 0; b = 255;
    } else if (v < 0.75) {
      r = 255; g = 255 * ((v - 0.5) / 0.25); b = 0;
    } else {
      r = 255; g = 255; b = 255 * ((v - 0.75) / 0.25);
    }

    return `rgb(${r|0},${g|0},${b|0})`;
  }

  /*
  Fetch the audio, decode the raw binary data and sort by frequency.
  Stack frequency map vertically as per the determined slice size
  Generate canvas with heatmap that corresponds to audio length
  */

  async function generateSpectrogram() {

    const response = await fetch(audio.src);
    const arrayBuffer = await response.arrayBuffer(); //convert to binary

    const audioCtx = new AudioContext();
    const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer);

    const data = audioBuffer.getChannelData(0);

    const fftSize = 2048; // FFT analysis window size
    const hopSize = 512; // resolution (canvas square size): increase for greater detail/ lower performance
    const bins = fftSize / 2;

    const totalFrames = Math.floor((data.length - fftSize) / hopSize);
    const sliceWidth = canvas.width / totalFrames;

    //smooth chunks with Hann window
    const window = new Float32Array(fftSize);
    for (let i = 0; i < fftSize; i++) {
      window[i] = 0.5 * (1 - Math.cos(2 * Math.PI * i / (fftSize - 1)));
    }

    //Set arrays (real and imaginary) for cooley-tukey
    const real = new Float32Array(fftSize);
    const imag = new Float32Array(fftSize);

    /*
    Recursive Cooley-Tukey FFT implementation

    TODO: Implement as a modular file for readability.

    For an explanation of how this FFT uses Cooley tukey:
    https://www.youtube.com/watch?v=mPVtovydY1k


    */

    function fft(re, im) {
      const N = re.length;
      if (N <= 1) return;

      const half = N / 2;

      const evenRe = new Float32Array(half);
      const evenIm = new Float32Array(half);
      const oddRe = new Float32Array(half);
      const oddIm = new Float32Array(half);

      for (let i = 0; i < half; i++) {
        evenRe[i] = re[i*2];
        evenIm[i] = im[i*2];
        oddRe[i] = re[i*2+1];
        oddIm[i] = im[i*2+1];
      }

      fft(evenRe, evenIm);
      fft(oddRe, oddIm);

      for (let k = 0; k < half; k++) {
        const angle = (-2*Math.PI*k)/N;
        const cos = Math.cos(angle);
        const sin = Math.sin(angle);

        const tre = cos*oddRe[k] - sin*oddIm[k];
        const tim = sin*oddRe[k] + cos*oddIm[k];

        re[k] = evenRe[k] + tre;
        im[k] = evenIm[k] + tim;
        re[k+half] = evenRe[k] - tre;
        im[k+half] = evenIm[k] - tim;
      }
    }

    for (let frame = 0; frame < totalFrames; frame++) {

      const offset = frame * hopSize;

      for (let i = 0; i < fftSize; i++) {
        real[i] = (data[offset + i] || 0) * window[i];
        imag[i] = 0;
      }

      fft(real, imag);

      for (let i = 0; i < bins; i++) {

        const mag = Math.sqrt(real[i]*real[i] + imag[i]*imag[i]);
        const intensity = Math.pow(Math.log10(1 + mag) / Math.log10(1000), 1.5);

        const logIndex = Math.log10(1 + 9 * (i / bins));
        const y = canvas.height - logIndex * canvas.height;

        ctx.fillStyle = getColor(intensity);

        ctx.fillRect(
          frame * sliceWidth,
          y,
          sliceWidth,
          canvas.height / bins
        );
      }
    }
  }

})();
</script>

</body>
</html>