Skip to content

Commit 6a72d1b

Browse files
AsjasAsjas
committed
create starter and finished files for video 85
1 parent c2d2a91 commit 6a72d1b

File tree

2 files changed

+86
-86
lines changed

2 files changed

+86
-86
lines changed

‎exercises/85 - Audio Visualizer Oscilloscope/sound-FINISHED.js‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import { hslToRgb } from "./utils";
2+
3+
const WIDTH = 1500;
4+
const HEIGHT = 1500;
5+
const canvas = document.querySelector("canvas");
6+
const ctx = canvas.getContext("2d");
7+
canvas.width = WIDTH;
8+
canvas.height = HEIGHT;
9+
let analyzer;
10+
let bufferLength;
11+
12+
function handleError(err) {
13+
console.log("You must give access to your mic in order to proceed");
14+
}
15+
16+
async function getAudio() {
17+
const stream = await navigator.mediaDevices
18+
.getUserMedia({ audio: true })
19+
.catch(handleError);
20+
const audioCtx = new AudioContext();
21+
analyzer = audioCtx.createAnalyser();
22+
const source = audioCtx.createMediaStreamSource(stream);
23+
source.connect(analyzer);
24+
// How much data should we collect
25+
analyzer.fftSize = 2 ** 8;
26+
// pull the data off the audio
27+
// how many pieces of data are there?!?
28+
bufferLength = analyzer.frequencyBinCount;
29+
const timeData = new Uint8Array(bufferLength);
30+
const frequencyData = new Uint8Array(bufferLength);
31+
drawTimeData(timeData);
32+
drawFrequency(frequencyData);
33+
}
34+
35+
function drawTimeData(timeData) {
36+
// inject the time data into our timeData array
37+
analyzer.getByteTimeDomainData(timeData);
38+
// now that we have the data, lets turn it into something visual
39+
// 1. Clear the canvas TODO
40+
ctx.clearRect(0, 0, WIDTH, HEIGHT);
41+
// 2. setup some canvas drawing
42+
ctx.lineWidth = 10;
43+
ctx.strokeStyle = "#ffc600";
44+
ctx.beginPath();
45+
const sliceWidth = WIDTH / bufferLength;
46+
let x = 0;
47+
timeData.forEach((data, i) => {
48+
const v = data / 128;
49+
const y = (v * HEIGHT) / 2;
50+
// draw our lines
51+
if (i === 0) {
52+
ctx.moveTo(x, y);
53+
} else {
54+
ctx.lineTo(x, y);
55+
}
56+
x += sliceWidth;
57+
});
58+
59+
ctx.stroke();
60+
61+
// call itself as soon as possible
62+
requestAnimationFrame(() => drawTimeData(timeData));
63+
}
64+
65+
function drawFrequency(frequencyData) {
66+
// get the frequency data into our frequencyData array
67+
analyzer.getByteFrequencyData(frequencyData);
68+
// figure out the bar width
69+
const barWidth = (WIDTH / bufferLength) * 2.5;
70+
let x = 0;
71+
frequencyData.forEach((amount) => {
72+
// 0 to 255
73+
const percent = amount / 255;
74+
const [h, s, l] = [360 / (percent * 360) - 0.5, 0.8, 0.5];
75+
const barHeight = HEIGHT * percent * 0.5;
76+
// TODO: Convert the colour to HSL TODO
77+
const [r, g, b] = hslToRgb(h, s, l);
78+
ctx.fillStyle = `rgb(${r},${g},${b})`;
79+
ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
80+
x += barWidth + 2;
81+
});
82+
83+
requestAnimationFrame(() => drawFrequency(frequencyData));
84+
}
85+
86+
getAudio();

‎exercises/85 - Audio Visualizer Oscilloscope/sound.js‎

Lines changed: 0 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +0,0 @@
1-
import { hslToRgb } from './utils';
2-
3-
const WIDTH = 1500;
4-
const HEIGHT = 1500;
5-
const canvas = document.querySelector('canvas');
6-
const ctx = canvas.getContext('2d');
7-
canvas.width = WIDTH;
8-
canvas.height = HEIGHT;
9-
let analyzer;
10-
let bufferLength;
11-
12-
function handleError(err) {
13-
console.log('You must give access to your mic in order to proceed');
14-
}
15-
16-
async function getAudio() {
17-
const stream = await navigator.mediaDevices
18-
.getUserMedia({ audio: true })
19-
.catch(handleError);
20-
const audioCtx = new AudioContext();
21-
analyzer = audioCtx.createAnalyser();
22-
const source = audioCtx.createMediaStreamSource(stream);
23-
source.connect(analyzer);
24-
// How much data should we collect
25-
analyzer.fftSize = 2 ** 8;
26-
// pull the data off the audio
27-
// how many pieces of data are there?!?
28-
bufferLength = analyzer.frequencyBinCount;
29-
const timeData = new Uint8Array(bufferLength);
30-
const frequencyData = new Uint8Array(bufferLength);
31-
drawTimeData(timeData);
32-
drawFrequency(frequencyData);
33-
}
34-
35-
function drawTimeData(timeData) {
36-
// inject the time data into our timeData array
37-
analyzer.getByteTimeDomainData(timeData);
38-
// now that we have the data, lets turn it into something visual
39-
// 1. Clear the canvas TODO
40-
ctx.clearRect(0, 0, WIDTH, HEIGHT);
41-
// 2. setup some canvas drawing
42-
ctx.lineWidth = 10;
43-
ctx.strokeStyle = '#ffc600';
44-
ctx.beginPath();
45-
const sliceWidth = WIDTH / bufferLength;
46-
let x = 0;
47-
timeData.forEach((data, i) => {
48-
const v = data / 128;
49-
const y = (v * HEIGHT) / 2;
50-
// draw our lines
51-
if (i === 0) {
52-
ctx.moveTo(x, y);
53-
} else {
54-
ctx.lineTo(x, y);
55-
}
56-
x += sliceWidth;
57-
});
58-
59-
ctx.stroke();
60-
61-
// call itself as soon as possible
62-
requestAnimationFrame(() => drawTimeData(timeData));
63-
}
64-
65-
function drawFrequency(frequencyData) {
66-
// get the frequency data into our frequencyData array
67-
analyzer.getByteFrequencyData(frequencyData);
68-
// figure out the bar width
69-
const barWidth = (WIDTH / bufferLength) * 2.5;
70-
let x = 0;
71-
frequencyData.forEach(amount => {
72-
// 0 to 255
73-
const percent = amount / 255;
74-
const [h, s, l] = [360 / (percent * 360) - 0.5, 0.8, 0.5];
75-
const barHeight = HEIGHT * percent * 0.5;
76-
// TODO: Convert the colour to HSL TODO
77-
const [r, g, b] = hslToRgb(h, s, l);
78-
ctx.fillStyle = `rgb(${r},${g},${b})`;
79-
ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
80-
x += barWidth + 2;
81-
});
82-
83-
requestAnimationFrame(() => drawFrequency(frequencyData));
84-
}
85-
86-
getAudio();

0 commit comments

Comments
 (0)