cvancau/alapatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add Vocoder Components

Browse Source
This commit is contained in:
[poww10s]
2020-11-20 04:02:42 -05:00
parent 05ad4c0fc0
commit 70ccfe7ee1
9 changed files with 447 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+5 -3
View File
@@ -1,13 +1,15 @@
import React from 'react'; import React from 'react';
import { Timbre } from './features/timbre/Timbre'; import Timbre from './features/timbre/Timbre';
import Vocoder from './features/timbre/Vocoder';
import './App.css'; import './App.css';
function App() { function App() {
return ( return (
<div className="App"> <div className="App">
<header className="App-header"> <header className="App-header">
<Timbre id="timbre1" /> {/*<Timbre id="timbre1" />
{/*<Timbre id="timbre2" />*/} <Timbre id="timbre2" />*/}
<Vocoder id="vocoder" />
</header> </header>
</div> </div>
); );
src/features/helpers/index.css → src/features/helpers/rcSelectTheme.css
View File
src/features/timbre/Timbre.js
+1 -1
View File
@@ -20,7 +20,7 @@ const lineBreak = {
width: '100%', width: '100%',
}; };
export function Timbre(props) { export default function Timbre(props) {
const ids = useSelector((state) => selectById(state, props.id)); const ids = useSelector((state) => selectById(state, props.id));
return ( return (
<div style={timbreStyle}> <div style={timbreStyle}>
src/features/timbre/Vocoder.js
+112 -1
View File
@@ -1,8 +1,119 @@
import React from 'react'; import React from 'react';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { selectById } from './timbreSlice'; import { selectById } from './timbreSlice';
import VCO, { AudioIn } from './parameters/VCO';
import Mixer from './parameters/Mixer';
import Pitch from './parameters/Pitch';
import EG from './parameters/EG';
import LFO from './parameters/LFO';
import { VocoderFilter, FCMod } from './parameters/Filter';
import { VocoderAmp } from './parameters/Amp';
const timbreStyle = {
display: 'flex',
flexWrap: 'wrap',
flexDirection: 'row',
justifyContent: 'center',
};
const lineBreak = {
width: '100%',
};
export default function Vocoder(props) { export default function Vocoder(props) {
const ids = useSelector((state) => selectById(state, props.id)); const ids = useSelector((state) => selectById(state, props.id));
return <div></div>; return (
<div style={timbreStyle}>
<VCO
id={ids.vco}
waveforms={[
{ value: 'Saw' },
{ value: 'Square' },
{ value: 'Triangle' },
{ value: 'Sine' },
{ value: 'Vox Wave' },
{ value: 'DWGS' },
{ value: 'Noise' },
{ value: 'Audio In' },
]}
dwgsOrModTypeName="DWGS"
dwgsOrModType={[
{ value: 'SynSine1' },
{ value: 'SynSine2' },
{ value: 'SynSine3' },
{ value: 'SynSine4' },
{ value: 'SynSine5' },
{ value: 'SynSine6' },
{ value: 'SynSine7' },
{ value: 'SynBass1' },
{ value: 'SynBass2' },
{ value: 'SynBass3' },
{ value: 'SynBass4' },
{ value: 'SynBass5' },
{ value: 'SynBass6' },
{ value: 'SynBass7' },
{ value: 'SynWave1' },
{ value: 'SynWave2' },
{ value: 'SynWave3' },
{ value: 'SynWave4' },
{ value: 'SynWave5' },
{ value: 'SynWave6' },
{ value: 'SynWave7' },
{ value: 'SynWave8' },
{ value: 'SynWave9' },
{ value: '5thWave1' },
{ value: '5thWave2' },
{ value: '5thWave3' },
{ value: 'Digi1' },
{ value: 'Digi2' },
{ value: 'Digi3' },
{ value: 'Digi4' },
{ value: 'Digi5' },
{ value: 'Digi6' },
{ value: 'Digi7' },
{ value: 'Digi8' },
{ value: 'Endless' },
{ value: 'E.Piano1' },
{ value: 'E.Piano2' },
{ value: 'E.Piano3' },
{ value: 'E.Piano4' },
{ value: 'Organ1' },
{ value: 'Organ2' },
{ value: 'Organ3' },
{ value: 'Organ4' },
{ value: 'Organ5' },
{ value: 'Organ6' },
{ value: 'Organ7' },
{ value: 'Clav1' },
{ value: 'Clav2' },
{ value: 'Guitar1' },
{ value: 'Guitar2' },
{ value: 'Guitar3' },
{ value: 'Bass1' },
{ value: 'Bass2' },
{ value: 'Bass3' },
{ value: 'Bass4' },
{ value: 'Bass5' },
{ value: 'Bell1' },
{ value: 'Bell2' },
{ value: 'Bell3' },
{ value: 'Bell4' },
{ value: 'Voice1' },
{ value: 'Voice2' },
{ value: 'Voice3' },
{ value: 'Voice4' },
]}
/>
<AudioIn id={ids.audioIn} />
<Mixer id={ids.mixer} />
<Pitch id={ids.pitch} />
<VocoderFilter id={ids.filter} />
<FCMod id={ids.fcMod} />
<div className="linebreak" style={lineBreak} />
<VocoderAmp id={ids.amp} />
<EG id={ids.eg} />
<LFO id={ids.lfo1} />
<LFO id={ids.lfo2} />
</div>
);
} }
src/features/timbre/parameters/Amp.js
+64
View File
@@ -67,3 +67,67 @@ export default function Amp(props) {
</div> </div>
); );
} }
export const VocoderAmp = (props) => {
const parameters = useSelector((state) => selectById(state, props.id));
const dispatch = useDispatch();
return (
<div className={styles.container}>
Amp Level
<Slider
parameter={parameters.ampLevel}
min={0}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { ampLevel: value },
})
)
}
/>
Direct Level
<Slider
parameter={parameters.directLevel}
min={0}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { directLevel: value },
})
)
}
/>
Amp Keyboard Tracking
<Slider
parameter={parameters.ampTrack}
min={-63}
max={63}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { ampTrack: value },
})
)
}
/>
Distortion
<Checkbox
parameter={parameters.distortion}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { distortion: value },
})
)
}
/>
</div>
);
};
src/features/timbre/parameters/Filter.js
+95
View File
@@ -87,3 +87,98 @@ export default function Filter(props) {
</div> </div>
); );
} }
export const VocoderFilter = (props) => {
const parameters = useSelector((state) => selectById(state, props.id));
const dispatch = useDispatch();
return (
<div className={styles.container}>
Cutoff
<Slider
parameter={parameters.cutoff}
min={0}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { cutoff: value },
})
)
}
/>
Resonance
<Slider
parameter={parameters.resonance}
min={0}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { resonance: value },
})
)
}
/>
EF Sense
<Slider
parameter={parameters.efSense}
min={0}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { efSense: value },
})
)
}
/>
</div>
);
};
export const FCMod = (props) => {
const parameters = useSelector((state) => selectById(state, props.id));
const dispatch = useDispatch();
return (
<div className={styles.container}>
Source
<SelectList
value={parameters.source}
list={[
{ value: 'Amp EG' },
{ value: 'LFO 1' },
{ value: 'LFO 2' },
{ value: 'Velocity' },
{ value: 'Keyboard Track' },
{ value: 'Pitch Bend' },
{ value: 'Mod Wheel' },
]}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { source: value },
})
)
}
/>
Intensity
<Slider
parameter={parameters.intensity}
min={0}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { intensity: value },
})
)
}
/>
</div>
);
};
src/features/timbre/parameters/VCO.js
+67 -3
View File
@@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import { selectById, parameterUpdated } from './parameterSlice.js'; import { selectById, parameterUpdated } from './parameterSlice.js';
import { Slider, SelectList } from '../../helpers/Helpers'; import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
import styles from './Parameters.module.css'; import styles from './Parameters.module.css';
export default function VCO(props) { export default function VCO(props) {
@@ -39,7 +39,7 @@ export default function VCO(props) {
Waveform Mod Waveform Mod
<Slider <Slider
min={0} min={0}
max={100} max={127}
parameter={parameters.waveMod} parameter={parameters.waveMod}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
@@ -53,7 +53,7 @@ export default function VCO(props) {
LFO Mod LFO Mod
<Slider <Slider
min={0} min={0}
max={100} max={127}
parameter={parameters.lfoMod} parameter={parameters.lfoMod}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
@@ -67,3 +67,67 @@ export default function VCO(props) {
</div> </div>
); );
} }
export const AudioIn = (props) => {
const parameters = useSelector((state) => selectById(state, props.id));
const dispatch = useDispatch();
return (
<div className={styles.container}>
Gate
<Slider
min={0}
max={127}
parameter={parameters.gate}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { gate: value },
})
)
}
/>
Threshold
<Slider
min={0}
max={127}
parameter={parameters.threshold}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { threshold: value },
})
)
}
/>
HPF Level
<Slider
min={0}
max={127}
parameter={parameters.hpfLevel}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { hpfLevel: value },
})
)
}
/>
HPF Gate
<Checkbox
parameter={parameters.hpfGate}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { hpfGate: value },
})
)
}
/>
</div>
);
};
src/features/timbre/parameters/parameterSlice.js
+90 -7
View File
@@ -28,6 +28,18 @@ const parametersSlice = createSlice({
'lfo3', 'lfo3',
'lfo4', 'lfo4',
'patches2', 'patches2',
'vco5',
'audioIn',
'mixer3',
'pitch3',
'filter3',
'fcMod',
'eg4',
'amp3',
'lfo5',
'lfo6',
'levels',
'pans',
], ],
entities: { entities: {
'vco1': { 'vco1': {
@@ -39,24 +51,38 @@ const parametersSlice = createSlice({
}, },
'vco2': { 'vco2': {
id: 'vco2', id: 'vco2',
waveform: 'Square', waveform: 'Saw',
dwgsOrModType: 'Off', dwgsOrModType: 'Off',
waveMod: 0, waveMod: 0,
lfoMod: 0, lfoMod: 0,
}, },
'vco3': { 'vco3': {
id: 'vco3', id: 'vco3',
waveform: 'Sine', waveform: 'Saw',
dwgsOrModType: 'SynWave1', dwgsOrModType: 'SynWave1',
waveMod: 100, waveMod: 0,
lfoMod: 0, lfoMod: 0,
}, },
'vco4': { 'vco4': {
id: 'vco4', id: 'vco4',
waveform: 'Triangle', waveform: 'Saw',
dwgsOrModType: 'Off', dwgsOrModType: 'Off',
waveMod: 0, waveMod: 0,
lfoMod: 100, lfoMod: 0,
},
'vco5': {
id: 'vco5',
waveform: 'Saw',
dwgsOrModType: 'SynWave1',
waveMod: 0,
lfoMod: 0,
},
'audioIn': {
id: 'audioIn',
gate: 0,
threshold: 0,
hpfLevel: 0,
hpfGate: false,
}, },
'mixer1': { 'mixer1': {
id: 'mixer1', id: 'mixer1',
@@ -70,6 +96,12 @@ const parametersSlice = createSlice({
vol2: 0, vol2: 0,
vol3: 0, vol3: 0,
}, },
'mixer3': {
id: 'mixer3',
vol1: 127,
vol2: 0,
vol3: 0,
},
'pitch1': { 'pitch1': {
id: 'pitch1', id: 'pitch1',
voiceAssign: 'Mono', voiceAssign: 'Mono',
@@ -92,6 +124,17 @@ const parametersSlice = createSlice({
bendRange: 0, bendRange: 0,
vibratoIntensity: 0, vibratoIntensity: 0,
}, },
'pitch3': {
id: 'pitch3',
voiceAssign: 'Mono',
triggerMode: 'Single',
transpose: 0,
tune: 0,
unisonDetune: 0,
portamento: 0,
bendRange: 0,
vibratoIntensity: 0,
},
'filter1': { 'filter1': {
id: 'filter1', id: 'filter1',
filterType: '-24db Low Pass', filterType: '-24db Low Pass',
@@ -108,6 +151,17 @@ const parametersSlice = createSlice({
egIntensity: 0, egIntensity: 0,
keyboardTrack: 0, keyboardTrack: 0,
}, },
'filter3': {
id: 'filter3',
cutoff: 0,
resonance: 0,
efSense: 0,
},
'fcMod': {
id: 'fcMod',
source: 'Amp EG',
intensity: 0,
},
'eg1': { 'eg1': {
id: 'eg1', id: 'eg1',
attack: 0, attack: 0,
@@ -129,7 +183,7 @@ const parametersSlice = createSlice({
decay: 0, decay: 0,
sustain: 127, sustain: 127,
release: 0, release: 0,
egReset: true, egReset: false,
}, },
'eg3': { 'eg3': {
id: 'eg3', id: 'eg3',
@@ -152,7 +206,22 @@ const parametersSlice = createSlice({
decay: 0, decay: 0,
sustain: 127, sustain: 127,
release: 0, release: 0,
egReset: true, egReset: false,
},
'eg5': {
id: 'eg5',
attack: 0,
decay: 0,
sustain: 127,
release: 0,
egReset: false,
},
'amp3': {
id: 'amp3',
ampLevel: 127,
directLevel: 0,
ampTrack: 0,
distortion: false,
}, },
'lfo1': { 'lfo1': {
id: 'lfo1', id: 'lfo1',
@@ -182,6 +251,20 @@ const parametersSlice = createSlice({
tempoSync: false, tempoSync: false,
frequency: 0, frequency: 0,
}, },
'lfo5': {
id: 'lfo5',
waveform: 'Saw',
keySync: 'Off',
tempoSync: false,
frequency: 0,
},
'lfo6': {
id: 'lfo6',
waveform: 'Saw',
keySync: 'Off',
tempoSync: false,
frequency: 0,
},
}, },
}), }),
reducers: { reducers: {
src/features/timbre/timbreSlice.js
+13
View File
@@ -35,6 +35,19 @@ const timbreSlice = createSlice({
lfo2: 'lfo4', lfo2: 'lfo4',
patches: 'patches2', patches: 'patches2',
}, },
'vocoder': {
id: 'vocoder',
vco: 'vco5',
audioIn: 'audioIn',
mixer: 'mixer3',
pitch: 'pitch3',
filter: 'filter3',
fcMod: 'fcMod',
eg: 'eg5',
amp: 'amp3',
lfo1: 'lfo5',
lfo2: 'lfo6',
},
}, },
}), }),
reducers: { reducers: {