移調(キー変更)後にテンポ表示BPMが更新されない・再生中の移調切替でノート音程がずれる

## 1. 不具合の内容

practice.php のテンポスライダー `updateTempo()` は `#bpm-val` を `baseBPM * (tempo/100)` で更新するが、`updateKey()` 側は `#bpm-val` を触らない。これ自体は軽微だが、より深刻なのは **再生中に移調セレクトを変更した場合**。Web Audio API でスケジュール済みの OscillatorNode / AudioBufferSourceNode はすでにノート番号を元に周波数が確定してキューに積まれており、`updateKey()` が `keyOffset` 変数を書き換えても**既にスケジュール済みの発音には反映されない**。結果として、移調前と移調後のノートが混在し、ハーモニーが崩壊した状態で再生が続く。

## 2. 根拠・発生条件

- `pages/practice.php` の `<select id="key-select" onchange="updateKey(this.value)">` は再生状態を確認せずに即時 `keyOffset` を更新する設計になっていると推定される（`togglePlay` / `stopPlayback` とは独立したコールバック）。
- Web Audio API のスケジューリングは look-ahead バッファ（一般的に 100〜200 ms 先まで先読み）を使うため、変更直後の数音は旧キーのまま発音される。
- 手順: 曲を再生 → 移調セレクトで +2 などに変更 → 直後の数音が旧キー、その後が新キーで鳴り、声部間の音程が一時的に崩れる。

## 3. 期待動作

- 再生中に移調を変更した場合は**いったん停止してから**新しいキーで先頭(または現在小節)から再スケジュールする。
- または移調セレクトを再生中はグレーアウト(disabled)にして、停止中のみ変更可能とする（実装が簡単で確実）。

## 4. 修正方針

### 案A（推奨・簡単）: 再生中は移調セレクトを無効化
```javascript
// updateTempo / togglePlay / stopPlayback 内でセレクトの disabled を制御
function togglePlay() {
if (isPlaying) {
pausePlayback();
document.getElementById('key-select').disabled = false;
} else {
document.getElementById('key-select').disabled = true;
startPlayback();
}
}
function stopPlayback() {
// ... 既存の停止処理 ...
document.getElementById('key-select').disabled = false;
}
```
CSSで `select:disabled { opacity: 0.5; cursor: not-allowed; }` を追加し、ツールチップ `title="再生中は変更できません（一度停止してください）"` を設定する。

### 案B: 移調変更時に自動再起動
```javascript
function updateKey(val) {
keyOffset = parseInt(val, 10);
if (isPlaying) {
stopPlayback(); // スケジュール済みノートをすべてキャンセル
startPlayback(); // 現在の小節位置から新キーで再スケジュール
}
// ピアノロール再描画
drawPianoRoll();
}
```
案Aの方がユーザーへの説明が明確で実装ミスが少ないため推奨。テンポ変更も同様に再生中は再スケジュールが必要な場合は同じ対処を適用すること。既存のミュート・ソロ・音量操作（GainNode操作）はリアルタイム変更可能なので影響なし。