Skip to content

[WIP] 複数の音声出力デバイスから同時に音を出すプロジェクトを新規作成 #285

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
okathira wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

[WIP] 複数の音声出力デバイスから同時に音を出すプロジェクトを新規作成 #285

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
150 changes: 138 additions & 12 deletions Scratchpad.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,49 @@

## 現在のタスク

リポジトリの全体像とルールの整合性確認
audio-multi-outputプロジェクトのリンクまとめページやVite設定、SNSリンクの設置
audio-multi-outputプロジェクトのGrid2への更新
audio-multi-outputプロジェクトのPlayButtonをSwitchに変更
audio-multi-outputプロジェクトの全体再生ボタンの動作変更
audio-multi-outputプロジェクトの重複再生問題の修正
audio-multi-outputプロジェクトのトグル状態変化による制御の実装
audio-multi-outputプロジェクトの位相反転スイッチの注意書き削除

## 進捗状況

[X] リポジトリ構造の確認
[X] 各ルールファイルの内容確認
[X] ルール間の整合性分析
[X] Scratchpad情報の更新
[X] global.mdcとScratchpad.mdの関係明確化
[X] Lessons.mdファイルの作成と関連ルールの整備
[X] global.mdcファイルの日本語化
[X] global.mdcのコマンド例の文字列を原文に修正
[X] README.mdの更新（開発サポートファイルとルールファイルの情報追加）
[X] repository.mdcの更新（ルールとサポートファイルの情報追加）
[X] プロジェクトディレクトリの作成
[X] 基本ファイル構造の作成
[X] DeviceManagerの実装
[X] OscillatorControlの実装
[X] OutputControllerの実装
[X] メインAppコンポーネントの実装
[X] スタイリングの追加
[ ] 動作確認とテスト
[X] Vite設定への追加
[X] メインindex.htmlへのリンク追加
[X] SNSリンクの設置（Reactコンポーネント使用）
[X] Grid2への更新
[X] PlayButtonのSwitch化
[X] 全体再生ボタンの動作変更
[X] 重複再生問題の修正
[X] トグル状態変化による制御の実装
[X] 位相反転スイッチの注意書き削除

## タスク詳細

調整済みの設計に基づいて、audio-multi-outputプロジェクトを実装します。
WebAudio APIとAudio Output Devices APIを使用して、複数の音声出力デバイスから独立した波形を同時再生できるWebアプリケーションを構築します。

### 主な調整ポイント
- ディレクトリ構造をコロケーション原則に従って調整
- 状態管理（Jotai）の使用方法をルールに合わせて調整
- 型定義の配置を適切な場所に調整
- インポート/エクスポート方法をnamed importに統一

## メモと反省

- 新しいプロジェクト設計の調整作業を開始
- 既存のコーディングルールとの整合性を確保することが重要

## リポジトリ構造分析結果

Expand Down Expand Up @@ -48,4 +77,101 @@
- ルールの分割と再構成により、責任範囲がより明確になった
- 日本語化によりグローバルルールの一貫性が向上した
- コマンド例やプロンプトなどの技術的な文字列は原文のままにすることで正確性を確保
- ドキュメントとルールファイルの相互参照により、プロジェクト全体の把握がしやすくなった
- ドキュメントとルールファイルの相互参照により、プロジェクト全体の把握がしやすくなった

## 実装完了

audio-multi-outputプロジェクトの実装が完了しました。

### 実装された機能
- DeviceManager: 音声出力デバイスの検出、選択、権限管理
- OscillatorControl: 各デバイスごとの波形、周波数、位相反転設定
- OutputController: 音声出力の制御、再生/停止機能
- App: メインアプリケーション、ブラウザサポートチェック
- 完全なREADMEドキュメント

### 技術的特徴
- コロケーション原則に基づく設計
- Jotaiによる状態管理（カスタムフック提供方式）
- TypeScriptによる型安全性
- Web Audio API、Audio Output Devices API、Media Devices APIの活用
- レスポンシブなUI設計

## 追加タスク詳細

他のプロジェクトと同様に以下の設定を行います：
- Vite設定ファイルにaudio-multi-outputプロジェクトを追加
- メインのindex.htmlにプロジェクトリンクを追加
- プロジェクト内にSNSリンクを設置

## 設定完了

audio-multi-outputプロジェクトの統合設定が完了しました。

### 完了した設定
- Vite設定ファイル（vite.config.ts）にaudio-multi-outputプロジェクトを追加
- メインのindex.htmlにプロジェクトリンクを追加（「Audio Multi Output - 複数デバイス音声出力」）
- ReactコンポーネントのSocialIconsを使用してSNSリンクを設置
- MUIベースの統一されたデザインでSNSリンクを表示

### 設定内容
- プロジェクトは他のプロジェクトと同様にマルチページアプリケーションとして設定
- 右上にSNSリンクが固定表示される（MUIのIconButtonとSvgIconを使用）
- 目次アイコンからメインページに戻ることが可能
- ブラウザサポートエラー画面でもSNSリンクが表示される

## API実装の更新

### 変更内容
- `selectAudioOutput` APIの代わりに`mediaDevices.enumerateDevices`と`AudioContext.setSinkId`を組み合わせた実装に変更
- `HTMLAudioElement.setSinkId`の代わりに`AudioContext.setSinkId`を使用
- `MediaStreamDestination`と`HTMLAudioElement`を使用した複雑な実装を、直接`AudioContext.destination`に接続するシンプルな実装に変更

### 技術的改善
- MDNドキュメントに基づく標準的なWeb Audio API実装
- Chrome 110以降でサポートされる`AudioContext.setSinkId`を活用
- 権限要求は`getUserMedia`を使用してデバイス列挙権限を取得
- ブラウザサポートチェックを`AudioContext.setSinkId`の実際の存在確認に更新

## ユーザビリティ改善

### 位相反転機能の制限事項説明追加
- メインページのフッターに「重要な制限事項」セクションを追加
- 位相反転機能がノイズキャンセリングには期待通りに機能しない可能性について説明
- PhaseSwitchコンポーネントに具体的な注意書きを追加

### アクセシビリティ改善
- 見出しレベルの階層を修正（h1 → h2 → h3の適切な順序）
- App.tsxのフッター見出しをh4からh2に変更
- DevicePanel.tsxの見出しをh4からh3に変更

## MUI適用

### 全コンポーネントのMUI化完了
- **DeviceManager**: Box、Typography、Alert、Button、Checkbox、FormControlLabel
- **DeviceSelector**: Box、Button、Checkbox、FormControlLabel、Typography
- **OscillatorControl**: Box、Typography、Card、CardContent
- **WaveformSelector**: FormControl、InputLabel、Select、MenuItem、Box
- **FrequencySlider**: Box、Typography、Slider
- **PhaseSwitch**: Box、FormControlLabel、Switch、Typography
- **OutputController**: Box、Typography、Divider
- **PlayButton**: Button、PlayArrow、Stopアイコン
- **DevicePanel**: Card、CardContent、Typography、Box、Chip、Stack
- **App**: Container、Grid2、Typography、Alert、Box、Paper、List、ListItem、ListItemText

### デザイン改善
- 統一されたMUIテーマによる一貫したデザイン
- レスポンシブレイアウト（Grid2、Container）
- 適切な余白とスペーシング（sx prop）
- カード形式による情報の整理
- アイコン付きボタンによる直感的なUI
- Chipによる設定値の視覚的表示

### 最新の更新
- 非推奨の`Grid`コンポーネントから`Grid2`に変更
- `Grid2`の新しいAPIに対応（`size`プロパティの使用）
- `PlayButton`コンポーネントを`Switch`に変更してトグルスイッチによる直感的なUI操作を実現
- 全体再生ボタンを実際の音声再生ではなく、各デバイスのトグルスイッチ状態を一括操作する機能に変更
- 重複再生問題を修正：既に再生中のデバイスでは新しい音声を開始しない、全体スイッチの状態を実際の再生状態に基づいて更新
- トグル状態変化による制御：スイッチのON/OFF状態変化で直接再生・停止を制御、より直感的なインターフェースを実現
- 位相反転スイッチの注意書きを削除してUIをすっきりと整理
8 changes: 4 additions & 4 deletions eslint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import typescriptEslintParser from "@typescript-eslint/parser";
import eslintConfigPrettier from "eslint-config-prettier";
// @ts-expect-error 型定義がない
import html from "eslint-plugin-html";
import importX from "eslint-plugin-import-x";
import { flatConfigs } from "eslint-plugin-import-x";
// reactPlugin.configs.flatの型定義が曖昧 ref: https://github.com/jsx-eslint/eslint-plugin-react/issues/3878
import reactPlugin from "eslint-plugin-react";
// @ts-expect-error 型定義がない ref: https://github.com/facebook/react/issues/30119
Expand Down Expand Up @@ -39,10 +39,10 @@ export default config(
tsEslintConfigs.recommendedTypeChecked,
// @ts-expect-error 型定義が曖昧
reactPlugin.configs.flat.recommended,
// @ts-expect-error型定義が曖昧
// @ts-expect-error 型定義が曖昧
reactPlugin.configs.flat["jsx-runtime"],
importX.flatConfigs.recommended,
importX.flatConfigs.typescript,
flatConfigs.recommended,
flatConfigs.typescript,
{
// eslint-plugin-react-hooks
plugins: {
Expand Down
154 changes: 154 additions & 0 deletions src/audio-multi-output/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
import {
Container,
Grid2,
Typography,
Alert,
Box,
Paper,
List,
ListItem,
ListItemText,
} from "@mui/material";
import { useEffect, useState } from "react";

import { DeviceManager } from "./features/DeviceManager";
import { OscillatorControl } from "./features/OscillatorControl";
import { OutputController } from "./features/OutputController";
import { checkBrowserSupport } from "./utils/audioUtils";
import { SocialIcons } from "../shared/components/SocialIcons";

import type React from "react";

export const App: React.FC = () => {
const [browserSupport, setBrowserSupport] = useState({
webAudio: false,
audioOutput: false,
mediaDevices: false,
});

useEffect(() => {
setBrowserSupport(checkBrowserSupport());
}, []);

const isSupported = browserSupport.webAudio && browserSupport.mediaDevices;

if (!isSupported) {
return (
<Container maxWidth="md" sx={{ py: 3 }}>
<SocialIcons githubURL="https://github.com/okathira-dev/client-web-api-sandbox/tree/main/src/audio-multi-output" />
<Typography variant="h3" component="h1" sx={{ mb: 3 }}>
Audio Multi Output
</Typography>
<Alert severity="error">
<Typography variant="h6" component="h2" sx={{ mb: 2 }}>
ブラウザサポートエラー
</Typography>
<List>
{!browserSupport.webAudio && (
<ListItem>
<ListItemText primary="Web Audio API がサポートされていません" />
</ListItem>
)}
{!browserSupport.mediaDevices && (
<ListItem>
<ListItemText primary="Media Devices API がサポートされていません" />
</ListItem>
)}
{!browserSupport.audioOutput && (
<ListItem>
<ListItemText primary="Audio Output Devices API がサポートされていません（一部機能が制限されます）" />
</ListItem>
)}
</List>
<Typography>最新のブラウザをご利用ください。</Typography>
</Alert>
</Container>
);
}

return (
<Container maxWidth="xl" sx={{ py: 3 }}>
<SocialIcons githubURL="https://github.com/okathira-dev/client-web-api-sandbox/tree/main/src/audio-multi-output" />

<Box component="header" sx={{ mb: 4, textAlign: "center" }}>
<Typography variant="h3" component="h1" sx={{ mb: 2 }}>
Audio Multi Output
</Typography>
<Typography variant="h6" color="text.secondary" sx={{ mb: 2 }}>
複数の音声出力デバイスから独立した波形を同時再生
</Typography>
{!browserSupport.audioOutput && (
<Alert severity="warning" sx={{ mt: 2 }}>
Audio Output Devices API
がサポートされていないため、デバイス選択機能が制限されます。
</Alert>
)}
</Box>

<Grid2 container spacing={4} sx={{ mb: 4 }}>
<Grid2 size={{ xs: 12, md: 6 }}>
<Paper elevation={2} sx={{ p: 3 }}>
<DeviceManager />
</Paper>
</Grid2>
<Grid2 size={{ xs: 12, md: 6 }}>
<Paper elevation={2} sx={{ p: 3 }}>
<OscillatorControl />
</Paper>
</Grid2>
</Grid2>

<Paper elevation={2} sx={{ p: 3, mb: 4 }}>
<OutputController />
</Paper>

<Paper
component="footer"
elevation={1}
sx={{
p: 3,
bgcolor: "grey.50",
borderRadius: 2,
}}
>
<Typography variant="h5" component="h2" sx={{ mb: 2 }}>
使用方法:
</Typography>
<List>
<ListItem>
<ListItemText primary="1. 「デバイス選択権限を要求」ボタンをクリックして、音声出力デバイスへのアクセス権限を取得" />
</ListItem>
<ListItem>
<ListItemText primary="2. 使用したい音声出力デバイスを選択" />
</ListItem>
<ListItem>
<ListItemText primary="3. 各デバイスの波形、周波数、位相反転を設定" />
</ListItem>
<ListItem>
<ListItemText primary="4. 「再生」ボタンで音声出力を開始" />
</ListItem>
</List>

<Box sx={{ mt: 3 }}>
<Typography variant="h5" component="h2" sx={{ mb: 2 }}>
制限事項:
</Typography>
<List>
<ListItem>
<ListItemText
primary={
<Box>
<Typography component="span" sx={{ fontWeight: "bold" }}>
位相反転機能について:
</Typography>{" "}
実装方法や出力デバイス間の環境差により（？）、位相反転はノイズキャンセリングなどのシビアな要件には期待通りに機能しない場合があります。
</Box>
}
/>
</ListItem>
</List>
</Box>
</Paper>
</Container>
);
};
Loading