p5.jsで音を拾う

音を表現したいと思いました。

今、勉強しているCanvasでやろうと音を表現したいと思ったのですが、私の技術力ではできませんでした。

以前、ちょっとだけ勉強していたp5.jsでやってみました。

音を拾う

音は私の手拍子です。

p5js.org内のこのページを参考にしました。

reference | p5.js

コードはこちら↓

let mic;

function setup() {
	let canvas = createCanvas(640, 335, P2D);
	canvas.parent('myContainer');

	colorMode(HSB, 360, 100, 100, 100);
	noStroke();

	mic = new p5.AudioIn();
	mic.start();
}

function draw() {
	background(0, 0, 100, 100);

	micLevel = mic.getLevel();

	let y = height - micLevel * height * 5;
	fill(343, 85, 92, 100);
	rect(width / 2, y, 10, height);
}

p5.AudioInでマイクで音を拾うようです↓

reference | p5.js

そして、getLevel()で拾った音を得ます。
0.0111111とか小さな数値なので、heightなどの数字を掛けて大きくします↓

reference | p5.js

今後、コードを音で表現することをやっていきたいと思います。