[2026/10/2]

[WEB app] WINAMP X2 — トップページで動くWINAMP風プレイヤー使い方ガイド

[WEB app] WINAMP X2 — トップページで動くWINAMP風プレイヤー使い方ガイド

概要

WINAMP X2 は、トップページの中で動く WINAMP 風のミュージックプレイヤーです。

別ページや別ウィンドウではなく、トップページの上に MAIN・EQ・PL（プレイリスト）・VIDEO の 4 枚のウィンドウが重なって表示されます。ウィンドウは自由に動かせて、近づけると吸着します。再生しながら、ほかのアプリやアバターのシーンもそのまま使えます。

一番の特徴は、トップページの VRM アバターと連携していることです。曲ごとにダンスを割り当てておくと、その曲を再生したときにアバターが踊ります。自分で用意した .vrma（VRM のアニメーション）をドロップして、ダンスとして追加することもできます。

インストール不要で、追加した曲やアニメーションはブラウザの中にだけ保存されます。サーバーには送信されません。

起動方法

トップページのスタートメニューか、ターミナルから起動します。

WINAMP X2 — スタートメニューから起動
方法操作
スタートメニュー「WINAMP」を選びます。もう一度選ぶと閉じます
閉じるMAIN 窓右上の ✕

Winamp

WINAMP X2 は Webamp とは別の、自作のプレイヤーです。見た目と操作感を WINAMP に寄せています。

スクリーンショット

WINAMP X2 — MAIN / EQ / PL / VIDEO

WINAMP X2 — 4 枚のウィンドウ

WINAMP X2 — スキンとダンス連動

WINAMP X2 WINAMP X2 WINAMP X2

操作動画

操作動画

ツールの特徴

  • トップページ内で動作: 別ウィンドウではなく、ページの上に重ねて表示します。窓の外はそのままページとして操作できます。
  • 4 枚の独立したウィンドウ: MAIN・EQ・PL・VIDEO を自由に動かせます。近づけると吸着し、くっついた窓は MAIN と一緒に動きます。
  • VRM アバターのダンス連動: 曲ごとにダンスを割り当てると、再生・停止に合わせてアバターが踊ります。
  • 自分の .vrma を追加: ドロップするだけでダンスの一覧に加わり、曲に割り当てられます。
  • 自分の曲を追加: 音声・動画ファイルをドロップして、USER プレイリストに保存します。
  • 10 バンドイコライザー: プリセットの選択と、自分の設定の保存ができます。
  • スペクトラムアナライザー: MAIN 窓の表示部で、再生中の音を 19 本のバーで表示します。
  • VIDEO 窓: 動画ファイルを再生できます。窓の右下をドラッグしてサイズを変えられます。
  • スキン切替: 既定の LAIN と、Winamp X2 風の AQUA を切り替えられます。
  • 設定の保存: 窓の位置、リピート、シャッフル、スキン、イコライザーの設定を覚えています。

対応形式

項目対応
音声ブラウザが再生できる音声ファイル（mp3 / wav / ogg / m4a など）
動画ブラウザが再生できる動画ファイル（mp4 / webm など）。VIDEO 窓に表示します
ダンス.vrma（VRM Animation）
アバタートップページに表示している VRM アバター

ブラウザが対応していない形式は再生できません。

使い方

1. 画面の構成

窓内容
MAIN再生・停止などの操作、再生時間、スペクトラム、曲名、シークバー、音量
EQ10 バンドのイコライザーとプリセット
PLプレイリスト（PRESET / USER のタブ）、ダンスの割り当て
VIDEO動画の表示

MAIN 窓の下段にある EQ PL VIDEO ボタンで、それぞれの窓を表示・非表示できます。各窓の ✕ でも閉じられます。

2. 再生する

PL 窓で曲をダブルクリックすると、その曲から再生します。

ボタン動作
⏮前の曲へ。再生開始から 3 秒以上たっているときは、その曲の頭に戻ります
▶再生
⏸一時停止
⏹停止
⏭次の曲へ
音量バー音量の調整
シークバー再生位置の移動

再生中の曲は、表示しているタブに関係なく、再生を始めたときのリストの順に進みます。

3. リピートとシャッフル

ボタン動作
REP押すたびに切り替わります。OFF → 曲リストを繰り返す（LIST）→ 1 曲を繰り返す（ONE）
SHUFオンにすると、リストの中からランダムな順で再生します。⏮ で、直前に聴いた曲に戻れます

どちらも、次回開いたときに状態を覚えています。

4. プレイリスト

PL 窓には 2 つのタブがあります。

タブ内容
PRESETあらかじめ用意された曲
USER自分で追加した曲

曲の追加と整理は、USER タブで行います。

操作動作
ファイルをドロップ音声・動画ファイルを USER に追加します
曲をクリック選択します
曲をダブルクリックその曲から再生します
ドラッグUSER の曲を並べ替えます
Delete キー選択した USER の曲を削除します

USER の曲は、ブラウザの中に保存されます。次に開いたときも残っています。PRESET の曲は削除できません。

5. VIDEO 窓

動画ファイルを再生すると、VIDEO 窓に映像が出ます。音声ファイルのときは、黒い画面のままです。

操作動作
右下をドラッグ窓のサイズを変更します（最小 240 × 180）
PIPピクチャ・イン・ピクチャで別窓に出します
WINAMP X2 — VIDEO 窓

6. ウィンドウの移動とスナップ

窓は、タイトルバーをドラッグして動かします。

動作内容
吸着ほかの窓や画面の端に近づけると、ぴったりくっつきます
MAIN を動かすくっついている窓が、全部一緒に動きます
MAIN 以外を動かすその窓だけ（その窓にくっついている窓も一緒に）動きます。MAIN から離すと、切り離せます

窓の位置とサイズは覚えているので、次に開いたときも同じ配置になります。

7. スペクトラムアナライザー

MAIN 窓の時間表示の下に、再生中の音の周波数をバーで表示します。19 本のバーで、低音から高音まで表し、上端にはピークを示す線が残ります。バーの色は、スキンによって変わります。

WINAMP X2 — スペクトラムアナライザー

8. イコライザー

EQ 窓には、10 個のスライダーが並んでいます。左から低音、右が高音です。

スライダー周波数
1〜1060 / 170 / 310 / 600 / 1k / 3k / 6k / 12k / 14k / 16k Hz

各バンドは ±20 dB の範囲で動かせます。中央が補正なしです。上の波形は、スライダーの形を表しています。

操作動作
プリセットを選ぶそのプリセットの設定に切り替わります
SAVEいまの設定に名前を付けて、自分のプリセットとして保存します
DEL保存した自分のプリセットを削除します（用意されたプリセットは削除できません）

再生を始める前に動かした設定も、再生時に反映されます。設定は、次回開いたときも覚えています。

WINAMP X2 — イコライザー

9. スキン

MAIN 窓のタイトルバーにある ◐ を押すと、スキンが切り替わります。

スキン内容
LAIN既定。暗い青を基調にした見た目
AQUAWinamp X2 の配色を参考にした、明るい銀と青の見た目。VIDEO 窓の枠も銀色になります（映像の部分は黒のままです）

選んだスキンは、次回開いたときも覚えています。

WINAMP X2 — スキン

10. VRM アバターとのダンス連動

WINAMP X2 のいちばんの特徴です。曲にダンスを割り当てておくと、その曲を再生したときに、トップページのアバターが踊ります。

場所内容
DANCE ボタン（MAIN 窓）ダンス連動のオン / オフ
ダンスの選択欄（PL 窓）選択中の曲に割り当てるダンスを選びます

割り当ての手順です。

  1. PL 窓で、ダンスを割り当てたい曲をクリックして選択します
  2. 選択欄から、ダンスを選びます
  3. その曲を再生すると、アバターが踊ります

再生中の曲のダンスを変えると、すぐにアニメーションが切り替わります。曲を止めると、ダンスも止まります。

ダンスの選択欄には、あらかじめ用意されたダンスと、自分で追加した .vrma が並びます。

WINAMP X2 — VRM アバターとのダンス連動

11. 自分の .vrma を追加する

.vrma ファイルを、WINAMP の窓にドロップします。ダンスの選択欄に加わり、曲に割り当てられるようになります。

操作動作
.vrma をドロップダンスの一覧に追加します
追加したダンスを選んで削除不要になった .vrma を削除します。そのダンスを割り当てていた曲は、割り当てなしに戻ります

追加した .vrma は、ブラウザの中に保存されます。

12. 他の音声との切り替え

トップページのほかの音声（背景の音楽など）と WINAMP は、同時には鳴りません。一方を再生すると、もう一方は自動で止まります。

注意事項

  • 追加した曲と .vrma は、ブラウザの中（IndexedDB）にだけ保存します。サーバーへの送信はしません。
  • ブラウザのサイトデータを削除すると、追加した曲・.vrma・各種設定は消えます。
  • ブラウザが対応していない形式のファイルは、再生できません。
  • 曲が次の曲に切り替わるとき、アバターのダンスが一瞬だけ止まって、すぐ次のダンスに切り替わることがあります。
  • Winamp のスキン（.wsz）の読み込みには対応していません。AQUA は、配色だけを参考にした自作のスキンです。
  • バランス、モノ / ステレオ切替、ウィンドウシェード（窓の折りたたみ）、.m3u の読み込みには対応していません。
  • 窓の配置がおかしくなったときは、ブラウザの保存データから winamp_layout を削除すると、初期配置に戻ります。

よくある質問 (FAQ)

Q. 曲を再生してもアバターが踊りません
A. 次の 3 つを確認してください。MAIN 窓の DANCE がオンになっているか、その曲にダンスが割り当てられているか、トップページにアバターが表示されているかです。

Q. 自分で追加した曲を削除したいです
A. PL 窓の USER タブで曲を選んで、Delete キーを押してください。PRESET の曲は削除できません。

Q. 追加した曲が、次に開いたら消えています
A. ブラウザのサイトデータ（IndexedDB）を削除したか、プライベートウィンドウで開いている可能性があります。プライベートウィンドウでは、閉じると保存した内容が消えます。

Q. 窓が重なって、操作できません
A. タイトルバーをドラッグして動かしてください。クリックした窓は、いちばん手前に出ます。直らないときは、ブラウザの保存データから winamp_layout を削除すると、初期配置に戻ります。

Q. 背景の音楽が止まりました
A. 不具合ではありません。WINAMP とほかの音声は同時に鳴らないようにしているので、WINAMP を再生すると、もう一方は止まります。

Q. イコライザーを動かしても、音が変わりません
A. スライダーが中央のままだと、補正はかかりません。プリセットを選ぶか、スライダーを上下に動かしてください。

Q. Winamp のスキン（.wsz）は使えますか
A. 使えません。スキンは、LAIN と AQUA の 2 種類を切り替える形です。

Q. 自分で作った .vrma がうまく動きません
A. アバターのモデルに合っていない、または .vrma の中にアニメーションが入っていない可能性があります。ほかのダンスで動くかを確認してください。

技術記事

実装の詳細は、技術記事にまとめています。

更新履歴

バージョン日付内容
v1.0.02026/10/2初回公開（再生・プレイリスト・EQ・スペクトラム・VIDEO・スキン、VRM ダンス連動、.vrma の追加）

クレジット

本ツールは、外部のプレイヤーライブラリを使わずに作っています。

  • プレイヤー / ウィンドウ管理 / イコライザー / スペクトラム / UI — 自作
  • AQUA スキンの配色 — Winamp X2 のスキン（DeeLight、Andy Couch）を参考にしています。画像データは使っていません

Winamp は Nullsoft / Llama Group の商標です。本ツールは、公式のものではありません。