「WebPd」をシーケンス的に「tone.js」を音源的に同時に利用できるか試してみた
ナカジ(@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/
まだ２つしかないけど…
この記事でWebPdに興味を持った方は以下のよかったら記事もご覧ください。
