p5.sound と Tone.js のそれぞれの情報を軽く見てみたり p5.js と組み合わせた簡易な音を鳴らす処理を試してみる

これまで、ブラウザで音を扱いたい時に使ったことがあるライブラリの中で、わりとよく使うものに、以下の「p5.sound」と「Tone.js」があります。

●reference | p5.js ： p5.sound library
　https://p5js.org/reference/#/libraries/p5.sound

●Tone.js
　https://tonejs.github.io/

それぞれ別々に使っていたのですが、これらを使って同じことをやろうとした場合、どんな違いがでるだろうと思いました。

それで、まずは両方の基本的な情報を軽く見てみようと思い、今回の内容を試しました。

## 扱える処理を見てみる
まず、それぞれで扱える処理を見てみようと思います。

リファレンス・API のページを見てみます。

### p5.sound のリファレンス
まずは、冒頭にリンクを書いていた p5.sound のリファレンスページです。

そこに並んでいるものをキャプチャして並べてみたのですが、思った以上にたくさんありました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/3be2cafe-8a2b-8d42-b9df-25ca06edb601.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c43ec71b-8d64-7b69-2e91-d7304a90ad9b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c43cb001-1ab1-99b4-b2ad-f43456671e17.png)

ざっくり見ると、音を作る・音声ファイルを処理する・音の入力を扱うといった処理が色々あるようです。

個々のものを細かく見ていくのは厳しい分量だな、という感じです。
これらの内容を見ていくやり方としては、具体的に何かやりたいことベースにお試しをして、そこで使う処理を見てみる、というのが良さそうかも。

### Tone.js の API
今度は、Tone.js のほうです。
こちらは、冒頭にリンクを書いていた公式ページの、最初の部分にリンクが記載されている API のページです。

具体的なページは、以下の 15.0.4 に関するドキュメントです。

●Tone.js
　https://tonejs.github.io/docs/15.0.4/index.html

こちらも、扱える処理がたくさん書いてあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f6c793c3-8300-1922-7a38-a7f6db654a36.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2dd550b0-c53a-edb9-ca19-46eb1f211163.png)

ざっくり見ると、こちらも p5.sound と同様に、音を作る・音声ファイルを処理する・音の入力を扱うといった処理が色々あるようです。

## 基本的な処理をそれぞれで試す
次に、基本的な音を生成する処理を、それぞれで実装してコードがどうなるか見てみます。

### 試す環境
この後の前提となる部分の話です。
この後のお試しを行う環境は、p5.js Web Editor を使うことにします。

また、その中での HTML の内容に、以下のライブラリをロードするような記載をして、p5.sound・Tone.js のどちらかを使える状態にします。

#### p5.sound

```html
    <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>
```

#### Tone.js
※ この後の処理では、p5.jS Web Editor で p5.js の setup() などを使っているため、p5.js も読みこんでいます

```html
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/tone@15.0.4/build/Tone.min.js"></script>
```


### 音を鳴らす
音を鳴らす処理で、基本的な処理をやってみます。

具体的な内容としては、マウスをクリックすると「C4」の音が 0.5秒鳴る、というものにしてみます。

#### p5.sound
p5.sound を使った実装を試してみます。

以下を参照して、お試し用のプログラムを作ってみました。

●reference | p5.MonoSynth
　https://p5js.org/reference/#/p5.MonoSynth

●reference | triggerRelease()
　https://p5js.org/reference/#/p5.MonoSynth/triggerRelease

```javascript
let monoSynth;

function setup() {
  monoSynth = new p5.MonoSynth();
}

function mousePressed() {
  monoSynth.triggerAttack("C4", 0.5);
  monoSynth.triggerRelease(0.5);
}
```

このプログラムを実行して画面をクリックすると、0.5秒の長さの音が鳴るのが確認できました。

#### Tone.js
次に Tone.js を試してみます。

以下を参考にして、実装しました。

●Tone.js
　https://tonejs.github.io/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2e3af732-8901-6770-7e82-75ff06c26f9f.png)

```javascript
let synth;

function setup() {
  synth = new Tone.Synth().toDestination();
}

function mousePressed() {
  const now = Tone.now();
  synth.triggerAttack("C4", now);
  synth.triggerRelease(now + 0.5);
}
```

もしくは、以下のように簡単に書くこともできるようです。
（「triggerAttackRelease()」が、「triggerAttack() と triggerRelease()の両方を組み合わせたもの」になるようです）

```javascript
let synth;

function setup() {
  synth = new Tone.Synth().toDestination();
}

function mousePressed() {
  synth.triggerAttackRelease("C4", 0.5);
}
```

Tone.js の場合も、このプログラムを実行して画面をクリックすると、0.5秒の長さの音が鳴るのが確認できました。

どちらも、とても簡単に特定の音階の音を鳴らせて良い感じでした。