はじめに
Sunoで自分が制作した音声や、保存する権利のある音声を、ブラウザ内でWAV・MP3として保存する拡張機能「Music Grabber」を開発しました。2026年10月17日時点で、Chrome Web Storeの公開ページにバージョン1.3.8が掲載されています。
この記事では、開発で重要になった「再生キャプチャと読み込み済み音声の違い」「保存可能な状態の判定」「動的な画面に追従するUI」を紹介します。
Chrome Web StoreでMusic Grabberを見る
2種類の音声取得経路を分ける
Create・プレイリスト・Liked Songs
通常の再生パイプラインから音声をキャプチャします。最初から再生し、音声全体の読み込みと検証が完了してから保存できます。途中のシークや再生の中断、未対応の形式では、完全なキャプチャを作れない場合があります。
WAVは検証済みのキャプチャを保存します。MP3は「Prepare MP3」でブラウザ内の変換を実行し、完了後に「Download MP3」を押して保存する2段階の操作です。変換の完了とダウンロード開始を別の状態として扱っています。
Studio
Studioでは、対応する音声ソースがエディタ内に読み込まれている場合、そのソースを利用します。通常の再生キャプチャとは異なり、保存のための再生や再録音は不要です。
ただし、保存対象は読み込み済みの元クリップです。タイムライン上のトリミング、タイムワープ、トラックエフェクトを反映したミックスの書き出しではありません。未読み込みのソースを、保存可能として表示しないことも重要です。
UIは「処理中」と「保存可能」を区別する
音声の準備には時間がかかります。ボタンを常に有効にすると、ユーザーは保存に失敗した理由を判断できません。そこで、読み込み・キャプチャの進捗、検証、変換、準備完了、エラーを表示し、音声の状態に合わせて操作の可否を切り替えています。
特に、MP3の変換完了はファイルの保存完了ではありません。また、ブラウザのダウンロード処理にファイルを渡したことと、保存先への書き込み完了も区別する必要があります。表示文言は、実際に確認できた段階に合わせます。
MediaSourceの進捗を単純に読むだけでは足りない
再生中のバッファは、常に曲全体を保持しているとは限りません。古い区間が破棄されると、現在のbuffered範囲だけを使った進捗表示は後戻りしてしまいます。
Music Grabberでは、読み込まれた区間の履歴を結合して扱い、現在のバッファ範囲だけで全体の進捗を判断しない設計にしています。ただし、進捗が100%に見えることだけで保存可能とはせず、デコードや音声の検証も別に行います。
この考え方は、ストリーミングのダウンロード表示や、断片的に届くデータの処理にも応用できます。「どこまで受信したか」と「最終成果物として利用できるか」は別の条件です。
動的な画面にUIを追従させる
プレイリストでは追加読み込みや行の再利用が起きます。固定の曲IDや初回表示だけに依存すると、操作対象が変わった際に古いボタンが残る原因になります。
行ごとのコンパクトな操作領域を用意し、画面の変更に追従して再接続する構成にしました。Studioでも、現在のトラックとソースに合わせて操作対象を更新します。小さくするだけでなく、WAV・MP3の操作と進捗をひとまとまりにすることで、曲の情報を読みやすく保ちます。
ローカル処理とメモリの寿命
音声処理とMP3エンコードはブラウザ内で行い、キャプチャした音声をMusic Grabberの開発者や外部サービスへアップロードしません。
検証済みキャプチャの保持数はタブごとに最大3件で、ページを更新すると消去されます。音声データは大きくなりやすいため、保持数とバッファサイズを制限し、不要なデータを残し続けないことも設計上のポイントです。
なお、MP3は非可逆圧縮です。変換によって元の音声より品質が向上するわけではありません。
試すには
- Chrome Web Storeからインストールします。
- Sunoのページを更新します。
- Createなどでは完成済みの曲を最初から再生し、キャプチャと検証を待ちます。
- WAVを保存するか、MP3を準備してからダウンロードします。Studioでは対応する読み込み済みソースの操作を利用します。
利用できるのは、自分が権利を持つ音声、または保存の許可を得ている音声です。Sunoやブラウザ側の変更によって動作が変わる可能性もあります。
使い勝手や進捗表示についてのフィードバックを歓迎します。対応してほしい音楽サイトはリクエストフォームから送れます。
開発しているほかのアプリや技術記事はcreated.linkにまとめています。