p5.jsでシンセサイザーを作る 第15話 p5.soundの魅力！ やっと音が出た！
Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。
p5.soundを使用した音の出し方
この記事では、p5.soundを使って最低限の発音をするまでを記述していきます。
取りあえず単一のキーを作る
オシレータを設定する
実際に発音してみる
取りあえず単一のキーを作る
マウスがクリックされた時に発音できるようにキーを描画します。
ここでは第５話で制作したキーのコードに加えて、第1０話で解説したような関数を使って一つだけキーを動作させるソースになっています。
let keySize = 50
let keyTop = keySize / 1.4;
let topSize = 7;
let keyX = 50;
let keyY = 50;
let keyInterval = 50;
let keyStat = false;
let strokeValue = 2; // 枠線の太さ
function setup() {
createCanvas(500, 400);
}
function draw() {
background(250); //背景の色
drawHousing();
drawInterface();
}
function drawHousing(){
stroke(150, 100, 100);
strokeWeight(strokeValue);
fill(230, 230, 230); // キーのベース
rect(keyX, keyY, keySize, keySize);
fill(100, 100, 100); // キーの影部分の色
triangle(
keyX, keyY, //左上
keyX, keyY + keySize, //左下
keyX+ keySize, keyY + keySize //右下
);
fill(250, 250, 250) // キーのトップ部分
rect(keyX+ topSize, keyY + topSize, keyTop, keyTop);
}
function drawInterface(){
if (keyStat == true){ // オレンジ色で白鍵のキートップを塗り替える
fill(255, 125, 0);
rect(keyX+ topSize, keyY + topSize, keyTop, keyTop);
}
}
function touchStarted() {
if (
mouseX > keyX &&
mouseX < keyX + keySize &&
mouseY > keyY &&
mouseY < keyY + keySize
)
{
keyStat = true;
}
}
function touchEnded() {
keyStat = false;
}
p5.soundの準備
p5.soundはp5.jsに追加された標準ライブラリです。本来これらの機能を使うために、このライブラリを読み込む記述が必要です。
必要なのですが、p5.jsのエディターを起動した場合は自動的に読み込まれるようになっているので、実は特に記述は必要無いようです。
具体的にはindex.htmlの記述が以下のようになります。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<script src="sketch.js"></script>
</body>
</html>繰り返しになりますが、p5.jsのデフォルトのエディターを使う場合は特に考える必要はなさそうです。例えば、ローカルのコードエディターとか、Code Penなどを使用して開発する場合は、index.html上で読み込みをします。
オシレーターを設定する
シンセサイザーの心臓部である、オシレーターをつくっていきましょう。
私の場合、p5.jsでプログラミングする時には、以前の解説のように四つのセクションで記述を作ります。
①宣言の部
②初期化の部
③実行の部
④処理の部
では、開発を始めます！
①宣言の部
let keySize = 50
let keyTop = keySize / 1.4;
let topSize = 7;
let keyX = 50;
let keyY = 50;
let keyInterval = 50;
let keyStat = false;
let strokeValue = 2;
let osc; // オシレーターを入れるハコです。oscと言う変数を宣言しました。ここは単なる数値ではなくて、オシレーターの部品そのものを格納するためのパーツだと考えます。
②初期化の部
function setup() {
createCanvas(500, 400);
osc = new p5.Oscillator('sin'); // ハコの中にサイン波を入れる
}oscの中には、オシレーターのパーツそのものを代入します。
普段、変数には数値とか文字列を代入するのですが、このコードの場合はオシレーターの部品そのものを代入しています。
この代入によってoscは単なる値ではなくて、オシレーターの実態として存在できるようになります。
と言うことで
osc = new p5.Oscillator('sin');
によってオシレーターの実態（部品）が生成されました。
次はオシレーターであるoscを実際に動作させていきます。
③実行の部
function draw() {
background(250); //背景の色
drawHousing();
drawInterface();
noteOn(); //ここでオシレーターの音を鳴らします！！
}ここは後述するnoteOn()の関数を呼び出しているだけなので、複雑なロジックはありません。
④動作の部
function noteOn(){
if (keyStat == true){
osc.start(); //キーが押されたらオシレーターを発音する
}
if (keyStat == false){
osc.stop(); //キーが離れたら発音を停止する
}
}動作の部には、新たにnoteOn()と言う関数を書き加えました。
もし、キーが押されている状態（keyStat == true）であれば
oscをstart()関数によって発音します。
もし、キー離されている状態（keyStat == false）であれば
oscをstop()関数によって発音を停止します。
実行してみましょう！
let keySize = 50
let keyTop = keySize / 1.4;
let topSize = 7;
let keyX = 50;
let keyY = 50;
let keyInterval = 50;
let keyStat = false;
let strokeValue = 2;
let osc; // オシレーターを入れるハコです。
function setup() {
createCanvas(500, 400);
osc = new p5.Oscillator('sin'); // ハコの中にサイン波を入れる
}
function draw() {
background(250); //背景の色
drawHousing();
drawInterface();
noteOn(); //ここでオシレーターの音を鳴らします！！
}
function drawHousing(){
stroke(150, 100, 100);
strokeWeight(strokeValue);
fill(230, 230, 230); // キーのベース
rect(keyX, keyY, keySize, keySize);
fill(100, 100, 100); // キーの影部分の色
triangle(
keyX, keyY, //左上
keyX, keyY + keySize, //左下
keyX+ keySize, keyY + keySize //右下
);
fill(250, 250, 250) // キーのトップ部分
rect(keyX+ topSize, keyY + topSize, keyTop, keyTop);
}
function drawInterface(){
if (keyStat == true){ // オレンジ色で白鍵のキートップを塗り替える
fill(255, 125, 0);
rect(keyX+ topSize, keyY + topSize, keyTop, keyTop);
}
}
function noteOn(){
if (keyStat == true){
osc.start(); //キーが押されたらオシレーターを発音する
}
if (keyStat == false){
osc.stop(); //キーが離れたら発音を停止する
}
}
function touchStarted() {
if (
mouseX > keyX &&
mouseX < keyX + keySize &&
mouseY > keyY &&
mouseY < keyY + keySize
)
{
keyStat = true;
}
}
function touchEnded() {
keyStat = false;
}このコードをp5.jsのエディターで実行すると、キーをクリックしている間、サイン波で音が出るはずです。
全文をコピペして試してみてください。
実際に音が出ますので注意！！
ここまでで、シンセサイザーのパーツを作り、実際に音が出るようになりました。
無事に動作してホッとします、、、
しかし、やたらとノイズが乗っていたりして、音質的な面でも相当難がある。これは否めません。この辺りはまた。次回以降の実装でクリアしていきます。
今後は、キーボード（画面上の）を使って、音階を制御できるようにしていきたいと思います。
引き続きよろしくお願いします！