Web Audio APIの基本

Web Audio APIを勉強しているのですが、MDNでは難しかったので、本を購入しました。

本は、Web Audio APIについてのものが少なく探し続けて、『HTML5＋WebAudioAPIによるオーディオデータプロセッシング』という本を見つけました。

ただ、すごく良いの本なのですが、2015年のものなのでちょっと古いので、古い情報から新しいものへの翻訳作業とjQueryが素人の私にはしんどい部分もあります。

けど、音楽的な部分もかなり掘り下げてくれているので、3年間くらいは使うことになりそうです。費用対効果が高いです。

まずは基本から

まず本の一番始めの基本の基本から作っていきます。

本には「最小構成プログラム」とあります。ここから始まるんですね。

function playSound() {
	// step1
	var context = new AudioContext();
	var f = 440;
	var duration = 1;

	// step2
	var sampleRate = context.sampleRate;
	var dt = 1 / sampleRate;

	var buf = context.createBuffer(1, sampleRate * duration, sampleRate);

	var data = buf.getChannelData(0);
	for (var i = 0; i < sampleRate * duration; i++) {
		var t = i * dt;
		data[i] = Math.sin(2 * Math.PI * f * t);
	}

	// step3
	var src = context.createBufferSource();
	src.buffer = buf;
	src.connect(context.destination);
	src.start(0, 0, duration);
}

3ステップになってます。

ステップ1：音の設定情報の取得
ステップ2：オーディオデータ生成
ステップ3：オーディオデータ再生

「Buffer」など、よくわからない部分も多いですが、とりあえず動いているのでよしとしています。

本には、「最小構成プログラム」とありますが、「こ、これが、最小・・・！」とビビってしまいますが、気長に取り組んでいこうと思います。

p5.js部分

ちなみに、見た目は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(175, 96, 72, 100);

	micLevel = mic.getLevel();

	let w = micLevel * height * 5;
	fill(48, 81, 100, 100);
	ellipse(width / 2, height / 2, w, w);
}

続く