feat: unify track instrument UI with pitch offset controls

Y-RyuZU · claude · Y-RyuZU · commit 00deeacffcc6 · 2026-02-27T23:35:07.000+09:00
- Remove global instrument selector; all instrument config is per-track
- Auto-open Tracks panel when any MIDI is loaded
- Remove "Global Sample" option; default instrument is now pling
- Add per-track pitch offset with -/+ buttons (semitone transpose)
- Auto-apply default instruments on MIDI load (no manual OGG needed)

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/src/components/features/noteblock/NoteBlockPlayer.tsx b/src/components/features/noteblock/NoteBlockPlayer.tsx
@@ -12,17 +12,8 @@ import { Play, Pause, Download, Settings, Music } from 'lucide-react';
 import { useNoteBlockAudio } from './useNoteBlockAudio';
 import { useVisualizer } from './useVisualizer';
 import { presets } from './presets';
-import { INSTRUMENT_PRESETS } from './instrumentPresets';
 import TrackInstrumentPanel from './TrackInstrumentPanel';
 
-const NOTE_NAMES = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
-const BASE_NOTES: string[] = [];
-for (let octave = 2; octave <= 6; octave++) {
-  for (const name of NOTE_NAMES) {
-    BASE_NOTES.push(`${name}${octave}`);
-  }
-}
-
 function formatTime(seconds: number): string {
   const m = Math.floor(seconds / 60);
   const s = Math.floor(seconds % 60);
@@ -35,12 +26,9 @@ export default function NoteBlockPlayer() {
 
   const vizContainerRef = useRef<HTMLDivElement>(null);
   const vizInitializedRef = useRef(false);
-  const oggInputRef = useRef<HTMLInputElement>(null);
   const midiInputRef = useRef<HTMLInputElement>(null);
   const bgInputRef = useRef<HTMLInputElement>(null);
 
-  const [baseNote, setBaseNote] = useState('F#4');
-  const [globalInstrument, setGlobalInstrument] = useState('harp');
   const [presetIndex, setPresetIndex] = useState('0');
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [tracksOpen, setTracksOpen] = useState(false);
@@ -108,51 +96,12 @@ export default function NoteBlockPlayer() {
     }
   }, [applyDetailOptions]);
 
-  // Auto-load harp as default global instrument on mount
+  // Auto-open tracks panel when MIDI is loaded
   useEffect(() => {
-    const loadDefault = async () => {
-      try {
-        const preset = INSTRUMENT_PRESETS.find(p => p.id === 'harp');
-        if (!preset) return;
-        const res = await fetch(preset.oggUrl);
-        const blob = await res.blob();
-        const file = new File([blob], 'harp.ogg', { type: 'audio/ogg' });
-        await audio.loadSample(file, preset.baseNote);
-        setBaseNote(preset.baseNote);
-      } catch { /* silent */ }
-    };
-    loadDefault();
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const handleGlobalInstrumentChange = async (value: string) => {
-    setGlobalInstrument(value);
-    if (value === 'custom') return;
-    const preset = INSTRUMENT_PRESETS.find(p => p.id === value);
-    if (!preset) return;
-    try {
-      const res = await fetch(preset.oggUrl);
-      const blob = await res.blob();
-      const file = new File([blob], `${preset.id}.ogg`, { type: 'audio/ogg' });
-      await ensureVisualizer();
-      await audio.loadSample(file, preset.baseNote);
-      setBaseNote(preset.baseNote);
-    } catch { /* silent */ }
-  };
-
-  const handleOggChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-    setGlobalInstrument('custom');
-    await ensureVisualizer();
-    await audio.loadSample(file, baseNote);
-  };
-
-  const handleBaseNoteChange = async (value: string) => {
-    setBaseNote(value);
-    await ensureVisualizer();
-    await audio.reloadSample(value);
-  };
+    if (audio.trackInfos.length > 0) {
+      setTracksOpen(true);
+    }
+  }, [audio.trackInfos]);
 
   const handleMidiChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
@@ -188,13 +137,11 @@ export default function NoteBlockPlayer() {
     audio.seekTo(value[0]);
   };
 
-  const hasTrackSamplers = audio.trackAssignments.some(a => !a.muted && a.instrumentId !== 'global');
-  const ready = (audio.sampleLoaded || hasTrackSamplers) && audio.midiLoaded;
+  const ready = audio.midiLoaded;
 
   return (
     <div className="flex flex-col h-full gap-2">
       {/* Hidden file inputs */}
-      <input ref={oggInputRef} type="file" accept=".ogg,audio/*" onChange={handleOggChange} className="hidden" />
       <input ref={midiInputRef} type="file" accept=".mid,.midi" onChange={handleMidiChange} className="hidden" />
       <input ref={bgInputRef} type="file" accept="image/*" onChange={handleBgChange} className="hidden" />
 
@@ -257,45 +204,6 @@ export default function NoteBlockPlayer() {
 
           <div className="w-px h-4 bg-white/20" />
 
-          {/* Global instrument selector */}
-          <Select value={globalInstrument} onValueChange={handleGlobalInstrumentChange}>
-            <SelectTrigger className="h-7 w-28 text-[11px] bg-transparent border-white/20 text-gray-100">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {INSTRUMENT_PRESETS.map(p => (
-                <SelectItem key={p.id} value={p.id} className="text-xs">{p.name}</SelectItem>
-              ))}
-              <SelectItem value="custom" className="text-xs">Custom OGG...</SelectItem>
-            </SelectContent>
-          </Select>
-
-          {globalInstrument === 'custom' && (
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-7 px-2 text-[11px] text-gray-200 hover:text-white hover:bg-white/15"
-              onClick={() => oggInputRef.current?.click()}
-            >
-              OGG {audio.sampleLoaded && <span className="w-1.5 h-1.5 rounded-full bg-green-400 ml-1" />}
-            </Button>
-          )}
-
-          {globalInstrument === 'custom' && (
-            <Select value={baseNote} onValueChange={handleBaseNoteChange}>
-              <SelectTrigger className="h-7 w-16 text-[11px] bg-transparent border-white/20 text-gray-100">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {BASE_NOTES.map(note => (
-                  <SelectItem key={note} value={note} className="text-xs">{note}</SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          )}
-
-          <div className="w-px h-4 bg-white/20" />
-
           <Button
             variant="ghost"
             size="sm"
@@ -314,7 +222,7 @@ export default function NoteBlockPlayer() {
             BG
           </Button>
 
-          {audio.trackInfos.length > 0 && (
+          {audio.midiLoaded && (
             <>
               <div className="w-px h-4 bg-white/20" />
               <Button
@@ -355,7 +263,7 @@ export default function NoteBlockPlayer() {
         </div>
 
         {/* Track instrument panel */}
-        {tracksOpen && audio.trackInfos.length > 0 && (
+        {tracksOpen && audio.midiLoaded && (
           <div className="p-2 rounded border border-white/20 bg-black/40 backdrop-blur-sm">
             <TrackInstrumentPanel
               trackInfos={audio.trackInfos}
diff --git a/src/components/features/noteblock/TrackInstrumentPanel.tsx b/src/components/features/noteblock/TrackInstrumentPanel.tsx
@@ -6,17 +6,10 @@ import { Checkbox } from '@/components/ui/checkbox';
 import {
   Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
 } from '@/components/ui/select';
+import { Minus, Plus } from 'lucide-react';
 import type { TrackInfo, TrackAssignment } from './types';
 import { INSTRUMENT_PRESETS } from './instrumentPresets';
 
-const NOTE_NAMES = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
-const BASE_NOTES: string[] = [];
-for (let octave = 2; octave <= 6; octave++) {
-  for (const name of NOTE_NAMES) {
-    BASE_NOTES.push(`${name}${octave}`);
-  }
-}
-
 interface TrackInstrumentPanelProps {
   trackInfos: TrackInfo[];
   trackAssignments: TrackAssignment[];
@@ -39,14 +32,13 @@ export default function TrackInstrumentPanel({
       const next = prev.map(a =>
         a.trackIndex === trackIndex ? { ...a, ...patch } : a
       );
-      // Defer onApply to avoid setState-during-render warning
       queueMicrotask(() => onApply(next));
       return next;
     });
   }, [onApply]);
 
   return (
-    <div className="space-y-1">
+    <div className="space-y-1.5">
       {trackInfos.map(track => {
         const assignment = draft.find(a => a.trackIndex === track.index);
         if (!assignment) return null;
@@ -66,6 +58,7 @@ export default function TrackInstrumentPanel({
               {track.noteCount}n
             </span>
 
+            {/* Instrument selector */}
             <Select
               value={assignment.instrumentId}
               onValueChange={(v) => handleChange(track.index, {
@@ -77,14 +70,14 @@ export default function TrackInstrumentPanel({
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="global" className="text-xs">Global Sample</SelectItem>
-                <SelectItem value="custom" className="text-xs">Custom OGG...</SelectItem>
                 {INSTRUMENT_PRESETS.map(p => (
                   <SelectItem key={p.id} value={p.id} className="text-xs">{p.name}</SelectItem>
                 ))}
+                <SelectItem value="custom" className="text-xs">Custom OGG...</SelectItem>
               </SelectContent>
             </Select>
 
+            {/* Custom OGG upload */}
             {assignment.instrumentId === 'custom' && (
               <>
                 <input
@@ -108,21 +101,28 @@ export default function TrackInstrumentPanel({
               </>
             )}
 
-            {(assignment.instrumentId === 'custom' || assignment.instrumentId === 'global') && (
-              <Select
-                value={assignment.baseNote ?? 'F#4'}
-                onValueChange={(v) => handleChange(track.index, { baseNote: v })}
+            {/* Pitch offset: - [value] + */}
+            <div className="flex items-center gap-0">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-5 w-5 p-0 text-gray-300 hover:text-white hover:bg-white/15"
+                onClick={() => handleChange(track.index, { pitchOffset: (assignment.pitchOffset ?? 0) - 1 })}
               >
-                <SelectTrigger className="h-6 w-16 text-[11px] bg-transparent border-white/20 text-gray-100">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {BASE_NOTES.map(note => (
-                    <SelectItem key={note} value={note} className="text-xs">{note}</SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            )}
+                <Minus className="w-3 h-3" />
+              </Button>
+              <span className="text-[11px] text-gray-100 w-8 text-center tabular-nums font-mono">
+                {(assignment.pitchOffset ?? 0) >= 0 ? '+' : ''}{assignment.pitchOffset ?? 0}
+              </span>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-5 w-5 p-0 text-gray-300 hover:text-white hover:bg-white/15"
+                onClick={() => handleChange(track.index, { pitchOffset: (assignment.pitchOffset ?? 0) + 1 })}
+              >
+                <Plus className="w-3 h-3" />
+              </Button>
+            </div>
           </div>
         );
       })}
diff --git a/src/components/features/noteblock/types.ts b/src/components/features/noteblock/types.ts
@@ -18,5 +18,6 @@ export interface TrackAssignment {
   instrumentId: string;
   customOggFile?: File;
   baseNote?: string;
+  pitchOffset: number;
   muted: boolean;
 }
diff --git a/src/components/features/noteblock/useNoteBlockAudio.ts b/src/components/features/noteblock/useNoteBlockAudio.ts
@@ -5,6 +5,13 @@ import * as Tone from 'tone';
 import { Midi } from '@tonejs/midi';
 import type { TrackInfo, TrackAssignment } from './types';
 import { getPresetById } from './instrumentPresets';
+import { Frequency } from 'tone';
+
+function transposeName(noteName: string, semitones: number): string {
+  if (semitones === 0) return noteName;
+  const midi = Frequency(noteName).toMidi();
+  return Frequency(midi + semitones, 'midi').toNote();
+}
 
 export function useNoteBlockAudio() {
   const [sampleLoaded, setSampleLoaded] = useState(false);
@@ -131,30 +138,24 @@ export function useNoteBlockAudio() {
 
     setTrackInfos(infos);
 
-    // Default assignments: all tracks use 'harp'
+    // Default assignments: all tracks use 'pling'
     const defaultAssignments: TrackAssignment[] = infos.map(t => ({
       trackIndex: t.index,
-      instrumentId: sampleLoaded ? 'global' : 'harp',
+      instrumentId: 'pling',
+      pitchOffset: 0,
       muted: false,
     }));
     setTrackAssignments(defaultAssignments);
-
-    // Schedule all notes using global sampler (initial playback)
-    for (const track of midi.tracks) {
-      for (const note of track.notes) {
-        const id = transport.schedule((time) => {
-          samplerRef.current?.triggerAttackRelease(note.name, note.duration, time, note.velocity);
-        }, note.time);
-        scheduledEventsRef.current.push(id);
-      }
-    }
-
     setMidiDuration(midi.duration);
     setMidiLoaded(true);
+
+    // Auto-apply default assignments (loads pling sampler for all tracks)
+    await applyTrackAssignmentsInternal(defaultAssignments);
+
     return midi.duration;
-  }, [clearSchedule, disposeTrackSamplers, sampleLoaded]);
+  }, [clearSchedule, disposeTrackSamplers]);
 
-  const applyTrackAssignments = useCallback(async (assignments: TrackAssignment[]) => {
+  const applyTrackAssignmentsInternal = useCallback(async (assignments: TrackAssignment[]) => {
     if (!midiRef.current) return;
 
     setIsLoadingInstruments(true);
@@ -182,12 +183,7 @@ export function useNoteBlockAudio() {
         let url: string;
         let baseNote: string;
 
-        if (assignment.instrumentId === 'global') {
-          if (!blobUrlRef.current) continue;
-          cacheKey = `global-${assignment.baseNote ?? 'default'}`;
-          url = blobUrlRef.current;
-          baseNote = assignment.baseNote ?? 'F#4';
-        } else if (assignment.instrumentId === 'custom' && assignment.customOggFile) {
+        if (assignment.instrumentId === 'custom' && assignment.customOggFile) {
           cacheKey = `custom-${assignment.trackIndex}`;
           url = URL.createObjectURL(assignment.customOggFile);
           customBlobUrlsRef.current.add(url);
@@ -213,11 +209,13 @@ export function useNoteBlockAudio() {
         }
         trackSamplersRef.current.set(assignment.trackIndex, sampler);
 
-        // Schedule this track's notes to its sampler
+        // Schedule this track's notes to its sampler (with pitch offset)
+        const offset = assignment.pitchOffset ?? 0;
         for (const note of track.notes) {
           const s = sampler;
+          const transposed = transposeName(note.name, offset);
           const id = transport.schedule((time) => {
-            s.triggerAttackRelease(note.name, note.duration, time, note.velocity);
+            s.triggerAttackRelease(transposed, note.duration, time, note.velocity);
           }, note.time);
           scheduledEventsRef.current.push(id);
         }
@@ -231,6 +229,10 @@ export function useNoteBlockAudio() {
     }
   }, [clearSchedule, disposeTrackSamplers]);
 
+  const applyTrackAssignments = useCallback(async (assignments: TrackAssignment[]) => {
+    await applyTrackAssignmentsInternal(assignments);
+  }, [applyTrackAssignmentsInternal]);
+
   const loadMidiFromUrl = useCallback(async (url: string) => {
     const response = await fetch(url);
     const buffer = await response.arrayBuffer();

Original file line number	Diff line number	Diff line change
`@@ -18,5 +18,6 @@ export interface TrackAssignment {`
`18`	`18`	`instrumentId: string;`
`19`	`19`	`customOggFile?: File;`
`20`	`20`	`baseNote?: string;`
	`21`	`+ pitchOffset: number;`
`21`	`22`	`muted: boolean;`
`22`	`23`	`}`