APIのラッパーであるrecorder.jsを用いて簡易レコーダーを作成します。ブラウザ版Processingであるp5.jsをtsで書いてUI実装します。自然音や環境音を手軽に集めたい,そしてそれをPCへ送りリアルタイムに処理したい,といったニッチな要望に応えるものを作った感じです完成イメージイメージといってもスクリーンショットなんでこういう感じで動きます。(たぶん)ササっと環境構築して動かせるので興味ある方は是非。APIのラッパーみたいな感じでしょうか。AudioNodeのインスタンスを渡せば簡単に録音スタート・ストップ・保存ができる,という優れモノ。以下のような感じで録音開始の関数定義ができるので,任意のイベントで呼べば良い。recorder.record()}で,このRecorder.exportWAV()メソッド一発でwavのBlobオブジェクトが手に入るので,ソレをajaxでPOSTしてあげれば良い。)})flaskでPOSTされたwavファイルを保存するflask側ではこんな感じに書けば良い。fname})これでsounds/直下に1104235900.wavみたいなファイルがどんどん溜まっていく。保存されたファイルのパスをoscで送る個人的にこのアプリケーションをパフォーマンスで使用したいので,サウンドファイルが保存されたタイミングでoscにメッセージを飛ばしてみる。Liveを用いたリアルタイムでのサウンドファイル読み込みがラクになる(と信じている)pythonoscというパッケージを用いる。client.send(msg_obj.build())これで良い。あとは上述のuploaded_wav()内でsend_osc(fname)してあげれば,ファイルパスがメッセージとして届く。5050]しておけばopen&sfplay~して再生できる。https://p5js.org/DOMがいじれるProcessingという感じで,Canvas要素に描画するのでCSSで複雑なアニメーションを描いているとかしなくても,canvasが動くブラウザなら良いしこっちのがラクかもしれないです。いうものがあり,環境構築ナシで挙動が試せるので非常にとっかりやすいと思います。QiitaCreativeCoding用にP5.jsがTypeScriptで書ける環境をつくった。Qiitaあとは,ササっと書いていくだけです。script.実際に活用できるので気が向いたらどうぞ。osc-webappと同じく,ngrokでhttpsトンネルほって公開してます。