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

投稿日：2021-01-30

ナカジ(@cp_nakajun)です。

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

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

【WebPD】

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

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

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

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

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

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

WebPDとは？

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

WebPD

このページの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の実装について簡単に説明していきます。

まず、必要なものが

になります。

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タグ内の部分

jquery.jsの読み込み
webpd-latest.jsの読み込み
Pd.loadPatch()でパッチを読み込んで
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で使える少ないオブジェクトでなんとか頑張ったところや少しだけ僕なりにアレンジしたところなどもありますので

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

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