Upload 2 files

MIDIGenerator.js

@@ -0,0 +1,381 @@
+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();
+    }
+}