Delete MIDIGenerator.js

MIDIGenerator.js

@@ -1,381 +0,0 @@
-import * as Tonal from 'tonal';
-
-export class MIDIGenerator {
-    constructor(container, getSynth) {
-        this.container = container;
-        this.getSynth = getSynth;
-        this.notes = []; // Array of {time, duration, note, velocity}
-        this.currentTime = 0;
-        this.isPlaying = false;
-        this.part = null;
-        this.playheadPosition = 0;
-        this.bars = 4;
-        this.barLength = 4; // beats per bar
-        this.totalBeats = this.bars * this.barLength;
-        this.pixelsPerBeat = 20;
-        this.pixelsPerSemitone = 8;
-        this.canvasWidth = 300;
-        this.canvasHeight = 200;
-        this.scrollX = 0;
-        this.scrollY = 60; // Start at C4
-        this.zoomX = 1;
-        this.zoomY = 1;
-
-        this.createUI();
-        this.generateMIDI();
-    }
-
-    createUI() {
-        this.container.innerHTML = `
-            <h3 class="panel-title">MIDI GENERATOR</h3>
-            <div class="midi-window">
-                <div class="midi-controls">
-                    <div class="control-group">
-                        <label>Key:</label>
-                        <select id="midiKey">
-                            <option value="C">C</option>
-                            <option value="C#">C#</option>
-                            <option value="D">D</option>
-                            <option value="D#">D#</option>
-                            <option value="E">E</option>
-                            <option value="F">F</option>
-                            <option value="F#">F#</option>
-                            <option value="G">G</option>
-                            <option value="G#">G#</option>
-                            <option value="A">A</option>
-                            <option value="A#">A#</option>
-                            <option value="B">B</option>
-                        </select>
-                    </div>
-                    <div class="control-group">
-                        <label>Scale:</label>
-                        <select id="midiScale">
-                            <option value="major">Major</option>
-                            <option value="minor">Minor</option>
-                            <option value="dorian">Dorian</option>
-                            <option value="phrygian">Phrygian</option>
-                            <option value="lydian">Lydian</option>
-                            <option value="mixolydian">Mixolydian</option>
-                            <option value="aeolian">Aeolian</option>
-                            <option value="locrian">Locrian</option>
-                        </select>
-                    </div>
-                    <div class="control-group">
-                        <label>Progression:</label>
-                        <input type="text" id="midiProgression" value="I-IV-V-I" placeholder="I-IV-V-I">
-                    </div>
-                    <div class="control-group">
-                        <label>Complexity:</label>
-                        <input type="range" id="midiComplexity" min="1" max="10" value="5">
-                        <span id="complexityValue">5</span>
-                    </div>
-                    <div class="control-group">
-                        <label>Octave Range:</label>
-                        <input type="number" id="minOctave" min="1" max="7" value="3"> -
-                        <input type="number" id="maxOctave" min="1" max="7" value="5">
-                    </div>
-                    <div class="control-group">
-                        <label>Bars:</label>
-                        <input type="number" id="midiBars" min="1" max="16" value="4">
-                    </div>
-                    <div class="control-group">
-                        <label>Style:</label>
-                        <select id="midiStyle">
-                            <option value="classical">Classical</option>
-                            <option value="jazz">Jazz</option>
-                            <option value="ambient">Ambient</option>
-                        </select>
-                    </div>
-                </div>
-                <div class="midi-generation-grid">
-                    <button class="midi-generation-btn" id="generateBtn">Generate</button>
-                    <button class="midi-generation-btn" id="clearBtn">Clear</button>
-                    <button class="midi-generation-btn" id="playBtn">Play</button>
-                    <button class="midi-generation-btn" id="stopBtn">Stop</button>
-                </div>
-                <div class="piano-roll-container">
-                    <canvas class="piano-roll-canvas" width="${this.canvasWidth}" height="${this.canvasHeight}"></canvas>
-                </div>
-            </div>
-        `;
-
-        this.canvas = this.container.querySelector('.piano-roll-canvas');
-        this.ctx = this.canvas.getContext('2d');
-
-        this.bindEvents();
-        this.drawPianoRoll();
-    }
-
-    bindEvents() {
-        this.container.querySelector('#generateBtn').addEventListener('click', () => this.generateMIDI());
-        this.container.querySelector('#clearBtn').addEventListener('click', () => this.clearNotes());
-        this.container.querySelector('#playBtn').addEventListener('click', () => this.play());
-        this.container.querySelector('#stopBtn').addEventListener('click', () => this.stop());
-        this.container.querySelector('#midiComplexity').addEventListener('input', (e) => {
-            this.container.querySelector('#complexityValue').textContent = e.target.value;
-        });
-        this.container.querySelector('#midiBars').addEventListener('input', (e) => {
-            this.bars = parseInt(e.target.value);
-            this.totalBeats = this.bars * this.barLength;
-            this.generateMIDI();
-        });
-
-        // Canvas events for editing
-        this.canvas.addEventListener('mousedown', (e) => this.handleCanvasClick(e));
-    }
-
-    generateMIDI() {
-        const key = this.container.querySelector('#midiKey').value;
-        const scale = this.container.querySelector('#midiScale').value;
-        const progressionStr = this.container.querySelector('#midiProgression').value;
-        const complexity = parseInt(this.container.querySelector('#midiComplexity').value);
-        const minOctave = parseInt(this.container.querySelector('#minOctave').value);
-        const maxOctave = parseInt(this.container.querySelector('#maxOctave').value);
-        const style = this.container.querySelector('#midiStyle').value;
-
-        this.notes = [];
-        this.bars = parseInt(this.container.querySelector('#midiBars').value);
-        this.totalBeats = this.bars * this.barLength;
-
-        const scaleNotes = Tonal.Scale.notes(key + ' ' + scale);
-        const progression = progressionStr.split('-').map(roman => roman.trim());
-
-        // Generate chord progression
-        const chords = progression.map(roman => {
-            const chord = Tonal.Chord.get(Tonal.RomanChord.toChord(roman, key + ' ' + scale));
-            return chord.notes.map(note => Tonal.Note.simplify(note));
-        });
-
-        // Generate notes based on style and complexity
-        this.generateNotes(chords, scaleNotes, complexity, minOctave, maxOctave, style);
-
-        this.drawPianoRoll();
-    }
-
-    generateNotes(chords, scaleNotes, complexity, minOctave, maxOctave, style) {
-        const beatsPerBar = this.barLength;
-        const totalBars = this.bars;
-
-        for (let bar = 0; bar < totalBars; bar++) {
-            const chord = chords[bar % chords.length];
-            const barStart = bar * beatsPerBar;
-
-            // Generate bass line
-            if (complexity >= 3) {
-                this.generateBassLine(chord, barStart, beatsPerBar, minOctave, style);
-            }
-
-            // Generate harmony
-            if (complexity >= 5) {
-                this.generateHarmony(chord, barStart, beatsPerBar, minOctave + 1, maxOctave, complexity);
-            }
-
-            // Generate melody
-            this.generateMelody(scaleNotes, chord, barStart, beatsPerBar, minOctave + 1, maxOctave, complexity, style);
-        }
-    }
-
-    generateBassLine(chord, barStart, beatsPerBar, minOctave, style) {
-        const root = chord[0] + minOctave;
-        let currentNote = root;
-
-        for (let beat = 0; beat < beatsPerBar; beat += 0.5) {
-            if (style === 'jazz') {
-                // Walking bass
-                const possibleNotes = [root, chord[2] + minOctave, chord[4] + minOctave, Tonal.Note.transpose(root, '2M')];
-                currentNote = possibleNotes[Math.floor(Math.random() * possibleNotes.length)];
-            }
-            this.notes.push({
-                time: barStart + beat,
-                duration: 0.5,
-                note: currentNote,
-                velocity: 0.7
-            });
-        }
-    }
-
-    generateHarmony(chord, barStart, beatsPerBar, minOctave, maxOctave, complexity) {
-        const harmonyNotes = chord.map(note => note + (minOctave + Math.floor(Math.random() * (maxOctave - minOctave + 1))));
-
-        for (let beat = 0; beat < beatsPerBar; beat += 1) {
-            const notesToPlay = complexity >= 7 ? harmonyNotes : [harmonyNotes[0], harmonyNotes[2]]; // Full chord or partial
-            notesToPlay.forEach(note => {
-                this.notes.push({
-                    time: barStart + beat,
-                    duration: 1,
-                    note: note,
-                    velocity: 0.5
-                });
-            });
-        }
-    }
-
-    generateMelody(scaleNotes, chord, barStart, beatsPerBar, minOctave, maxOctave, complexity, style) {
-        let currentBeat = 0;
-        const maxNoteLength = complexity >= 8 ? 0.25 : 0.5;
-
-        while (currentBeat < beatsPerBar) {
-            const noteLength = Math.random() < 0.7 ? 0.25 : (Math.random() < 0.5 ? 0.5 : 1);
-            const clampedLength = Math.min(noteLength, maxNoteLength, beatsPerBar - currentBeat);
-
-            let note;
-            if (style === 'classical' && complexity >= 6) {
-                // More complex melody with ornamentation
-                note = this.generateOrnamentedNote(scaleNotes, chord, minOctave, maxOctave);
-            } else {
-                // Simple scale-based melody
-                const octave = minOctave + Math.floor(Math.random() * (maxOctave - minOctave + 1));
-                note = scaleNotes[Math.floor(Math.random() * scaleNotes.length)] + octave;
-            }
-
-            this.notes.push({
-                time: barStart + currentBeat,
-                duration: clampedLength,
-                note: note,
-                velocity: 0.8
-            });
-
-            currentBeat += clampedLength;
-        }
-    }
-
-    generateOrnamentedNote(scaleNotes, chord, minOctave, maxOctave) {
-        // Simple ornamentation: trill or mordent
-        const baseNote = chord[Math.floor(Math.random() * chord.length)] + (minOctave + Math.floor(Math.random() * (maxOctave - minOctave + 1)));
-        // For now, just return base note. Could expand to add ornaments
-        return baseNote;
-    }
-
-    clearNotes() {
-        this.notes = [];
-        this.drawPianoRoll();
-    }
-
-    handleCanvasClick(e) {
-        const rect = this.canvas.getBoundingClientRect();
-        const x = (e.clientX - rect.left + this.scrollX) / this.zoomX;
-        const y = (e.clientY - rect.top + this.scrollY) / this.zoomY;
-
-        const beat = x / this.pixelsPerBeat;
-        const midiNote = 127 - Math.floor(y / this.pixelsPerSemitone);
-
-        // Check if there's a note at this position
-        const existingNoteIndex = this.notes.findIndex(note =>
-            Math.abs(note.time - beat) < 0.1 && Tonal.Note.midi(note.note) === midiNote
-        );
-
-        if (existingNoteIndex !== -1) {
-            // Remove note
-            this.notes.splice(existingNoteIndex, 1);
-        } else {
-            // Add note
-            this.notes.push({
-                time: Math.round(beat * 4) / 4, // Snap to 16th notes
-                duration: 0.25,
-                note: Tonal.Note.fromMidi(midiNote),
-                velocity: 0.8
-            });
-        }
-
-        this.drawPianoRoll();
-    }
-
-    drawPianoRoll() {
-        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-
-        // Draw grid
-        this.ctx.strokeStyle = '#39ff1430';
-        this.ctx.lineWidth = 1;
-
-        // Vertical lines (beats)
-        for (let beat = 0; beat <= this.totalBeats; beat++) {
-            const x = (beat * this.pixelsPerBeat - this.scrollX) * this.zoomX;
-            if (x >= 0 && x <= this.canvas.width) {
-                this.ctx.beginPath();
-                this.ctx.moveTo(x, 0);
-                this.ctx.lineTo(x, this.canvas.height);
-                this.ctx.stroke();
-            }
-        }
-
-        // Horizontal lines (semitones)
-        for (let note = 0; note <= 127; note++) {
-            const y = ((127 - note) * this.pixelsPerSemitone - this.scrollY) * this.zoomY;
-            if (y >= 0 && y <= this.canvas.height) {
-                this.ctx.beginPath();
-                this.ctx.moveTo(0, y);
-                this.ctx.lineTo(this.canvas.width, y);
-                this.ctx.stroke();
-            }
-        }
-
-        // Draw notes
-        this.ctx.fillStyle = '#39ff14';
-        this.notes.forEach(note => {
-            const midiNote = Tonal.Note.midi(note.note);
-            const x = (note.time * this.pixelsPerBeat - this.scrollX) * this.zoomX;
-            const y = ((127 - midiNote) * this.pixelsPerSemitone - this.scrollY) * this.zoomY;
-            const width = note.duration * this.pixelsPerBeat * this.zoomX;
-            const height = this.pixelsPerSemitone * this.zoomY;
-
-            if (x + width >= 0 && x <= this.canvas.width && y + height >= 0 && y <= this.canvas.height) {
-                this.ctx.fillRect(x, y, width, height);
-            }
-        });
-
-        // Draw playhead
-        if (this.isPlaying) {
-            const playheadX = (this.playheadPosition * this.pixelsPerBeat - this.scrollX) * this.zoomX;
-            this.ctx.strokeStyle = '#ff3939';
-            this.ctx.lineWidth = 2;
-            this.ctx.beginPath();
-            this.ctx.moveTo(playheadX, 0);
-            this.ctx.lineTo(playheadX, this.canvas.height);
-            this.ctx.stroke();
-        }
-    }
-
-    play() {
-        if (this.isPlaying) return;
-        this.isPlaying = true;
-        this.playheadPosition = 0;
-
-        this.part = new Tone.Part((time, note) => {
-            const synth = this.getSynth();
-            if (synth.triggerAttackRelease) {
-                synth.triggerAttackRelease(note.note, note.duration, time, note.velocity);
-            } else {
-                // For FM synth, trigger attack/release
-                synth.triggerAttack(note.note, time);
-                synth.triggerRelease(time + note.duration);
-            }
-        }, this.notes).start();
-
-        Tone.Transport.start();
-
-        // Animate playhead
-        const animate = () => {
-            if (!this.isPlaying) return;
-            this.playheadPosition += 0.1; // Adjust speed as needed
-            if (this.playheadPosition > this.totalBeats) {
-                this.stop();
-                return;
-            }
-            this.drawPianoRoll();
-            requestAnimationFrame(animate);
-        };
-        animate();
-    }
-
-    stop() {
-        this.isPlaying = false;
-        if (this.part) {
-            this.part.stop();
-            this.part.dispose();
-            this.part = null;
-        }
-        Tone.Transport.stop();
-        this.playheadPosition = 0;
-        this.drawPianoRoll();
-    }
-}