p5.jsでシンセサイザーを作る第15話 p5.soundの魅力！やっと音が出た！

FumiSA

2024年6月18日 22:13

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のエディターで実行すると、キーをクリックしている間、サイン波で音が出るはずです。

全文をコピペして試してみてください。
実際に音が出ますので注意！！

ここまでで、シンセサイザーのパーツを作り、実際に音が出るようになりました。
無事に動作してホッとします、、、

しかし、やたらとノイズが乗っていたりして、音質的な面でも相当難がある。これは否めません。この辺りはまた。次回以降の実装でクリアしていきます。

今後は、キーボード（画面上の）を使って、音階を制御できるようにしていきたいと思います。

引き続きよろしくお願いします！

この記事が参加している募集

#つくってみた

20,764件

この記事が気に入ったらサポートをしてみませんか？