忍者ブログ

Memeplexes

プログラミング、3DCGとその他いろいろについて

Web Audio APIで特定の周波数の音を再生する

私は今まで、ウェブサイトで音を動的に作り再生する方法は現在なくなっていると思っていたのですが、Web Audio APIというものでできることがわかりました。というわけで、このページでは3つの種類の音――つまりラ、音を小さくしたラ、ドミソ――を再生してみます(この3つは単純なので、動的とは言い難いですが、まあWeb Audio APIの練習です)。


OscillatorNodeでラを再生

コード

<script>

function playLa(){
	var context = new AudioContext();

	var oscillatorNode = new OscillatorNode(context);

	oscillatorNode.frequency.value = 440;
	oscillatorNode.connect(context.destination);
	oscillatorNode.start();
	oscillatorNode.stop(context.currentTime + 1);
}

</script>

<button onclick="playLa();">ラを再生</button>

実行結果

GainNodeでボリュームを下げる

コード

<script>

function playHalfLa(){
	var context = new AudioContext();

	var gainNode = new GainNode(context);
	gainNode.connect(context.destination);
	gainNode.gain.value = 0.5;

	var oscillatorNode = new OscillatorNode(context);
	oscillatorNode.frequency.value = 440;
	oscillatorNode.connect(gainNode);
	oscillatorNode.start();
	oscillatorNode.stop(context.currentTime + 1);
}

</script>

<button onclick="playHalfLa();">ボリューム半分のラ</button>

実行結果

ドミソを同時に再生

コード

<script>

function playDomiso(){
	var context = new AudioContext();

	var gainNode = new GainNode(context);
	gainNode.connect(context.destination);
	gainNode.gain.value = 0.2;

	var doNode = new OscillatorNode(context);
	doNode.frequency.value = 523;

	var miNode = new OscillatorNode(context);
	miNode.frequency.value = 659;

	var soNode = new OscillatorNode(context);
	soNode.frequency.value = 784;

	var domiso = [doNode, miNode, soNode];

	for(let node of domiso){
		node.connect(gainNode);
	}

	for(let node of domiso){
		node.start();
		node.stop(context.currentTime + 1);
	}
}

</script>

<button onclick="playDomiso();">ドミソ</button>

実行結果

拍手[5回]

PR