【WebPD】PureDataで作った音をウェブサイトで使えるようにするJavaScriptライブラリー

投稿日:2021-01-30



ナカジ(@cp_nakajun)です。

僕の認識ではあまり、いや全然話題になってる気がしないPureDataの活用方法になりますが

今回はウェブサイトの音をPureDataで作って実装できるようにするためのJSライブラリー

【WebPD】

を紹介したいと思います。

シンプルに言うとPureDataパッチをブラウザで実行する方法という感じでしょうか。

まず、大前提としてPureDataについて何も知らないと困るので

「PureData???」な人はとりあえず下の記事を読んでみて頂けると良いかと思います。

【Pure Data】お金をかけずに「音楽」と「プログラミング」両方を楽しめるツール!音楽をプログラミングで制作するってことはなんでも作らなきゃいけないけどそれが魅力です。



他にもPureDataについてはいろいろ書いてますのでご興味ありましたら読んでみてください。

スポンサーリンク

WebPDとは?

最初にWebPDのGitHubへのリンク、これが公式ページだと思います。

このページのWebPDについてを抜粋すると

WebPdは、Web Audio APIを使用してブラウザーでオーディオを再生する100%JavaScript PureDataランタイムです。 これは、Pure Dataプログラミング言語のサブセットをプラグインなしで、可能な限り最高のパフォーマンスでブラウザーで実行できるようにすることを目的としています。

WebPdは、Web Audio APIをサポートするすべてのブラウザーでサポートされている必要があります。

というJavaScriptライブラリーになります。

PureDataのパッチでWeb Audio APIを使うってことですね。

Web Audio API はウェブ上で音声を扱うための強力で多機能なシステムを提供します。(MDN web docs

WebPDの使い方

WebPDの実装について簡単に説明していきます。

まず、必要なものが

  1. PureDataで作ったパッチ(ex:myPatch.pd)
  2. jQueryの最新バージョン(jquery.js)
  3. WebPdの最新バージョン(webpd-latest.js)

になります。

PureDataパッチの制作については割愛しますが(よかったら当ブログの記事を参考に)まずはトライしてみてください。

jQueryとWebPdのJSファイルについては上記がリンクになってますのでダウンロード・保存してください。

ここからは先の公式ページの「Step-by-step guide」をなぞっていきます。

Step-by-stepにある以下のindex.htmlファイルを準備します。

<!doctype HTML>
<html>
  <head>
    <script src="js/jquery.js"></script>
    <script src="js/webpd-latest.js"></script>
    <script>
        var patch
        $.get('patches/myPatch.pd', function(patchStr) {
          patch = Pd.loadPatch(patchStr)
          Pd.start()
        })
    </script>
  </head>

  <body></body>
</html>

上記のHTMLの記述にならって

[jquery.js]と[webpd-latest.js]を「js」フォルダーの中

[myPatch.pd]を「patches」フォルダーの中に配置し

それぞれのフォルダーをindex.htmlを同じ階層に準備します。

ポイントはheadタグ内の部分

  1. jquery.jsの読み込み
  2. webpd-latest.jsの読み込み
  3. Pd.loadPatch()でパッチを読み込んで
  4. Pd.start()で再生実行

という感じでしょうか。

ローカルで実行を確認する方法

このままローカルの環境でindex.htmlをブラウザで開いても音は鳴りません。

確認するにはWebサーバーが必要です。

VSCodeを使っている人は「Live Server」を使ってもいいですし、Python環境がある人は付属モジュールの「http.server」を使うことができます。

「http.server」の使い方などは先に記事を書いてますのでご活用ください。

Pythonモジュールの「http.server」で簡単なWEB開発時のテスト用サーバーを準備する



一応、ここまで順調にできると制作したPDパッチが実行され、音が鳴ります。

もし僕の文章がわかりにくい場合は、SONICJAMのエンジニアの方のNoteがもう少し突っ込んだ内容も書かれてるのでおすすめです。
PureDataをブラウザで実行するためのJSライブラリについて

WebPD デモを作ってみた

WebPDを使う実験の最新版を実際に動作するWEBサイトにてデモとして公開します。

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

もし今後、デモをアップデートしたら上記サイトに履歴としてリンクを掲載しようと思いますが

この記事を書いている時点でのバージョンとしては以下の動画になります。

このバージョンのPDパッチ部分はサンレコWEBに掲載されている

Maxで作る自分専用パッチ〜Patch39 アンビエントな電子音を奏でる自動演奏パッチ

の大部分をコピーさせて頂いたものになります。

僕のスキル不足で再現できてない部分もありますが

WebPDで使える少ないオブジェクトでなんとか頑張ったところや少しだけ僕なりにアレンジしたところなどもありますので

そのあたりは別の記事として書こうと思ってます。

スポンサーリンク


PureDataの貴重な書籍



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

クリエイティブコーディング系 講座


ウェブツール

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


筆者プライベートで本気の愛用品

Creative Plus

遊んで・学んで・試してみてクリエイティブをプラスする「デジタルアート系ブログメディア」