あらまし

WebAudio APIを使って、ブラウザ上でジャムセッションできるプラットフォーム Loopridge を作って見ました。とは言っても、リアルタイムのセッションではなく、「ルーパー」の考え方で重ねどりして曲を作り上げる形式です。参加者は数小節の短いトラックを録音&アップロードし他の人のトラックに音を重ねていきます。すでにトラックを重ねるタイプのコラボプラットフォームはありますし、YAMAHA NETDUETTのようなリアルタイム性を追求したサービスもあります。ちょうどその中間的な発想です。

何ができるの？

ネット越しにルーパーベースのセッション・トラックメイキングを行えます。
セッション部屋を作っていろいろな人とセッションできます。
ループトラックのON/OFFのパターンを様々に組むことで、曲に展開を作ることができます。
パスワード付きのクローズドな部屋も作れます。
録音はコンピュータにつながっている任意のデバイスから可能です。
モバイル端末からも動きます（と思います。iPhone 11では動きました）

使い方

現状はトラックアップロードにはログインが必要です。聞くだけならログイン不要です。

初回アクセス時は Audio Interfaceの有効かの確認ダイアログが表示されます。ブラウザから尋ねられますので有効化してください。（しないと録音できないです）
部屋を選ぶ or 作る。すでにトラックがある場合はダウンロード & 再生されます。それなりに時間かかります。ダウンロードされたものから順次再生されます。
必要であればデバイスの設定（右上メニュー -> Settings）から再生・録音デバイスを選んでください。
右下からテンポと１トラックの長さ(小節数)を指定（一度指定するとこの部屋の中では変更できません)。「Rec」ボタンで録音します。録音終わると再生されます。
（だいじ) 残念ながら現状ではたいてい録音されたトラックのタイミングが遅延(数十msec ~ 1秒程度) します(WEB Audio APIの現状の限界か）「Timing」ボタンをクリクリしてタイミングを合わせてください。
トラック名を適宜入力して、緑色のアップロードボタンを押すとアップロードされます。

とりあえず、好きに遊んでみてください！

例：
https://loopridge.com/?room=rxroww2MKSaKoT9wn3Jq
https://loopridge.com/?room=wLnRAMm9KQsfRyJnJtzn

開発に使った技術要素

フロントエンド : Bootstrap, WebAudio API, Canvas, WEB Worker, ロスレス圧縮
バックエンド : Firebase( Firestore, Firebase Storage, Firebase Authentication, Firebase Functions)

工夫など

サイズが大きいオーディオファイルの扱い。録音はwavベースで行うので1秒で176kB. 10秒で1.7MB。ケチらなければそのままバックエンドに送り保存すれば良いが、帯域超過が怖いのでなんとか小さくしたい。ただmp3等は音質やデコード時間の関係等からあまり使いたくない。
→ 元の音源をflacライクなロスレス圧縮（しかもクライアントサイドで) をしてバックエンドに送信・保存。
(とは言っても依然帯域を食うので、Firebase無料枠が終了したら使えなくなるかも)
上記のような重めな処理をシングルスレッドのJavascriptでUser Experienceをそこわないで実施する必要がある。
→ WEB Workerやタスク細分化＆タスクキュー等を用いてUIブロックをなるべく避ける実装を実施。

ご注意

実験的サービスです。トラック・セッション部屋の永続性は保証されません。
環境によってはうまく動かないことがあります。Mac + Chrome, Mac + Safari, Mac + Firefox であれば動くことは確認しています。非力なPCだと、音が途切れたり、ずれたり、スロー再生されたりします(Pen-Mのしょぼいwindows note PCだとこの現象でた）。
それなりに帯域を食いますので、モバイルネットワーク上での使用はご注意ください。とは言っても動画サイトほどではないはず。