「WebPd」をシーケンス的に「tone.js」を音源的に同時に利用できるか試してみた

投稿日:2021-03-27



ナカジ(@cp_nakajun)です。

先の記事「PureData経験者が初めて「WebPD」を使ってみた時に思ったことをDEMO解説と共に書きます」の最後に

まだ実験もしてないのに書くのもなんですが
「tone.js」や「P5.sound」などと併用できたり共用できたりすると面白いかな~と思っています。
もし、実験して上手くいったらまた記事にしたいと思います。

ということを書いてました。

少し時間がかかってしまいましたが、「WebPD」と「tone.js」を同時に利用してみましたので記事にしたいと思います。

先に言い訳させてもらっておくと

僕のJavaScriptスキルと「tone.js」の理解度がかなり「まだまだ」なのでコードにスマートな感じはないですがご了承ください。

とりあえず「なんとか音を出しました!」状態です。

WebPd and Tone.js を同時に利用する

今回やろうとしたことは
シーケンス的なことを「WebPD」で、音源的なことを「tone.js」でというやり方で同時に使えるかを試してみるというのが主旨です。

  • WebPD:出す音の周波数とタイミングを作る
  • tone.js:音源とエフェクトを作り、発音させる

上で紹介した先の記事ではWebPDで全部まかないましたが

これの発音部分をtone.jsを使って同じような感じに音を出してみます。

WebPd and Tone.js Demo

もうすでに書いてしまいましたが、結果として音を出すことができました。

デモページURL:https://creative-plus.net/webpd-demo/webpd-ToneJS-Demo1.html

「SOUND ON」ボタンを押すと音が鳴るはずです。

ただ、残念ながら「スマホのブラウザだと音がでない」でした。

現状の僕ではこれを解決する方法ができませんでした…今後の課題です。

なので一応「画面キャプチャー動画」を用意しましたが、こちらもプチプチノイズが…

これもきっとコードの問題なんだろうなぁと思います。申し訳ないです。


PureDataパッチとtone.jsのコード

PureDataパッチ

tone.jsコード

Tone.Transport.bpm.value = 120;

const lpfilter = new Tone.Filter(1800, "lowpass");
const bpfilter = new Tone.Filter(1600, "bandpass");
const feedbackDelay = new Tone.FeedbackDelay("4n", 0.4);
const pingPong = new Tone.PingPongDelay("4n.", 0.2);
const preVol = new Tone.Volume(-26);
const freeverb = new Tone.Freeverb().toDestination();

freeverb.dampening = 1000;
freeverb.roomSize = 0.9;
freeverb.wet = 0.7;

//シンセ生成
const Synth_1 = new Tone.PolySynth(Tone.Synth).chain(preVol, feedbackDelay, freeverb);
const Synth_2 = new Tone.PolySynth(Tone.DuoSynth).chain(lpfilter, preVol, feedbackDelay, freeverb);
const Synth_3 = new Tone.PolySynth(Tone.Synth).chain(bpfilter, preVol, pingPong, freeverb);

// シンセ実行
function playSynth(){
    Pd.receive('midiNo', function(args) {
        Synth_1.triggerAttackRelease(args, "8n")
        Synth_2.triggerAttackRelease(args, "4n")
        Synth_3.triggerAttackRelease(args*6, "2n")
    })
}

const loop = new Tone.Loop((time) => {
    playSynth();
}, 20000).start(0);

まとめ

課題の残る結果となりましたが、今後また理解が進んだら共有させて頂きたいと思います。

WebPdのデモサイトは以下のリンクからご覧いただけます。

https://creative-plus.net/webpd-demo/

まだ2つしかないけど…

この記事でWebPdに興味を持った方は以下のよかったら記事もご覧ください。

PureData経験者が初めて「WebPD」を使ってみた時に思ったことをDEMO解説と共に書きます。


PureDataの貴重な書籍



学習にオススメ


・【NFTアート × Python】全くの初心者でもできるジェネラティブNFTの作成から出品まで icon

・【P5.js】プログラミングと数学(物理)を使って遊んでみよう【初心者向け】【わかりやすさ重視】 icon

・改訂版プログラミングで科学を学ぼう! icon

・【JS】ガチで学びたい人のためのJavaScriptメカニズム icon





おすすめのクリエイティブ・コーディング関連カテゴリー


ウェブツール

機能はシンプルなものですが、p5.jsやTone.jsで描画したり音が出たりするので遊んでみてください。
・【Midi Number Tools】:MIDIナンバーから音名と周波数を判定します
・【Delay Time Calculator】:テンポに応じた音符の長さを判定します