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 のリファレンスページです。

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

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

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

Tone.js の API

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

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

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

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

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

基本的な処理をそれぞれで試す

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

試す環境

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

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

p5.sound

    <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 も読みこんでいます

    <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

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/

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()の両方を組み合わせたもの」になるようです）

let synth;

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

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

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

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