("FloatVector");
}
// Compile the C++ code to WebAssembly:
// emcc wavetable-generator.cpp -o wavetable-generator.js -s WASM=1 -s EXPORTED_FUNCTIONS='["_malloc", "_free"]' -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' -s ALLOW_MEMORY_GROWTH=1 -O3
// Update WavetableOscillator.js to use WebAssembly
class WavetableOscillator {
constructor(audioContext, tableSize = 2048) {
this.audioContext = audioContext;
this.tableSize = tableSize;
this.wavetables = [];
this.currentWavetableIndex = 0;
this.phase = 0;
this.phaseIncrement = 0;
// Load WebAssembly module
this.wasmModule = null;
this.loadWasmModule();
}
async loadWasmModule() {
try {
this.wasmModule = await WebAssembly.instantiateStreaming(fetch('wavetable-generator.wasm'), {
env: {
memory: new WebAssembly.Memory({ initial: 256, maximum: 256 }),
abortStackOverflow: () => { throw new Error('Stack overflow'); },
}
});
console.log('WebAssembly module loaded successfully');
this.generateWavetables();
} catch (error) {
console.error('Failed to load WebAssembly module:', error);
}
}
generateWavetables() {
if (!this.wasmModule) {
console.error('WebAssembly module not loaded');
return;
}
const harmonicsLevels = [1, 2, 4, 8, 16, 32];
for (const harmonics of harmonicsLevels) {
const wavetable = this.wasmModule.instance.exports.generateWavetable(this.tableSize, harmonics);
this.wavetables.push(new Float32Array(wavetable));
}
}
// ... (rest of the WavetableOscillator class implementation)
}
// Update COSMOSCILLATOR.js to use the optimized WavetableOscillator
class COSMOSCILLATOR {
constructor(audioContext) {
this.audioContext = audioContext;
this.oscillators = [];
this.wavetableOscillator = new WavetableOscillator(audioContext);
// ... (rest of the constructor)
}
// ... (rest of the COSMOSCILLATOR class implementation)
}
5. Implement MIDI learning functionality
// MIDILearnManager.js
class MIDILearnManager {
constructor() {
this.midiAccess = null;
this.midiLearnMode = false;
this.midiMappings = new Map();
this.currentLearnTarget = null;
this.onMIDIMessage = this.onMIDIMessage.bind(this);
}
async initialize() {
try {
this.midiAccess = await navigator.requestMIDIAccess();
this.setupMIDIInputs();
console.log('MIDI access granted');
} catch (error) {
console.error('Failed to get MIDI access:', error);
}
}
setupMIDIInputs() {
for (const input of this.midiAccess.inputs.values()) {
input.onmidimessage = this.onMIDIMessage;
}
}
onMIDIMessage(message) {
const [status, data1, data2] = message.data;
if (this.midiLearnMode && this.currentLearnTarget) {
this.midiMappings.set(this.currentLearnTarget, { status, data1 });
this.midiLearnMode = false;
this.currentLearnTarget = null;
console.log(`MIDI mapping created for ${this.currentLearnTarget}`);
} else {
for (const [target, mapping] of this.midiMappings.entries()) {
if (status === mapping.status && data1 === mapping.data1) {
const normalizedValue = data2 / 127;
this.updateParameter(target, normalizedValue);
}
}
}
}
startMIDILearn(target) {
this.midiLearnMode = true;
this.currentLearnTarget = target;
console.log(`MIDI learn mode started for ${target}`);
}
updateParameter(target, value) {
// This method should be implemented in the main application to update UI and synth parameters
console.log(`Update parameter: ${target} = ${value}`);
}
}
// Update main.js to include MIDI learning functionality
document.addEventListener('DOMContentLoaded', () => {
// ... (previous code)
const midiLearnManager = new MIDILearnManager();
midiLearnManager.initialize();
// Add MIDI learn buttons to all sliders
sliders.forEach(slider => {
const midiLearnButton = document.createElement('button');
midiLearnButton.textContent = 'MIDI Learn';
midiLearnButton.classList.add('midi-learn-button');
midiLearnButton.addEventListener('click', () => {
midiLearnManager.startMIDILearn(slider.id);
});
slider.parentNode.appendChild(midiLearnButton);
});
// Update the updateParameter function to use MIDILearnManager
function updateParameter(parameterId, value) {
updateSliderValue(parameterId, value);
cosmoscillator.updateParameter(parameterId, value);
document.getElementById(parameterId).value = value;
}
midiLearnManager.updateParameter = updateParameter;
// ... (rest of the main.js code)
});
6. Add preset management functionality
// Add to COSMOSCILLATOR.js
class COSMOSCILLATOR {
// ... (previous code)
savePreset(name) {
const preset = {
oscillators: this.oscillators.map(osc => ({
volume: osc.volume,
detune: osc.detune,
wavetableIndex: osc.wavetableIndex
})),
filter: {
cutoff: this.filter.frequency.value,
resonance: this.filter.Q.value
},
envelope: {
attack: this.envelope.attack,
decay: this.envelope.decay,
sustain: this.envelope.sustain,
release: this.envelope.release
},
effects: {
reverbAmount: this.reverbAmount,
delayTime: this.delay.delayTime.value,
delayFeedback: this.delay.feedback.value
},
masterVolume: this.masterGain.gain.value
};
localStorage.setItem(`preset_${name}`, JSON.stringify(preset));
}
loadPreset(name) {
const preset = JSON.parse(localStorage.getItem(`preset_${name}`));
if (!preset) return;
// Apply preset values to synth parameters
preset.oscillators.forEach((oscPreset, index) => {
if (index >= this.oscillators.length) {
this.addOscillator();
}
this.updateOscillatorParameter(index, 'volume', oscPreset.volume);
this.updateOscillatorParameter(index, 'detune', oscPreset.detune);
this.updateOscillatorParameter(index, 'wavetableIndex', oscPreset.wavetableIndex);
});
this.updateParameter('filter-cutoff', preset.filter.cutoff);
this.updateParameter('filter-resonance', preset.filter.resonance);
this.updateParameter('env-attack', preset.envelope.attack);
this.updateParameter('env-decay', preset.envelope.decay);
this.updateParameter('env-sustain', preset.envelope.sustain);
this.updateParameter('env-release', preset.envelope.release);
this.updateParameter('reverb-amount', preset.effects.reverbAmount);
this.updateParameter('delay-time', preset.effects.delayTime);
this.updateParameter('delay-feedback', preset.effects.delayFeedback);
this.updateParameter('master-volume', preset.masterVolume);
}
getPresetList() {
return Object.keys(localStorage)
.filter(key => key.startsWith('preset_'))
.map(key => key.replace('preset_', ''));
}
deletePreset(name) {
localStorage.removeItem(`preset_${name}`);
}
}
// Update main.js to include preset management UI
document.addEventListener('DOMContentLoaded', () => {
// ... (previous code)
// Add preset management UI
const presetSection = document.createElement('div');
presetSection.className = 'preset-section';
presetSection.innerHTML = `
Presets
Save Preset
Load Preset
Delete Preset
`;
document.getElementById('cosmoscillator-container').appendChild(presetSection);
const presetNameInput = document.getElementById('preset-name');
const savePresetButton = document.getElementById('save-preset');
const presetList = document.getElementById('preset-list');
const loadPresetButton = document.getElementById('load-preset');
const deletePresetButton = document.getElementById('delete-preset');
function updatePresetList() {
const presets = cosmoscillator.getPresetList();
presetList.innerHTML = '';
presets.forEach(preset => {
const option = document.createElement('option');
option.value = preset;
option.textContent = preset;
presetList.appendChild(option);
});
}
savePresetButton.addEventListener('click', () => {
const presetName = presetNameInput.value.trim();
if (presetName) {
cosmoscillator.savePreset(presetName);
updatePresetList();
presetNameInput.value = '';
}
});
loadPresetButton.addEventListener('click', () => {
const selectedPreset = presetList.value;
if (selectedPreset) {
cosmoscillator.loadPreset(selectedPreset);
updateUI();
}
});
deletePresetButton.addEventListener('click', () => {
const selectedPreset = presetList.value;
if (selectedPreset) {
cosmoscillator.deletePreset(selectedPreset);
updatePresetList();
}
});
function updateUI() {
// Update all UI elements to reflect current synth state
updateOscillatorUI();
sliders.forEach(slider => {
const value = cosmoscillator.getParameter(slider.id);
updateSliderValue(slider.id, value);
slider.value = value;
});
}
// Initialize preset list
updatePresetList();
// ... (rest of the main.js code)
});
These implementations add MIDI learning functionality and preset management to the COSMOSCILLATOR synth. The MIDI learn feature allows users to map MIDI controllers to synth parameters, while the preset system enables saving, loading, and deleting synth configurations. Make sure to test these features thoroughly and adjust the UI as needed to fit your design preferences.
7. Implement modulation matrix
// Add to COSMOSCILLATOR.js
class ModulationMatrix {
constructor() {
this.sources = ['LFO1', 'LFO2', 'Envelope1', 'Envelope2'];
this.destinations = ['Osc1Pitch', 'Osc2Pitch', 'FilterCutoff', 'FilterResonance', 'AmpGain'];
this.matrix = {};
this.sources.forEach(source => {
this.matrix[source] = {};
this.destinations.forEach(dest => {
this.matrix[source][dest] = 0;
});
});
}
setModulation(source, destination, amount) {
if (this.sources.includes(source) && this.destinations.includes(destination)) {
this.matrix[source][destination] = amount;
}
}
getModulation(source, destination) {
return this.matrix[source][destination] || 0;
}
}
class COSMOSCILLATOR {
constructor(audioContext) {
// ... (previous constructor code)
this.modulationMatrix = new ModulationMatrix();
this.lfo1 = this.createLFO();
this.lfo2 = this.createLFO();
this.envelope1 = this.createEnvelope();
this.envelope2 = this.createEnvelope();
}
createLFO() {
const lfo = this.audioContext.createOscillator();
lfo.type = 'sine';
lfo.frequency.setValueAtTime(1, this.audioContext.currentTime);
lfo.start();
return lfo;
}
createEnvelope() {
return {
attack: 0.01,
decay: 0.1,
sustain: 0.5,
release: 0.5,
trigger: () => {
// Implement envelope triggering logic
}
};
}
applyModulation() {
const modulationSources = {
LFO1: this.lfo1.frequency,
LFO2: this.lfo2.frequency,
Envelope1: this.envelope1,
Envelope2: this.envelope2
};
Object.entries(this.modulationMatrix.matrix).forEach(([source, destinations]) => {
Object.entries(destinations).forEach(([destination, amount]) => {
if (amount !== 0) {
const modulationSource = modulationSources[source];
const modulationAmount = amount * 100; // Scale the modulation amount
switch (destination) {
case 'Osc1Pitch':
this.oscillators[0].detune.setValueAtTime(modulationAmount, this.audioContext.currentTime);
break;
case 'Osc2Pitch':
if (this.oscillators[1]) {
this.oscillators[1].detune.setValueAtTime(modulationAmount, this.audioContext.currentTime);
}
break;
case 'FilterCutoff':
this.filter.frequency.setValueAtTime(this.filter.frequency.value + modulationAmount, this.audioContext.currentTime);
break;
case 'FilterResonance':
this.filter.Q.setValueAtTime(this.filter.Q.value + modulationAmount / 100, this.audioContext.currentTime);
break;
case 'AmpGain':
this.masterGain.gain.setValueAtTime(this.masterGain.gain.value * (1 + modulationAmount / 100), this.audioContext.currentTime);
break;
}
}
});
});
}
// ... (rest of the COSMOSCILLATOR class implementation)
}
// Update main.js to include modulation matrix UI
document.addEventListener('DOMContentLoaded', () => {
// ... (previous code)
// Add modulation matrix UI
const modulationSection = document.createElement('div');
modulationSection.className = 'modulation-section';
modulationSection.innerHTML = `
Modulation Matrix
`;
document.getElementById('cosmoscillator-container').appendChild(modulationSection);
// Add event listeners for modulation matrix controls
const modulationInputs = document.querySelectorAll('#modulation-matrix input');
modulationInputs.forEach(input => {
input.addEventListener('input', (e) => {
const source = e.target.dataset.source;
const destination = e.target.dataset.destination;
const amount = parseFloat(e.target.value);
cosmoscillator.modulationMatrix.setModulation(source, destination, amount);
cosmoscillator.applyModulation();
});
});
// ... (rest of the main.js code)
});
8. Implement custom wavetable import functionality
// Add to WavetableOscillator.js
class WavetableOscillator {
// ... (previous code)
async importCustomWavetable(file) {
try {
const arrayBuffer = await file.arrayBuffer();
const audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer);
const channelData = audioBuffer.getChannelData(0);
// Resample the imported audio to match our wavetable size
const resampledData = this.resampleAudio(channelData, this.tableSize);
// Normalize the resampled data
const normalizedData = this.normalizeAudio(resampledData);
// Add the new wavetable
this.wavetables.push(normalizedData);
return this.wavetables.length - 1; // Return the index of the new wavetable
} catch (error) {
console.error('Error importing custom wavetable:', error);
return -1;
}
}
resampleAudio(input, outputLength) {
const output = new Float32Array(outputLength);
const inputLength = input.length;
const ratio = inputLength / outputLength;
for (let i = 0; i < outputLength; i++) {
const position = i * ratio;
const index = Math.floor(position);
const fraction = position - index;
const sample1 = input[index % inputLength];
const sample2 = input[(index + 1) % inputLength];
output[i] = sample1 + fraction * (sample2 - sample1);
}
return output;
}
normalizeAudio(input) {
const max = Math.max(...input.map(Math.abs));
return input.map(sample => sample / max);
}
}
// Update COSMOSCILLATOR.js to include custom wavetable import
class COSMOSCILLATOR {
// ... (previous code)
async importCustomWavetable(file) {
const newWavetableIndex = await this.wavetableOscillator.importCustomWavetable(file);
if (newWavetableIndex !== -1) {
console.log('Custom wavetable imported successfully');
return newWavetableIndex;
} else {
console.error('Failed to import custom wavetable');
return -1;
}
}
// ... (rest of the COSMOSCILLATOR class implementation)
}
// Update main.js to include custom wavetable import UI
document.addEventListener('DOMContentLoaded', () => {
// ... (previous code)
// Add custom wavetable import UI
const wavetableImportSection = document.createElement('div');
wavetableImportSection.className = 'wavetable-import-section';
wavetableImportSection.innerHTML = `
Custom Wavetable Import
Import Wavetable
`;
document.getElementById('cosmoscillator-container').appendChild(wavetableImportSection);
const wavetableFileInput = document.getElementById('wavetable-file');
const importWavetableButton = document.getElementById('import-wavetable');
importWavetableButton.addEventListener('click', async () => {
const file = wavetableFileInput.files[0];
if (file) {
const newWavetableIndex = await cosmoscillator.importCustomWavetable(file);
if (newWavetableIndex !== -1) {
// Update oscillator waveform selectors
updateOscillatorUI();
alert('Custom wavetable imported successfully');
} else {
alert('Failed to import custom wavetable');
}
} else {
alert('Please select a file to import');
}
});
// ... (rest of the main.js code)
});
9. Implement a simple sequencer
// Add to COSMOSCILLATOR.js
class Sequencer {
constructor(steps = 16) {
this.steps = steps;
this.currentStep = 0;
this.sequence = new Array(steps).fill(null);
this.isPlaying = false;
this.tempo = 120; // BPM
}
setStep(step, note) {
if (step >= 0 && step < this.steps) {
this.sequence[step] = note;
}
}
clearStep(step) {
if (step >= 0 && step < this.steps) {
this.sequence[step] = null;
}
}
setTempo(bpm) {
this.tempo = bpm;
}
start(callback) {
this.isPlaying = true;
this.play(callback);
}
stop() {
this.isPlaying = false;
this.currentStep = 0;
}
play(callback) {
if (!this.isPlaying) return;
const stepDuration = 60000 / this.tempo / 4; // Duration of a 16th note in milliseconds
if (this.sequence[this.currentStep] !== null) {
callback(this.sequence[this.currentStep], true); // Note on
}
this.currentStep = (this.currentStep + 1) % this.steps;
setTimeout(() => {
if (this.sequence[this.currentStep - 1] !== null) {
callback(this.sequence[this.currentStep - 1], false); // Note off
}
this.play(callback);
}, stepDuration);
}
}
class COSMOSCILLATOR {
constructor(audioContext) {
// ... (previous constructor code)
this.sequencer = new Sequencer();
}
// ... (previous methods)
startSequencer() {
this.sequencer.start((note, isNoteOn) => {
if (isNoteOn) {
this.noteOn(note);
} else {
this.noteOff(note);
}
});
}
stopSequencer() {
this.sequencer.stop();
}
// ... (rest of the COSMOSCILLATOR class implementation)
}
// Update main.js to include sequencer UI
document.addEventListener('DOMContentLoaded', () => {
// ... (previous code)
// Add sequencer UI
const sequencerSection = document.createElement('div');
sequencerSection.className = 'sequencer-section';
sequencerSection.innerHTML = `
Sequencer
Play
Stop
Tempo:
`;
document.getElementById('cosmoscillator-container').appendChild(sequencerSection);
const sequencerGrid = document.getElementById('sequencer-grid');
const sequencerPlayButton = document.getElementById('sequencer-play');
const sequencerStopButton = document.getElementById('sequencer-stop');
const sequencerTempoInput = document.getElementById('sequencer-tempo');
// Create sequencer grid
for (let i = 0; i < cosmoscillator.sequencer.steps; i++) {
const stepButton = document.createElement('button');
stepButton.className = 'sequencer-step';
stepButton.dataset.step = i;
stepButton.addEventListener('click', () => {
stepButton.classList.toggle('active');
if (stepButton.classList.contains('active')) {
cosmoscillator.sequencer.setStep(i, 60 + i); // Set note (C4 + step)
} else {
cosmoscillator.sequencer.clearStep(i);
}
});
sequencerGrid.appendChild(stepButton);
}
sequencerPlayButton.addEventListener('click', () => {
cosmoscillator.startSequencer();
});
sequencerStopButton.addEventListener('click', () => {
cosmoscillator.stopSequencer();
});
sequencerTempoInput.addEventListener('input', () => {
const tempo = parseInt(sequencerTempoInput.value);
if (tempo >= 60 && tempo <= 240) {
cosmoscillator.sequencer.setTempo(tempo);
}
});
// ... (rest of the main.js code)
});
These implementations add a modulation matrix, custom wavetable import functionality, and a simple sequencer to the COSMOSCILLATOR synth. The modulation matrix allows for complex sound design by modulating various parameters with LFOs and envelopes. The custom wavetable import feature enables users to create unique timbres by importing their own audio samples. The sequencer provides a way to create rhythmic patterns and melodies within the synth interface.
Make sure to test these new features thoroughly and adjust the UI as needed to fit your design preferences. You may also want to consider adding visualizations for the custom wavetables and modulation sources to enhance the user experience.
10. Implement visualizations for oscillators and envelopes
// Add to COSMOSCILLATOR.js
class Visualizer {
constructor(canvas, type) {
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.type = type;
}
drawOscillator(wavetable) {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.beginPath();
this.ctx.moveTo(0, this.canvas.height / 2);
for (let i = 0; i < wavetable.length; i++) {
const x = (i / wavetable.length) * this.canvas.width;
const y = ((1 - wavetable[i]) / 2) * this.canvas.height;
this.ctx.lineTo(x, y);
}
this.ctx.strokeStyle = '#4caf50';
this.ctx.stroke();
}
drawEnvelope(attack, decay, sustain, release) {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.beginPath();
this.ctx.moveTo(0, this.canvas.height);
const totalTime = attack + decay + release;
const sustainLevel = 1 - sustain;
const attackX = (attack / totalTime) * this.canvas.width;
const decayX = ((attack + decay) / totalTime) * this.canvas.width;
const releaseX = this.canvas.width;
this.ctx.lineTo(attackX, 0);
this.ctx.lineTo(decayX, sustainLevel * this.canvas.height);
this.ctx.lineTo(releaseX - (release / totalTime) * this.canvas.width, sustainLevel * this.canvas.height);
this.ctx.lineTo(releaseX, this.canvas.height);
this.ctx.strokeStyle = '#2196f3';
this.ctx.stroke();
}
}
class COSMOSCILLATOR {
constructor(audioContext) {
// ... (previous constructor code)
this.oscillatorVisualizers = [];
this.envelopeVisualizer = null;
}
// ... (previous methods)
createVisualizers() {
this.oscillators.forEach((osc, index) => {
const canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 100;
document.getElementById(`oscillator-${index}`).appendChild(canvas);
this.oscillatorVisualizers.push(new Visualizer(canvas, 'oscillator'));
});
const envelopeCanvas = document.createElement('canvas');
envelopeCanvas.width = 200;
envelopeCanvas.height = 100;
document.querySelector('.envelope-section').appendChild(envelopeCanvas);
this.envelopeVisualizer = new Visualizer(envelopeCanvas, 'envelope');
}
updateVisualizers() {
this.oscillators.forEach((osc, index) => {
this.oscillatorVisualizers[index].drawOscillator(this.wavetableOscillator.wavetables[osc.wavetableIndex]);
});
this.envelopeVisualizer.drawEnvelope(
this.envelope.attack,
this.envelope.decay,
this.envelope.sustain,
this.envelope.release
);
}
// ... (rest of the COSMOSCILLATOR class implementation)
}
// Update main.js to include visualizer creation and updates
document.addEventListener('DOMContentLoaded', () => {
// ... (previous code)
cosmoscillator.createVisualizers();
function updateUI() {
// ... (previous updateUI code)
cosmoscillator.updateVisualizers();
}
// Update visualizers when parameters change
sliders.forEach(slider => {
slider.addEventListener('input', () => {
// ... (previous slider input code)
updateUI();
});
});
// ... (rest of the main.js code)
});
11. Implement a simple effects rack
// Add to COSMOSCILLATOR.js
class Effect {
constructor(audioContext) {
this.audioContext = audioContext;
this.input = this.audioContext.createGain();
this.output = this.audioContext.createGain();
this.wet = this.audioContext.createGain();
this.dry = this.audioContext.createGain();
this.input.connect(this.dry);
this.dry.connect(this.output);
this.wet.connect(this.output);
}
connectEffect(effect) {
this.input.connect(effect);
effect.connect(this.wet);
}
setWetDryMix(mix) {
this.wet.gain.setValueAtTime(mix, this.audioContext.currentTime);
this.dry.gain.setValueAtTime(1 - mix, this.audioContext.currentTime);
}
}
class Chorus extends Effect {
constructor(audioContext) {
super(audioContext);
this.delay = this.audioContext.createDelay();
this.depth = this.audioContext.createGain();
this.rate = this.audioContext.createOscillator();
this.rate.type = 'sine';
this.rate.connect(this.depth);
this.depth.connect(this.delay.delayTime);
this.connectEffect(this.delay);
this.rate.start();
}
setRate(value) {
this.rate.frequency.setValueAtTime(value, this.audioContext.currentTime);
}
setDepth(value) {
this.depth.gain.setValueAtTime(value, this.audioContext.currentTime);
}
}
class Phaser extends Effect {
constructor(audioContext) {
super(audioContext);
this.stages = 4;
this.filters = [];
for (let i = 0; i < this.stages; i++) {
const filter = this.audioContext.createBiquadFilter();
filter.type = 'allpass';
filter.frequency.value = 1000;
this.filters.push(filter);
}
this.lfo = this.audioContext.createOscillator();
this.lfoGain = this.audioContext.createGain();
this.lfo.connect(this.lfoGain);
this.lfoGain.connect(this.filters[0].frequency);
this.filters.reduce((prev, curr) => {
prev.connect(curr);
return curr;
});
this.connectEffect(this.filters[0]);
this.lfo.start();
}
setRate(value) {
this.lfo.frequency.setValueAtTime(value, this.audioContext.currentTime);
}
setDepth(value) {
this.lfoGain.gain.setValueAtTime(value * 500, this.audioContext.currentTime);
}
}
class COSMOSCILLATOR {
constructor(audioContext) {
// ... (previous constructor code)
this.effectsRack = {
chorus: new Chorus(this.audioContext),
phaser: new Phaser(this.audioContext)
};
// Connect effects rack
this.masterGain.connect(this.effectsRack.chorus.input);
this.effectsRack.chorus.output.connect(this.effectsRack.phaser.input);
this.effectsRack.phaser.output.connect(this.audioContext.destination);
}
// ... (previous methods)
updateEffectParameter(effect, parameter, value) {
switch (effect) {
case 'chorus':
if (parameter === 'rate') {
this.effectsRack.chorus.setRate(value);
} else if (parameter === 'depth') {
this.effectsRack.chorus.setDepth(value);
} else if (parameter === 'mix') {
this.effectsRack.chorus.setWetDryMix(value);
}
break;
case 'phaser':
if (parameter === 'rate') {
this.effectsRack.phaser.setRate(value);
} else if (parameter === 'depth') {
this.effectsRack.phaser.setDepth(value);
} else if (parameter === 'mix') {
this.effectsRack.phaser.setWetDryMix(value);
}
break;
}
}
// ... (rest of the COSMOSCILLATOR class implementation)
}
// Update main.js to include effects rack UI
document.addEventListener('DOMContentLoaded', () => {
// ... (previous code)
// Add effects rack UI
const effectsRackSection = document.createElement('div');
effectsRackSection.className = 'effects-rack-section';
effectsRackSection.innerHTML = `
Effects Rack
`;
document.getElementById('cosmoscillator-container').appendChild(effectsRackSection);
// Add event listeners for effects rack controls
const effectsControls = document.querySelectorAll('.effects-rack-section input[type="range"]');
effectsControls.forEach(control => {
control.addEventListener('input', (e) => {
const [effect, parameter] = e.target.id.split('-');
const value = parseFloat(e.target.value);
cosmoscillator.updateEffectParameter(effect, parameter, value);
updateSliderValue(e.target.id, value);
});
});
// ... (rest of the main.js code)
});
12. Implement MIDI output functionality
// Add to COSMOSCILLATOR.js
class MIDIOutput {
constructor() {
this.midiAccess = null;
this.midiOutput = null;
}
async initialize() {
try {
this.midiAccess = await navigator.requestMIDIAccess({ sysex: false });
this.setupMIDIOutput();
console.log('MIDI output access granted');
} catch (error) {
console.error('Failed to get MIDI output access:', error);
}
}
setupMIDIOutput() {
const outputs = this.midiAccess.outputs.values();
this.midiOutput = outputs.next().value;
if (this.midiOutput) {
console.log('MIDI output device selected:', this.midiOutput.name);
} else {
console.warn('No MIDI output devices found');
}
}
sendNoteOn(note, velocity = 64, channel = 0) {
if (this.midiOutput) {
this.midiOutput.send([0x90 + channel, note, velocity]);
}
}
sendNoteOff(note, velocity = 64, channel = 0) {
if (this.midiOutput) {
this.midiOutput.send([0x80 + channel, note, velocity]);
}
}
sendControlChange(controller, value, channel = 0) {
if (this.midiOutput) {
this.midiOutput.send([0xB0 + channel, controller, value]);
}
}
}
class COSMOSCILLATOR {
constructor(audioContext) {
// ... (previous constructor code)
this.midiOutput = new MIDIOutput();
this.midiOutput.initialize();
}
// ... (previous methods)
noteOn(note, velocity = 64) {
// ... (previous noteOn code)
this.midiOutput.sendNoteOn(note, velocity);
}
noteOff(note) {
// ... (previous noteOff code)
this.midiOutput.sendNoteOff(note);
}
updateParameter(parameterId, value) {
// ... (previous updateParameter code)
// Map parameter changes to MIDI CC messages
let ccNumber;
switch (parameterId) {
case 'filter-cutoff':
ccNumber = 74; // MIDI CC for filter cutoff
break;
case 'filter-resonance':
ccNumber = 71; // MIDI CC for filter resonance
break;
case 'master-volume':
ccNumber = 7; // MIDI CC for volume
break;
// Add more mappings as needed
}
if (ccNumber !== undefined) {
const midiValue = Math.round(value * 127); // Scale value to 0-127 range
this.midiOutput.sendControlChange(ccNumber, midiValue);
}
}
// ... (rest of the COSMOSCILLATOR class implementation)
}
// Update main.js to include MIDI output device selection
document.addEventListener('DOMContentLoaded', () => {
// ... (previous code)
// Add MIDI output device selection UI
const midiOutputSection = document.createElement('div');
midiOutputSection.className = 'midi-output-section';
midiOutputSection.innerHTML = `
MIDI Output
Select MIDI Output
`;
document.getElementById('cosmoscillator-container').appendChild(midiOutputSection);
const midiOutputSelect = document.getElementById('midi-output-select');
// Populate MIDI output device list
function populateMIDIOutputs() {
if (cosmoscillator.midiOutput.midiAccess) {
midiOutputSelect.innerHTML = '
Select MIDI Output ';
for (let output of cosmoscillator.midiOutput.midiAccess.outputs.values()) {
const option = document.createElement('option');
option.value = output.id;
option.textContent = output.name;
midiOutputSelect.appendChild(option);
}
}
}
// Update MIDI output device when selection changes
midiOutputSelect.addEventListener('change', (e) => {
const selectedOutputId = e.target.value;
if (selectedOutputId) {
const selectedOutput = cosmoscillator.midiOutput.midiAccess.outputs.get(selectedOutputId);
cosmoscillator.midiOutput.midiOutput = selectedOutput;
console.log('MIDI output device changed to:', selectedOutput.name);
} else {
cosmoscillator.midiOutput.midiOutput = null;
console.log('MIDI output disabled');
}
});
// Initialize MIDI output device list
cosmoscillator.midiOutput.initialize().then(() => {
populateMIDIOutputs();
});
// ... (rest of the main.js code)
});
These implementations add visualizations for oscillators and envelopes, a simple effects rack with chorus and phaser effects, and MIDI output functionality to the COSMOSCILLATOR synth. The visualizations provide visual feedback for the oscillator waveforms and envelope shapes. The effects rack allows users to add chorus and phaser effects to the synth's output. The MIDI output functionality enables the synth to send MIDI messages to external devices or software.
Make sure to test these new features thoroughly and adjust the UI as needed to fit your design preferences. You may want to consider adding more effects to the rack or expanding the MIDI output capabilities to include more advanced features like MIDI clock synchronization or SysEx messages.
13. Implement a simple FM (Frequency Modulation) synthesis mode
// Add to COSMOSCILLATOR.js
class FMOscillator {
constructor(audioContext) {
this.audioContext = audioContext;
this.carrier = audioContext.createOscillator();
this.modulator = audioContext.createOscillator();
this.modulatorGain = audioContext.createGain();
this.output = audioContext.createGain();
this.carrier.connect(this.output);
this.modulator.connect(this.modulatorGain);
this.modulatorGain.connect(this.carrier.frequency);
this.carrier.start();
this.modulator.start();
}
setCarrierFrequency(frequency) {
this.carrier.frequency.setValueAtTime(frequency, this.audioContext.currentTime);
}
setModulatorFrequency(frequency) {
this.modulator.frequency.setValueAtTime(frequency, this.audioContext.currentTime);
}
setModulationIndex(index) {
this.modulatorGain.gain.setValueAtTime(index, this.audioContext.currentTime);
}
connect(destination) {
this.output.connect(destination);
}
disconnect() {
this.output.disconnect();
}
}
class COSMOSCILLATOR {
constructor(audioContext) {
// ... (previous constructor code)
this.fmOscillator = new FMOscillator(this.audioContext);
this.fmOscillator.connect(this.filter);
this.synthesisMode = 'subtractive'; // 'subtractive' or 'fm'
}
// ... (previous methods)
setSynthesisMode(mode) {
this.synthesisMode = mode;
if (mode === 'subtractive') {
this.fmOscillator.disconnect();
this.oscillators.forEach(osc => osc.connect(this.filter));
} else if (mode === 'fm') {
this.oscillators.forEach(osc => osc.disconnect());
this.fmOscillator.connect(this.filter);
}
}
noteOn(note, velocity = 64) {
const frequency = 440 * Math.pow(2, (note - 69) / 12);
if (this.synthesisMode === 'subtractive') {
// ... (previous subtractive synthesis noteOn code)
} else if (this.synthesisMode === 'fm') {
this.fmOscillator.setCarrierFrequency(frequency);
this.envelope.trigger();
}
this.midiOutput.sendNoteOn(note, velocity);
}
noteOff(note) {
if (this.synthesisMode === 'subtractive') {
// ... (previous subtractive synthesis noteOff code)
} else if (this.synthesisMode === 'fm') {
this.envelope.release();
}
this.midiOutput.sendNoteOff(note);
}
updateFMParameters(carrierFreq, modulatorFreq, modulationIndex) {
this.fmOscillator.setCarrierFrequency(carrierFreq);
this.fmOscillator.setModulatorFrequency(modulatorFreq);
this.fmOscillator.setModulationIndex(modulationIndex);
}
// ... (rest of the COSMOSCILLATOR class implementation)
}
// Update main.js to include FM synthesis mode UI
document.addEventListener('DOMContentLoaded', () => {
// ... (previous code)
// Add FM synthesis mode UI
const fmSynthesisSection = document.createElement('div');
fmSynthesisSection.className = 'fm-synthesis-section';
fmSynthesisSection.innerHTML = `
Synthesis Mode
Subtractive
FM
`;
document.getElementById('cosmoscillator-container').appendChild(fmSynthesisSection);
const synthesisModeSelect = document.getElementById('synthesis-mode');
const fmParametersDiv = document.getElementById('fm-parameters');
const fmCarrierFreqSlider = document.getElementById('fm-carrier-freq');
const fmModulatorFreqSlider = document.getElementById('fm-modulator-freq');
const fmModulationIndexSlider = document.getElementById('fm-modulation-index');
synthesisModeSelect.addEventListener('change', (e) => {
const mode = e.target.value;
cosmoscillator.setSynthesisMode(mode);
fmParametersDiv.style.display = mode === 'fm' ? 'block' : 'none';
});
function updateFMParameters() {
const carrierFreq = parseFloat(fmCarrierFreqSlider.value);
const modulatorFreq = parseFloat(fmModulatorFreqSlider.value);
const modulationIndex = parseFloat(fmModulationIndexSlider.value);
cosmoscillator.updateFMParameters(carrierFreq, modulatorFreq, modulationIndex);
updateSliderValue('fm-carrier-freq', carrierFreq);
updateSliderValue('fm-modulator-freq', modulatorFreq);
updateSliderValue('fm-modulation-index', modulationIndex);
}
fmCarrierFreqSlider.addEventListener('input', updateFMParameters);
fmModulatorFreqSlider.addEventListener('input', updateFMParameters);
fmModulationIndexSlider.addEventListener('input', updateFMParameters);
// ... (rest of the main.js code)
});
14. Implement a simple granular synthesis mode
// Add to COSMOSCILLATOR.js
class GranularSynthesizer {
constructor(audioContext) {
this.audioContext = audioContext;
this.grainSize = 0.1; // in seconds
this.grainSpacing = 0.05; // in seconds
this.buffer = null;
this.playing = false;
this.output = audioContext.createGain();
}
async loadSample(url) {
const response = await fetch(url);
const arrayBuffer = await response.arrayBuffer();
this.buffer = await this.audioContext.decodeAudioData(arrayBuffer);
}
start() {
if (!this.buffer) return;
this.playing = true;
this.scheduleGrain();
}
stop() {
this.playing = false;
}
scheduleGrain() {
if (!this.playing) return;
const source = this.audioContext.createBufferSource();
source.buffer = this.buffer;
const startPosition = Math.random() * (this.buffer.duration - this.grainSize);
const endPosition = startPosition + this.grainSize;
const envelope = this.audioContext.createGain();
envelope.gain.setValueAtTime(0, this.audioContext.currentTime);
envelope.gain.linearRampToValueAtTime(1, this.audioContext.currentTime + this.grainSize * 0.1);
envelope.gain.linearRampToValueAtTime(0, this.audioContext.currentTime + this.grainSize);
source.connect(envelope);
envelope.connect(this.output);
source.start(this.audioContext.currentTime, startPosition, this.grainSize);
setTimeout(() => this.scheduleGrain(), this.grainSpacing * 1000);
}
setGrainSize(size) {
this.grainSize = size;
}
setGrainSpacing(spacing) {
this.grainSpacing = spacing;
}
connect(destination) {
this.output.connect(destination);
}
disconnect() {
this.output.disconnect();
}
}
class COSMOSCILLATOR {
constructor(audioContext) {
// ... (previous constructor code)
this.granularSynthesizer = new GranularSynthesizer(this.audioContext);
this.granularSynthesizer.connect(this.filter);
this.synthesisMode = 'subtractive'; // 'subtractive', 'fm', or 'granular'
}
// ... (previous methods)
setSynthesisMode(mode) {
this.synthesisMode = mode;
if (mode === 'subtractive') {
this.fmOscillator.disconnect();
this.granularSynthesizer.disconnect();
this.oscillators.forEach(osc => osc.connect(this.filter));
} else if (mode === 'fm') {
this.oscillators.forEach(osc => osc.disconnect());
this.granularSynthesizer.disconnect();
this.fmOscillator.connect(this.filter);
} else if (mode === 'granular') {
this.oscillators.forEach(osc => osc.disconnect());
this.fmOscillator.disconnect();
this.granularSynthesizer.connect(this.filter);
}
}
noteOn(note, velocity = 64) {
if (this.synthesisMode === 'subtractive' || this.synthesisMode === 'fm') {
// ... (previous subtractive and FM synthesis noteOn code)
} else if (this.synthesisMode === 'granular') {
this.granularSynthesizer.start();
this.envelope.trigger();
}
this.midiOutput.sendNoteOn(note, velocity);
}
noteOff(note) {
if (this.synthesisMode === 'subtractive' || this.synthesisMode === 'fm') {
// ... (previous subtractive and FM synthesis noteOff code)
} else if (this.synthesisMode === 'granular') {
this.granularSynthesizer.stop();
this.envelope.release();
}
this.midiOutput.sendNoteOff(note);
}
updateGranularParameters(grainSize, grainSpacing) {
this.granularSynthesizer.setGrainSize(grainSize);
this.granularSynthesizer.setGrainSpacing(grainSpacing);
}
// ... (rest of the COSMOSCILLATOR class implementation)
}
// Update main.js to include granular synthesis mode UI
document.addEventListener('DOMContentLoaded', () => {
// ... (previous code)
// Update synthesis mode select options
document.getElementById('synthesis-mode').innerHTML = `
Subtractive
FM
Granular
`;
// Add granular synthesis UI
const granularSynthesisSection = document.createElement('div');
granularSynthesisSection.className = 'granular-synthesis-section';
granularSynthesisSection.innerHTML = `
`;
document.getElementById('cosmoscillator-container').appendChild(granularSynthesisSection);
const granularParametersDiv = document.getElementById('granular-parameters');
const granularGrainSizeSlider = document.getElementById('granular-grain-size');
const granularGrainSpacingSlider = document.getElementById('granular-grain-spacing');
const granularSampleUpload = document.getElementById('granular-sample-upload');
const granularSampleLoadButton = document.getElementById('granular-sample-load');
synthesisModeSelect.addEventListener('change', (e) => {
constmode = e.target.value;
cosmoscillator.setSynthesisMode(mode);
fmParametersDiv.style.display = mode === 'fm' ? 'block' : 'none';
granularParametersDiv.style.display = mode === 'granular' ? 'block' : 'none';
});
function updateGranularParameters() {
const grainSize = parseFloat(granularGrainSizeSlider.value);
const grainSpacing = parseFloat(granularGrainSpacingSlider.value);
cosmoscillator.updateGranularParameters(grainSize, grainSpacing);
updateSliderValue('granular-grain-size', grainSize);
updateSliderValue('granular-grain-spacing', grainSpacing);
}
granularGrainSizeSlider.addEventListener('input', updateGranularParameters);
granularGrainSpacingSlider.addEventListener('input', updateGranularParameters);
granularSampleLoadButton.addEventListener('click', async () => {
const file = granularSampleUpload.files[0];
if (file) {
const reader = new FileReader();
reader.onload = async (e) => {
const arrayBuffer = e.target.result;
await cosmoscillator.granularSynthesizer.loadSample(arrayBuffer);
console.log('Sample loaded for granular synthesis');
};
reader.readAsArrayBuffer(file);
}
});
// ... (rest of the main.js code)
});
15. Implement a simple additive synthesis mode
// Add to COSMOSCILLATOR.js
class AdditiveSynthesizer {
constructor(audioContext, numHarmonics = 16) {
this.audioContext = audioContext;
this.numHarmonics = numHarmonics;
this.oscillators = [];
this.gainNodes = [];
this.output = audioContext.createGain();
for (let i = 0; i < numHarmonics; i++) {
const osc = audioContext.createOscillator();
const gain = audioContext.createGain();
osc.connect(gain);
gain.connect(this.output);
this.oscillators.push(osc);
this.gainNodes.push(gain);
osc.start();
}
}
setFrequency(frequency) {
this.oscillators.forEach((osc, index) => {
osc.frequency.setValueAtTime(frequency * (index + 1), this.audioContext.currentTime);
});
}
setHarmonicGain(harmonicIndex, gain) {
if (harmonicIndex >= 0 && harmonicIndex < this.numHarmonics) {
this.gainNodes[harmonicIndex].gain.setValueAtTime(gain, this.audioContext.currentTime);
}
}
connect(destination) {
this.output.connect(destination);
}
disconnect() {
this.output.disconnect();
}
}
class COSMOSCILLATOR {
constructor(audioContext) {
// ... (previous constructor code)
this.additiveSynthesizer = new AdditiveSynthesizer(this.audioContext);
this.additiveSynthesizer.connect(this.filter);
this.synthesisMode = 'subtractive'; // 'subtractive', 'fm', 'granular', or 'additive'
}
// ... (previous methods)
setSynthesisMode(mode) {
this.synthesisMode = mode;
this.oscillators.forEach(osc => osc.disconnect());
this.fmOscillator.disconnect();
this.granularSynthesizer.disconnect();
this.additiveSynthesizer.disconnect();
switch (mode) {
case 'subtractive':
this.oscillators.forEach(osc => osc.connect(this.filter));
break;
case 'fm':
this.fmOscillator.connect(this.filter);
break;
case 'granular':
this.granularSynthesizer.connect(this.filter);
break;
case 'additive':
this.additiveSynthesizer.connect(this.filter);
break;
}
}
noteOn(note, velocity = 64) {
const frequency = 440 * Math.pow(2, (note - 69) / 12);
switch (this.synthesisMode) {
case 'subtractive':
case 'fm':
// ... (previous subtractive and FM synthesis noteOn code)
break;
case 'granular':
this.granularSynthesizer.start();
break;
case 'additive':
this.additiveSynthesizer.setFrequency(frequency);
break;
}
this.envelope.trigger();
this.midiOutput.sendNoteOn(note, velocity);
}
noteOff(note) {
switch (this.synthesisMode) {
case 'subtractive':
case 'fm':
// ... (previous subtractive and FM synthesis noteOff code)
break;
case 'granular':
this.granularSynthesizer.stop();
break;
case 'additive':
// No specific note-off behavior for additive synthesis
break;
}
this.envelope.release();
this.midiOutput.sendNoteOff(note);
}
updateAdditiveParameters(harmonicGains) {
harmonicGains.forEach((gain, index) => {
this.additiveSynthesizer.setHarmonicGain(index, gain);
});
}
// ... (rest of the COSMOSCILLATOR class implementation)
}
// Update main.js to include additive synthesis mode UI
document.addEventListener('DOMContentLoaded', () => {
// ... (previous code)
// Update synthesis mode select options
document.getElementById('synthesis-mode').innerHTML = `
Subtractive
FM
Granular
Additive
`;
// Add additive synthesis UI
const additiveSynthesisSection = document.createElement('div');
additiveSynthesisSection.className = 'additive-synthesis-section';
additiveSynthesisSection.innerHTML = `
`;
document.getElementById('cosmoscillator-container').appendChild(additiveSynthesisSection);
const additiveParametersDiv = document.getElementById('additive-parameters');
const harmonicSlidersDiv = document.getElementById('harmonic-sliders');
// Create sliders for each harmonic
for (let i = 0; i < 16; i++) {
const slider = document.createElement('input');
slider.type = 'range';
slider.min = 0;
slider.max = 1;
slider.step = 0.01;
slider.value = i === 0 ? 1 : 0; // Set fundamental to 1, others to 0
slider.id = `harmonic-${i}`;
slider.className = 'harmonic-slider';
const label = document.createElement('label');
label.htmlFor = slider.id;
label.textContent = `Harmonic ${i + 1}`;
const sliderContainer = document.createElement('div');
sliderContainer.className = 'slider-container';
sliderContainer.appendChild(label);
sliderContainer.appendChild(slider);
harmonicSlidersDiv.appendChild(sliderContainer);
}
function updateAdditiveParameters() {
const harmonicGains = Array.from(document.querySelectorAll('.harmonic-slider')).map(slider => parseFloat(slider.value));
cosmoscillator.updateAdditiveParameters(harmonicGains);
}
harmonicSlidersDiv.addEventListener('input', updateAdditiveParameters);
synthesisModeSelect.addEventListener('change', (e) => {
const mode = e.target.value;
cosmoscillator.setSynthesisMode(mode);
fmParametersDiv.style.display = mode === 'fm' ? 'block' : 'none';
granularParametersDiv.style.display = mode === 'granular' ? 'block' : 'none';
additiveParametersDiv.style.display = mode === 'additive' ? 'block' : 'none';
});
// ... (rest of the main.js code)
});
These implementations add FM synthesis, granular synthesis, and additive synthesis modes to the COSMOSCILLATOR synth. Each mode offers unique sound design possibilities:
1. FM Synthesis: Allows for complex timbres through frequency modulation.
2. Granular Synthesis: Enables creation of textures and evolving sounds from audio samples.
3. Additive Synthesis: Provides precise control over individual harmonics for building complex tones.
The UI has been updated to include controls for each synthesis mode, allowing users to switch between modes and adjust relevant parameters. Make sure to test these new features thoroughly and adjust the UI as needed to fit your design preferences.
Consider adding visualizations for each synthesis mode to help users understand the sound generation process. You may also want to explore ways to combine these synthesis techniques for even more diverse sound design possibilities.