リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: SoundMap - 世界の環境音プレイヤー
再生中チャンネルのソロ機能(他チャンネル一時ミュート)の追加
1. 追加・改善する機能の目的
複数チャンネルをミックス中に「このチャンネルだけ聴いて音を確認したい」というニーズに応える。現状は個別ボリュームを0にするしかなく操作が煩雑。ソロボタン1タップで他チャンネルを一時ミュートし、解除で元の音量に戻る直感的なモニタリング機能を追加する。
2. 具体的な仕様
【UIレイアウト】
- 各チャンネルカード(.mix-ch)のヘッダー行(.mix-ch-header)に、チャンネル削除ボタン(.ch-remove)の左側へ「S」ボタン(.ch-solo)を追加
- ボタンサイズ: 18×18px程度、font-size:10px、通常時は var(--bg3) 背景 / var(--text2) 文字
- ソロアクティブ時: background:var(--amber)、color:#000 にハイライト
- ソロ中は他チャンネルカードに .muted クラスを付与し opacity:0.35 で視覚的に区別
【動作仕様】
- ソロボタンをクリックしたチャンネルが「ソロ」になり、他チャンネルの GainNode を 0 にセット(setTargetAtTime で約100msのスムーズな切替)
- 自チャンネルの GainNode は既存の個別ボリューム設定値をそのまま維持
- 再度同じソロボタンをクリックするとソロ解除 → 全チャンネルの GainNode を保存済みボリューム値に戻す(setTargetAtTime で復帰)
- 別チャンネルのソロボタンをクリックした場合は前のソロを解除して新しいソロへ切替(同時ソロ不可の排他制御)
- ソロ状態のまま「全停止」した場合はソロ状態もリセット
- ソロ中に個別ボリュームスライダーを操作した場合、ソロ状態は維持しつつ自チャンネルのみ音量変化(他チャンネルは引き続きミュート)
- フェードイン中にソロを操作した場合はフェードイン完了後のボリューム値を参照してミュート/復帰させる(競合を避けるため、フェードイン進行中はソロボタンを disabled にするか、フェードイン係数を乗じた値でセット)
【JavaScript実装方針】
- ソロ状態管理: `let soloChannelIdx = -1;` の変数1つで管理(-1はソロなし)
- 関数 `setSolo(idx)` を新規追加。idx が現在の soloChannelIdx と同じなら解除、異なれば切替
- 既存の `updateChannelVolume(idx, val)` 内で、soloChannelIdx が有効かつ idx !== soloChannelIdx の場合は GainNode を 0 に維持するよう条件分岐を追加(既存の volume 変数への書き込みはそのまま行い、GainNode への反映だけ抑制)
- ソロボタンの HTML 生成は既存のチャンネルカード生成ロジック(renderChannels相当の関数)内に1行追加するだけで完結
3. 既存機能との整合(壊さない点)
- localStorage への保存(マイミックス)はボリューム値をそのまま保存しており、ソロ状態は一時的なUI状態のため保存対象外。ロード時は常にソロなし状態で復元されるため既存の保存/ロードロジックを変更不要
- スリープタイマーのフェードアウトは全チャンネルの GainNode を直接操作するが、ソロ中でも全チャンネルをフェードアウトさせるため競合なし(タイマー発火時に soloChannelIdx = -1 にリセットするだけでよい)
- ミックス共有URLはチャンネル構成とボリューム値をエンコードするものでソロ状態は含まれないため変更不要
- ビジュアライザーは AnalyserNode を参照しておりソロの GainNode 操作と独立しているため影響なし
複数チャンネルをミックス中に「このチャンネルだけ聴いて音を確認したい」というニーズに応える。現状は個別ボリュームを0にするしかなく操作が煩雑。ソロボタン1タップで他チャンネルを一時ミュートし、解除で元の音量に戻る直感的なモニタリング機能を追加する。
2. 具体的な仕様
【UIレイアウト】
- 各チャンネルカード(.mix-ch)のヘッダー行(.mix-ch-header)に、チャンネル削除ボタン(.ch-remove)の左側へ「S」ボタン(.ch-solo)を追加
- ボタンサイズ: 18×18px程度、font-size:10px、通常時は var(--bg3) 背景 / var(--text2) 文字
- ソロアクティブ時: background:var(--amber)、color:#000 にハイライト
- ソロ中は他チャンネルカードに .muted クラスを付与し opacity:0.35 で視覚的に区別
【動作仕様】
- ソロボタンをクリックしたチャンネルが「ソロ」になり、他チャンネルの GainNode を 0 にセット(setTargetAtTime で約100msのスムーズな切替)
- 自チャンネルの GainNode は既存の個別ボリューム設定値をそのまま維持
- 再度同じソロボタンをクリックするとソロ解除 → 全チャンネルの GainNode を保存済みボリューム値に戻す(setTargetAtTime で復帰)
- 別チャンネルのソロボタンをクリックした場合は前のソロを解除して新しいソロへ切替(同時ソロ不可の排他制御)
- ソロ状態のまま「全停止」した場合はソロ状態もリセット
- ソロ中に個別ボリュームスライダーを操作した場合、ソロ状態は維持しつつ自チャンネルのみ音量変化(他チャンネルは引き続きミュート)
- フェードイン中にソロを操作した場合はフェードイン完了後のボリューム値を参照してミュート/復帰させる(競合を避けるため、フェードイン進行中はソロボタンを disabled にするか、フェードイン係数を乗じた値でセット)
【JavaScript実装方針】
- ソロ状態管理: `let soloChannelIdx = -1;` の変数1つで管理(-1はソロなし)
- 関数 `setSolo(idx)` を新規追加。idx が現在の soloChannelIdx と同じなら解除、異なれば切替
- 既存の `updateChannelVolume(idx, val)` 内で、soloChannelIdx が有効かつ idx !== soloChannelIdx の場合は GainNode を 0 に維持するよう条件分岐を追加(既存の volume 変数への書き込みはそのまま行い、GainNode への反映だけ抑制)
- ソロボタンの HTML 生成は既存のチャンネルカード生成ロジック(renderChannels相当の関数)内に1行追加するだけで完結
3. 既存機能との整合(壊さない点)
- localStorage への保存(マイミックス)はボリューム値をそのまま保存しており、ソロ状態は一時的なUI状態のため保存対象外。ロード時は常にソロなし状態で復元されるため既存の保存/ロードロジックを変更不要
- スリープタイマーのフェードアウトは全チャンネルの GainNode を直接操作するが、ソロ中でも全チャンネルをフェードアウトさせるため競合なし(タイマー発火時に soloChannelIdx = -1 にリセットするだけでよい)
- ミックス共有URLはチャンネル構成とボリューム値をエンコードするものでソロ状態は含まれないため変更不要
- ビジュアライザーは AnalyserNode を参照しておりソロの GainNode 操作と独立しているため影響なし
💬 返信 (3)
🛠 開発を開始しました (機能追加 (soundmap))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「SoundMap - 世界の環境音プレイヤー」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=soundmap
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/soundmap/
ご利用ありがとうございます!
ご要望いただいた「SoundMap - 世界の環境音プレイヤー」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=soundmap
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/soundmap/
ご利用ありがとうございます!
Echo
Iris