LogicWave DAW

Processing...

Untitled Project edit

00:00.000

BPM

Time

Key

Tracks

expand 100%

Project Name

Export Range

Full Project Custom Range

Format

WAV

Uncompressed

MP3

320kbps

FLAC

Lossless

OGG

Compressed

Processing...

piano MIDI Editor

e, true); view.setUint32(28, sampleRate * blockAlign, true); view.setUint16(32, blockAlign, true); view.setUint16(34, bitDepth, true); writeString(36, 'data'); view.setUint32(40, dataLength, true); // Write data let offset = 44; for (let i = 0; i < data.length; i++) { view.setInt16(offset, data[i], true); offset += 2; } return arrayBuffer; } // Sync ruler scroll with tracks container const tracksContainer = document.getElementById('tracks-container'); const ruler = document.querySelector('.ruler'); tracksContainer.addEventListener('scroll', () => { ruler.scrollLeft = tracksContainer.scrollLeft; }); // Initialize createMasterTrack(); createTrack('Lead Vocals', 'audio'); createTrack('Background Music', 'audio'); createTrack('Piano', 'midi'); // Render initial state with beats mode updateSnapGridOptions(); renderRuler(); updatePlayhead(); // Piano roll close button document.getElementById('piano-roll-close').addEventListener('click', () => { state.pianoRollOpen = false; updatePianoRoll(); }); // ============================================ // MIDI EDITOR - Added for MIDI editing functionality // ============================================ const midiEditor = { currentClip: null, currentTrack: null, tool: 'pencil', noteHeight: 20, pixelsPerBeat: 100 }; window.openMIDIEditor = function(clip, track) { midiEditor.currentClip = clip; midiEditor.currentTrack = track; document.getElementById('midi-editor-overlay').classList.add('show'); document.getElementById('midi-editor-clip-name').textContent = clip.name || 'Untitled'; initializeMIDIEditor(); renderMIDIEditor(); }; function closeMIDIEditor() { document.getElementById('midi-editor-overlay').classList.remove('show'); } function initializeMIDIEditor() { const keysContainer = document.getElementById('piano-roll-keys'); keysContainer.innerHTML = ''; const noteNames = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B']; const whiteKeys = [0, 2, 4, 5, 7, 9, 11]; for (let midiNote = 127; midiNote >= 0; midiNote--) { const octave = Math.floor(midiNote / 12) - 1; const noteName = noteNames[midiNote % 12]; const isWhite = whiteKeys.includes(midiNote % 12); const keyDiv = document.createElement('div'); keyDiv.className = `piano-key ${isWhite ? 'white' : 'black'}`; keyDiv.textContent = `${noteName}${octave}`; keyDiv.style.height = midiEditor.noteHeight + 'px'; keyDiv.addEventListener('click', () => { if (midiEditor.currentTrack?.instrument) { midiEditor.currentTrack.instrument.instance.noteOn(midiNote, 0.8); setTimeout(() => midiEditor.currentTrack.instrument.instance.noteOff(midiNote), 300); } }); keysContainer.appendChild(keyDiv); } } function renderMIDIEditor() { if (!midiEditor.currentClip) return; const gridCanvas = document.getElementById('piano-roll-grid-canvas'); const notesCanvas = document.getElementById('piano-roll-notes-canvas'); const width = midiEditor.currentClip.duration * midiEditor.pixelsPerBeat * (60 / state.bpm) * state.timeSignature.numerator; const height = 128 * midiEditor.noteHeight; gridCanvas.width = width; gridCanvas.height = height; notesCanvas.width = width; notesCanvas.height = height; drawMIDIGrid(gridCanvas); drawMIDINotes(notesCanvas); } function drawMIDIGrid(canvas) { const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); const whiteKeys = [0, 2, 4, 5, 7, 9, 11]; for (let i = 0; i <= 127; i++) { const y = (127 - i) * midiEditor.noteHeight; if (whiteKeys.includes(i % 12)) { ctx.fillStyle = 'rgba(255, 255, 255, 0.02)'; ctx.fillRect(0, y, canvas.width, midiEditor.noteHeight); } ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)'; ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(canvas.width, y); ctx.stroke(); } const beatsPerSecond = state.bpm / 60; const pixelsPerSecond = midiEditor.pixelsPerBeat * beatsPerSecond; for (let beat = 0; beat <= midiEditor.currentClip.duration * beatsPerSecond; beat++) { const x = beat / beatsPerSecond * pixelsPerSecond; ctx.strokeStyle = beat % state.timeSignature.numerator === 0 ? 'rgba(255, 255, 255, 0.2)' : 'rgba(255, 255, 255, 0.1)'; ctx.lineWidth = beat % state.timeSignature.numerator === 0 ? 2 : 1; ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, canvas.height); ctx.stroke(); } } function drawMIDINotes(canvas) { const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); if (!midiEditor.currentClip.midiNotes) return; const beatsPerSecond = state.bpm / 60; const pixelsPerSecond = midiEditor.pixelsPerBeat * beatsPerSecond; const noteMap = {}; midiEditor.currentClip.midiNotes.forEach(event => { if (event.type === 'noteOn') { if (!noteMap[event.note]) noteMap[event.note] = []; noteMap[event.note].push({ start: event, end: null }); } else if (event.type === 'noteOff' && noteMap[event.note]) { const lastNote = noteMap[event.note][noteMap[event.note].length - 1]; if (lastNote && !lastNote.end) lastNote.end = event; } }); Object.entries(noteMap).forEach(([note, events]) => { events.forEach(noteEvent => { if (!noteEvent.start) return; const midiNote = parseInt(note); const x = noteEvent.start.time * pixelsPerSecond; const y = (127 - midiNote) * midiEditor.noteHeight; const duration = noteEvent.end ? (noteEvent.end.time - noteEvent.start.time) : 0.25; const width = duration * pixelsPerSecond; ctx.fillStyle = '#4a9eff'; ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)'; ctx.lineWidth = 2; ctx.fillRect(x, y + 2, Math.max(width, 5), midiEditor.noteHeight - 4); ctx.strokeRect(x, y + 2, Math.max(width, 5), midiEditor.noteHeight - 4); }); }); } document.getElementById('midi-tool-pencil').addEventListener('click', () => { midiEditor.tool = 'pencil'; document.querySelectorAll('.midi-tool-btn').forEach(btn => btn.classList.remove('active')); document.getElementById('midi-tool-pencil').classList.add('active'); }); document.getElementById('midi-tool-select').addEventListener('click', () => { midiEditor.tool = 'select'; document.querySelectorAll('.midi-tool-btn').forEach(btn => btn.classList.remove('active')); document.getElementById('midi-tool-select').classList.add('active'); }); document.getElementById('midi-tool-erase').addEventListener('click', () => { midiEditor.tool = 'erase'; document.querySelectorAll('.midi-tool-btn').forEach(btn => btn.classList.remove('active')); document.getElementById('midi-tool-erase').classList.add('active'); }); document.getElementById('midi-editor-close').addEventListener('click', closeMIDIEditor); document.getElementById('piano-roll-notes-canvas').addEventListener('mousedown', (e) => { if (!midiEditor.currentClip) return; const canvas = e.target; const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left + canvas.parentElement.scrollLeft; const y = e.clientY - rect.top + canvas.parentElement.scrollTop; const beatsPerSecond = state.bpm / 60; const pixelsPerSecond = midiEditor.pixelsPerBeat * beatsPerSecond; const time = x / pixelsPerSecond; const midiNote = 127 - Math.floor(y / midiEditor.noteHeight); if (midiEditor.tool === 'pencil') { if (!midiEditor.currentClip.midiNotes) midiEditor.currentClip.midiNotes = []; midiEditor.currentClip.midiNotes.push( { type: 'noteOn', note: midiNote, velocity: 0.8, time: time }, { type: 'noteOff', note: midiNote, time: time + 0.25 } ); midiEditor.currentClip.midiNotes.sort((a, b) => a.time - b.time); renderMIDIEditor(); debouncedRenderTracks(); if (midiEditor.currentTrack?.instrument) { midiEditor.currentTrack.instrument.instance.noteOn(midiNote, 0.8); setTimeout(() => midiEditor.currentTrack.instrument.instance.noteOff(midiNote), 250); } } else if (midiEditor.tool === 'erase' && midiEditor.currentClip.midiNotes) { midiEditor.currentClip.midiNotes = midiEditor.currentClip.midiNotes.filter(event => !(event.note === midiNote && Math.abs(event.time - time) < 0.1) ); renderMIDIEditor(); debouncedRenderTracks(); } });

Tracks

inventory_2 Loaded WAM Plugins

Load New Plugin

Effect Chain

Available Plugins

Current Instrument

Available Instruments

Menu