リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: SoundMap - 世界の環境音プレイヤー
おやすみフェードイン機能(起動時グラデュアル再生)の追加
## 1. 目的
現在は再生ボタンを押すと各チャンネルが即座にフルボリュームで鳴り始めるため、静かな環境では突然感がある。再生開始時に音量をゆっくり上げる「フェードイン」オプションを追加し、特に睡眠・リラックス用途での心地よさを高める。
## 2. 具体的な仕様
### 2-1. UIの追加
- コンソール画面(PC・スマホ共通)のスリープタイマー選択UIの近くに「フェードイン」セクションを追加する。
- ラベル:「フェードイン」
- 選択肢:「なし(即時)」「30秒」「1分」「3分」「5分」の5択(`<select>` または 横並びボタングループ)。デフォルトは「なし(即時)」。
- 選択状態はlocalStorageに `soundmap_fadein` キーで保存し、次回アクセス時に復元する。
### 2-2. 動作仕様
- 再生開始(地図ピンクリック、プリセットロード、マイミックスロード、共有URLロード すべてのケース)時に、選択されたフェードイン時間が「なし」以外であれば以下の処理を行う。
1. 再生開始直後、各チャンネルの **実際の出力ゲイン(GainNode)を 0 に設定** してから再生を開始する。
2. `requestAnimationFrame` または `setInterval`(100ms間隔)を使い、経過時間に応じてゲインを **0 → ユーザー設定ボリューム値** まで線形補間で増加させる。
3. フェードイン中にユーザーが手動でボリュームスライダーを操作した場合は、その時点の補間値に対してスライダー比率をかけた値を目標値として再設定する(操作を妨げない)。
4. フェードイン完了後は通常の音量制御に戻る(GainNodeへの直接操作に切り替え)。
- フェードイン進行中は、コンソール上部に小さなプログレスバー(横幅100%、高さ4px、アクセントカラー)を表示し、完了時に自動的に非表示にする。
- フェードイン中に「停止」ボタンを押した場合はフェードインを即座に中断し、通常停止処理を行う。
- スリープタイマーのフェードアウトとは独立して動作する(両方設定可能)。
### 2-3. 共有リンクとの整合
- 既存の共有リンクのURLパラメータにフェードイン設定は含めない(受信者の環境設定を尊重するため)。
## 3. 既存機能との整合
- Web Audio APIのGainNodeは既存コードで各チャンネルに設定済みのため、その値を再生開始時に一時的に0へセットするだけで実装可能。既存のボリュームスライダーのUIや値管理ロジックは変更しない。
- スリープタイマー・マイミックス保存・ビジュアライザーなど既存機能は一切変更しない。
- localStorage追加キーは `soundmap_fadein` 1つのみで既存キーと衝突しない。
- スマホのタブUI・PCの左右レイアウトともに、スリープタイマーと同じセクション内または隣接した位置に追加するため、レイアウト崩れのリスクが低い。
現在は再生ボタンを押すと各チャンネルが即座にフルボリュームで鳴り始めるため、静かな環境では突然感がある。再生開始時に音量をゆっくり上げる「フェードイン」オプションを追加し、特に睡眠・リラックス用途での心地よさを高める。
## 2. 具体的な仕様
### 2-1. UIの追加
- コンソール画面(PC・スマホ共通)のスリープタイマー選択UIの近くに「フェードイン」セクションを追加する。
- ラベル:「フェードイン」
- 選択肢:「なし(即時)」「30秒」「1分」「3分」「5分」の5択(`<select>` または 横並びボタングループ)。デフォルトは「なし(即時)」。
- 選択状態はlocalStorageに `soundmap_fadein` キーで保存し、次回アクセス時に復元する。
### 2-2. 動作仕様
- 再生開始(地図ピンクリック、プリセットロード、マイミックスロード、共有URLロード すべてのケース)時に、選択されたフェードイン時間が「なし」以外であれば以下の処理を行う。
1. 再生開始直後、各チャンネルの **実際の出力ゲイン(GainNode)を 0 に設定** してから再生を開始する。
2. `requestAnimationFrame` または `setInterval`(100ms間隔)を使い、経過時間に応じてゲインを **0 → ユーザー設定ボリューム値** まで線形補間で増加させる。
3. フェードイン中にユーザーが手動でボリュームスライダーを操作した場合は、その時点の補間値に対してスライダー比率をかけた値を目標値として再設定する(操作を妨げない)。
4. フェードイン完了後は通常の音量制御に戻る(GainNodeへの直接操作に切り替え)。
- フェードイン進行中は、コンソール上部に小さなプログレスバー(横幅100%、高さ4px、アクセントカラー)を表示し、完了時に自動的に非表示にする。
- フェードイン中に「停止」ボタンを押した場合はフェードインを即座に中断し、通常停止処理を行う。
- スリープタイマーのフェードアウトとは独立して動作する(両方設定可能)。
### 2-3. 共有リンクとの整合
- 既存の共有リンクのURLパラメータにフェードイン設定は含めない(受信者の環境設定を尊重するため)。
## 3. 既存機能との整合
- Web Audio APIのGainNodeは既存コードで各チャンネルに設定済みのため、その値を再生開始時に一時的に0へセットするだけで実装可能。既存のボリュームスライダーのUIや値管理ロジックは変更しない。
- スリープタイマー・マイミックス保存・ビジュアライザーなど既存機能は一切変更しない。
- localStorage追加キーは `soundmap_fadein` 1つのみで既存キーと衝突しない。
- スマホのタブUI・PCの左右レイアウトともに、スリープタイマーと同じセクション内または隣接した位置に追加するため、レイアウト崩れのリスクが低い。
💬 返信 (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