🎵 CrossfadePlayer

2つの音源をURLまたはローカルファイルから読み込み、同時再生しながらクロスフェーダーでリアルタイムに音量バランスを制御できるWebアプリケーションです。

▶ アプリを開く

特徴

• 2つの音源を同期再生し、クロスフェーダーで音量バランスをリアルタイムに変更
• 各トラックの個別音量調整
• パン操作（L/ST/R）で出力先を左・ステレオ・右に切り替え
• 波形表示とクリックシーク
• ネットワークURL・ローカルファイル・Dropbox共有リンクに対応
• ファイルのドラッグ&ドロップ読み込み（デスクトップ）
• 音源URLを含む共有リンクの生成
• キーボードショートカット対応
• ループ再生
• モバイル対応（レスポンシブデザイン）

対応フォーマット

ファイル形式: WAV / MP3 / FLAC / OGG

チャンネル数: モノラル・ステレオ（多チャンネル音源も読み込み可能ですが、ステレオにダウンミックスされます）

サンプルレート: 制限なし（8kHz〜384kHz。読み込み時にデバイスのサンプルレートに自動変換されます）

ビット深度: 制限なし（8bit〜32bit。内部的に32bit floatで処理されます）

使い方

基本操作

1. Track A と Track B にそれぞれ音源を読み込む（URL入力またはローカルファイル選択）
2. 両方の音源が読み込まれたら「▶ 再生」で同期再生開始
3. クロスフェーダーを左右に動かして音量バランスを調整

クロスフェーダー横の A / B ボタンを押すと、そのトラックを100%にできます。

音源の読み込み方法

各トラックには2つの読み込み方法があります。

🌐 ネットワーク: URL入力欄にアドレスを入力して「読込」ボタンをクリック

📁 ローカル: 「ファイルを選択 / ドロップ」ボタンをクリックしてファイルを選択。デスクトップではトラックパネル全体にファイルをドラッグ&ドロップすることもできます。

読み込み済みの音源は状態表示バーに表示され、✕ボタンでクリアできます。

ネットワーク音源の対応状況

以下の条件を満たすURLであれば読み込めます。

使用可能な音源

• CORSヘッダー（Access-Control-Allow-Origin）を返すWebサーバー上の音声ファイル
• Dropbox の共有リンク（自動的に直接ダウンロードURLに変換されます）
• 自分のWebサーバーやCDNにホストした音声ファイル
• GitHub Pages、Netlify、Vercel などの静的ホスティング上のファイル

使用できない音源

• Google Drive の共有リンク（ブラウザからのクロスオリジンアクセスがブロックされます）
• CORSヘッダーを返さないサーバー上のファイル
• ログインが必要なファイル

CORSとは: ブラウザのセキュリティ機能で、異なるドメインからのファイル取得を制限する仕組みです。音源を配置するサーバーが Access-Control-Allow-Origin ヘッダーを返す必要があります。多くの静的ホスティングサービスはデフォルトで対応しています。

パン操作（L/ST/R）

各トラックの下部にある L / ST / R ボタンで、音声の出力先を切り替えられます。

ボタン	動作
L	すべての音を左スピーカーから出力
ST	通常のステレオ出力（デフォルト）
R	すべての音を右スピーカーから出力

音源の共有

「🔗 共有用URLをコピー」ボタンをクリックすると、現在の設定を含むURLがクリップボードにコピーされます。このURLを他の人に送ると、同じ状態でCrossfadePlayerを開けます。

共有URLに含まれる情報:

• 音源URL（Track A / Track B）
• 再生位置
• クロスフェーダー位置
• ループ ON/OFF
• パン設定（L/ST/R）

ローカルファイルから読み込んだ音源は共有URLに含まれません。デフォルト値（再生位置0秒、フェーダー中央、ループOFF、パンST）のパラメータは省略されます。

キーボードショートカット

キー	操作
Space	再生 / 停止
←	クロスフェーダーを左へ（Track A寄り）
→	クロスフェーダーを右へ（Track B寄り）

エラー・警告メッセージについて

音源の読み込みに失敗した場合、原因に応じたエラーメッセージが表示されます。

メッセージ	原因と対処
Google Driveの共有リンクには対応していません…	Google DriveのURLが入力されました。Dropboxや直接リンクをご利用ください
ファイルが見つかりません（404）	URLが間違っているか、ファイルが削除されています。URLを確認してください
アクセスが拒否されました（403）	ファイルの共有設定が非公開になっています。共有設定を確認してください
音源の取得が拒否されました…（CORS制限）	サーバーがブラウザからの直接アクセスを許可していません。CORS対応のサーバーをご利用ください
音声ファイルではなくHTMLページが返されました…	URLが音声ファイルへの直接リンクではなく、Webページを指しています
音源のデコードに失敗しました…	ファイルが破損しているか、対応していない形式です
⚠ 互換モードで動作中…	CORSの制限により通常の方法で読み込めなかったため、互換モード（MediaElement モード）で動作しています。再生・シーク・クロスフェードは可能ですが、波形表示とパン操作(L/ST/R)は利用できません。主にiPadOS等の一部環境で発生します

ライセンス

MIT