🍄Webpd 해보기

webpd란?

pd 패치를 javascript 또는 assemblyscript 로 변환해서 웹페이지에서 바로 사용할 수 있게 도와주는 도구를 만들자는 프로젝트이다.

오래전부터 관심있게 보고 있는 코드인데, 꽤 완성도가 좋아진 것으로 알고 있다.
요거 요즘은 어느정도로 잘되나? 궁금해서 한번 해보았다.

webpd 해보기

아래의 패치를 빌드해보았다.

webpd 설치 부터 빌드하고, 웹서버 실행하는 것까지... 

doohoyi@debian-x270:~/Projects$ npm install -g webpd

added 2 packages in 3s
npm notice
npm notice New major version of npm available! 10.9.2 -> 11.4.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.4.2
npm notice To update run: npm install -g npm@11.4.2
npm notice
doohoyi@debian-x270:~/Projects$ webpd --help
~ WebPd 1.0.0-alpha.12 ~
Licensed under LGPL V3
Usage: webpd [options]

Options:
  -V, --version                 output the version number
  -i, --input <filename>        Set the input file. Extensions supported :
                                .pd - Pure Data text
                                .wasm - Web Assembly WebPd module
  -o, --output <path>           Select a file path or directory for output.
  -f, --output-format <format>  Select an output format. If not provided, the format will be inferred from output filename. Available formats
                                :
                                wasm - Web Assembly WebPd module
                                javascript - JavaScript WebPd module
                                app - Complete web app embedding your compiled WebPd patch
                                wav - An audio preview of your patch
  --engine <engine>             Select an engine for audio generation (default "wasm"). Engines supported : javascript, wasm
  --audio-duration <seconds>    Duration of the generated audio in seconds.
  --check-support
  --whats-implemented
  -h, --help                    display help for command

~ Usage examples ~
  Generating a web page embedding myPatch.pd in path/to/folder : 
    webpd -i myPatch.pd -o path/to/folder -f app
  Generating a wav preview of myPatch.pd : 
    webpd -i myPatch.pd -o myPatch.wav
doohoyi@debian-x270:~/Projects$ cp ~/Documents/Pd/webpd-osc.pd .
doohoyi@debian-x270:~/Projects$ mkdir webpd
doohoyi@debian-x270:~/Projects$ cd webpd
doohoyi@debian-x270:~/Projects/webpd$ mv ../webpd-osc.pd .
doohoyi@debian-x270:~/Projects/webpd$ mkdir webpd-osc
doohoyi@debian-x270:~/Projects/webpd$ webpd -i webpd-osc.pd -o webpd-osc -f app
~ WebPd 1.0.0-alpha.12 ~
Licensed under LGPL V3

~~~ Building pdJson ✓
~~~ Building dspGraph ✓
~~~ Building assemblyscript ✓
~~~ Building wasm ✓
~~~ Building app ✓
Generating output
Created file /home/doohoyi/Projects/webpd/webpd-osc/webpd-runtime.js
Created file /home/doohoyi/Projects/webpd/webpd-osc/patch.wasm
Created file /home/doohoyi/Projects/webpd/webpd-osc/index.html

Web app compiled ! Start it by running :
	npx http-server webpd-osc
For documentation, open /home/doohoyi/Projects/webpd/webpd-osc/index.html in a code editor.

~ done ~
doohoyi@debian-x270:~/Projects/webpd$ npx http-server webpd-osc
Need to install the following packages:
http-server@14.1.1
Ok to proceed? (y) y

Starting up http-server, serving webpd-osc

http-server version: 14.1.1

http-server settings: 
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://127.0.0.1:8080
  http://192.168.88.30:8080
Hit CTRL-C to stop the server

대략 시키는대로 하니까, 다 잘되었다.
이렇게 하고 나면, 아래와 같이 접속이 가능하다.

역시 시키는대로.. 해본다.. 생성된 code안에 힌트가 적혀있다. send 와 receive에 대한 언급이 나오는데 약간 좀 반대가 아닌가? 혼란스럽다.. 우선은 numberbox 기준으로 제어해보았는데, 작동이 잘 되는 편이었다.

이번에는 너무 간단한것을 했기 때문에, 담에는 좀더 복잡한걸 시켜보고, UI도 달아보면 좋겠다고 생각했다.20250720, 21:36 (KST)

Subhyphae