(null);
43 |
44 | useEffect(() => {
45 | if (!canvasRef.current) return;
46 |
47 | const canvasEl = canvasRef.current;
48 |
49 | if (!tokenRef.current) {
50 | const context = canvasEl.getContext("webgl");
51 | if (!context) throw Error("WebGL not supported");
52 | tokenRef.current = new Token({
53 | gl: context,
54 | sideLength,
55 | });
56 | }
57 |
58 | const inputCallback = (e: MouseEvent | TouchEvent): void => {
59 | mouseInputEnabled = e.type === "mousedown" ? true : mouseInputEnabled;
60 | if (e instanceof window.MouseEvent && !mouseInputEnabled) return;
61 | const currentXYRatios = eventRatiosAndCoords(e);
62 | dispatch(
63 | controlPadSlice.actions.setCurrentCoordinateRatios({
64 | x: currentXYRatios.xRatio,
65 | y: currentXYRatios.yRatio,
66 | }),
67 | );
68 | tokenRef.current?.handleInput(currentXYRatios);
69 | };
70 |
71 | const inputEndCallback = () => {
72 | mouseInputEnabled = false;
73 | dispatch(controlPadSlice.actions.setCurrentCoordinateRatios(undefined));
74 | tokenRef.current?.handleInputEnd();
75 | };
76 |
77 | canvasEl.addEventListener("touchstart", inputCallback, { passive: false });
78 | canvasEl.addEventListener("touchmove", inputCallback, { passive: false });
79 | canvasEl.addEventListener("mousedown", inputCallback, { passive: false });
80 | canvasEl.addEventListener("mousemove", inputCallback, { passive: false });
81 | canvasEl.addEventListener("touchend", inputEndCallback, { passive: false });
82 | canvasEl.addEventListener("mouseup", inputEndCallback, { passive: false });
83 |
84 | canvasEl.oncontextmenu = (e) => e.preventDefault();
85 |
86 | return () => {
87 | canvasEl.removeEventListener("touchstart", inputCallback);
88 | canvasEl.removeEventListener("touchmove", inputCallback);
89 | canvasEl.removeEventListener("mousedown", inputCallback);
90 | canvasEl.removeEventListener("mousemove", inputCallback);
91 | canvasEl.removeEventListener("touchend", inputEndCallback);
92 | canvasEl.removeEventListener("mouseup", inputEndCallback);
93 | canvasEl.oncontextmenu = null;
94 | };
95 | }, []);
96 |
97 | useEffect(() => {
98 | tokenRef.current?.handleResize(sideLength);
99 | }, [sideLength]);
100 |
101 | return (
102 |
103 | {!hasBeenTouched && (
104 |
TOUCH / CLICK TO PLAY
105 | )}
106 |
112 |
9 |
About
10 |
11 | Andromeda is a pluggable digital audio workstation built on open web
12 | technologies.
13 |
14 |
15 | All the code is open source and hosted on{" "}
16 |
17 | GitHub
18 |
19 | .
20 |
21 |
22 | If you would like to report a bug or request a feature you can raise an
23 | issue{" "}
24 |
25 | here
26 |
27 | .
28 |
29 |
Contributions, feedback and suggestions are all very welcome!
30 |
21 |
22 |
Ariadne
23 |
24 |
29 | dispatch(
30 | ariadneSlice.actions.masterGainSet(
31 | Number(e.currentTarget.value),
32 | ),
33 | )
34 | }
35 | />
36 |
41 | dispatch(
42 | ariadneSlice.actions.masterPanSet(
43 | Number(e.currentTarget.value),
44 | ),
45 | )
46 | }
47 | />
48 |
64 |
80 |
86 | dispatch(
87 | ariadneSlice.actions.carrierDetuneSet(
88 | Number(e.currentTarget.value),
89 | ),
90 | )
91 | }
92 | />
93 |
99 | dispatch(
100 | ariadneSlice.actions.modulatorRatioSet(
101 | Number(e.currentTarget.value),
102 | ),
103 | )
104 | }
105 | />
106 |
112 | dispatch(
113 | ariadneSlice.actions.modulatorDetuneSet(
114 | Number(e.currentTarget.value),
115 | ),
116 | )
117 | }
118 | />
119 |
120 |
121 |
navigate(-1)}>OK
122 |
15 |
16 |
17 |
18 |
19 | Options
20 |
21 |
28 |
Control Pad Settings
29 |
{
32 | const { value } = e.currentTarget;
33 | if (value !== "Ariadne" && value !== "Prometheus")
34 | throw Error("Invalid instrument");
35 | dispatch(controlPadSlice.actions.instrumentSet(value));
36 | }}
37 | label="Instrument"
38 | />
39 |
43 | dispatch(
44 | controlPadSlice.actions.octaveSet(Number(e.currentTarget.value)),
45 | )
46 | }
47 | output={octave}
48 | value={octave}
49 | >
50 | Octave
51 |
52 |
56 | dispatch(
57 | controlPadSlice.actions.rangeSet(Number(e.currentTarget.value)),
58 | )
59 | }
60 | output={range}
61 | value={range}
62 | >
63 | Range
64 |
65 |
68 | dispatch(controlPadSlice.actions.noScaleSet(e.currentTarget.checked))
69 | }
70 | >
71 | No Scale
72 |
73 |
77 | dispatch(
78 | controlPadSlice.actions.rootNoteSet(Number(e.currentTarget.value)),
79 | )
80 | }
81 | output={noteNameFromPitch(rootNote)}
82 | value={rootNote}
83 | >
84 | Root Note
85 |
86 | {
89 | const { value } = e.currentTarget;
90 | if (!isScaleName(value)) throw Error("Invalid scale");
91 | dispatch(controlPadSlice.actions.selectedScaleSet(value));
92 | }}
93 | label="Scale"
94 | options={Object.keys(SCALES).map((value) => ({
95 | text: capitalizeWords(value),
96 | value,
97 | }))}
98 | />
99 |
100 |
101 | OK
102 |
103 |
18 |
Keyboard Settings
19 |
{
22 | if (
23 | e.currentTarget.value !== "Ariadne" &&
24 | e.currentTarget.value !== "Prometheus"
25 | )
26 | throw Error("Invalid instrument");
27 | dispatch(keyboardSlice.actions.instrumentSet(e.currentTarget.value));
28 | }}
29 | label="Instrument"
30 | />
31 |
35 | dispatch(
36 | keyboardSlice.actions.volumeSet(Number(e.currentTarget.value)),
37 | )
38 | }
39 | output={Math.round(volume * 100)}
40 | step={0.01}
41 | value={volume}
42 | >
43 | Volume
44 |
45 |
49 | dispatch(
50 | keyboardSlice.actions.octaveSet(Number(e.currentTarget.value)),
51 | )
52 | }
53 | output={octave}
54 | value={octave}
55 | >
56 | Octave
57 |
58 |
61 | dispatch(keyboardSlice.actions.monophonicSet(e.target.checked))
62 | }
63 | >
64 | Monophonic
65 |
66 |
67 |
68 | OK
69 |
70 |
11 |
12 |
17 | dispatch(
18 | prometheusSlice.actions.masterGainSet(
19 | Number(e.currentTarget.value),
20 | ),
21 | )
22 | }
23 | />
24 |
29 | dispatch(
30 | prometheusSlice.actions.masterPanSet(
31 | Number(e.currentTarget.value),
32 | ),
33 | )
34 | }
35 | />
36 |
37 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/src/components/pages/PrometheusSettings/ModuleOscSingle.tsx:
--------------------------------------------------------------------------------
1 | import { useDispatch } from "react-redux";
2 | import ControlModule, { Range } from "../../organisms/ControlModule";
3 | import prometheusSlice from "../../../store/prometheusSlice";
4 | import SelectOscType from "../../shared/SelectOscType";
5 |
6 | interface Props {
7 | detune: number;
8 | gain: number;
9 | id: number;
10 | pan: number;
11 | pitch: number;
12 | type: OscillatorType;
13 | }
14 |
15 | export default function ModuleOscSingle({
16 | detune,
17 | gain,
18 | id,
19 | pan,
20 | pitch,
21 | type,
22 | }: Props) {
23 | const dispatch = useDispatch();
24 |
25 | return (
26 |
27 |
30 | dispatch(
31 | prometheusSlice.actions.oscillatorSinglesPatch({
32 | id,
33 | type: e.target.value as OscillatorType,
34 | }),
35 | )
36 | }
37 | />
38 |
43 | dispatch(
44 | prometheusSlice.actions.oscillatorSinglesPatch({
45 | id,
46 | gain: Number(e.target.value),
47 | }),
48 | )
49 | }
50 | />
51 |
56 | dispatch(
57 | prometheusSlice.actions.oscillatorSinglesPatch({
58 | id,
59 | pan: Number(e.currentTarget.value),
60 | }),
61 | )
62 | }
63 | />
64 |
71 | dispatch(
72 | prometheusSlice.actions.oscillatorSinglesPatch({
73 | id,
74 | pitch: Number(e.currentTarget.value),
75 | }),
76 | )
77 | }
78 | step={1}
79 | />
80 |
87 | dispatch(
88 | prometheusSlice.actions.oscillatorSinglesPatch({
89 | id,
90 | detune: Number(e.currentTarget.value),
91 | }),
92 | )
93 | }
94 | />
95 |
96 | );
97 | }
98 |
--------------------------------------------------------------------------------
/src/components/pages/PrometheusSettings/ModuleOscSuper.tsx:
--------------------------------------------------------------------------------
1 | import { useDispatch } from "react-redux";
2 | import ControlModule, { Range, Select } from "../../organisms/ControlModule";
3 | import prometheusSlice from "../../../store/prometheusSlice";
4 |
5 | const SelectOscType = ({
6 | defaultValue,
7 | onChange,
8 | }: {
9 | defaultValue: string;
10 | onChange: (e: React.ChangeEvent) => void;
11 | }) => (
12 |
19 | );
20 |
21 | interface Props {
22 | detune: number;
23 | gain: number;
24 | id: number;
25 | numberOfOscillators: number;
26 | pan: number;
27 | pitch: number;
28 | spread: number;
29 | type: string;
30 | }
31 |
32 | export default function ModuleOscSuper({
33 | detune,
34 | gain,
35 | id,
36 | numberOfOscillators,
37 | pan,
38 | pitch,
39 | spread,
40 | type,
41 | }: Props) {
42 | const dispatch = useDispatch();
43 |
44 | return (
45 |
46 |
49 | dispatch(
50 | prometheusSlice.actions.oscillatorSupersPatch({
51 | id,
52 | type: e.target.value as OscillatorType,
53 | }),
54 | )
55 | }
56 | />
57 |
64 | dispatch(
65 | prometheusSlice.actions.oscillatorSupersPatch({
66 | id,
67 | numberOfOscillators: Number(e.currentTarget.value),
68 | }),
69 | )
70 | }
71 | step={1}
72 | />
73 |
80 | dispatch(
81 | prometheusSlice.actions.oscillatorSupersPatch({
82 | id,
83 | spread: Number(e.currentTarget.value),
84 | }),
85 | )
86 | }
87 | />
88 |
93 | dispatch(
94 | prometheusSlice.actions.oscillatorSupersPatch({
95 | id,
96 | gain: Number(e.target.value),
97 | }),
98 | )
99 | }
100 | />
101 |
106 | dispatch(
107 | prometheusSlice.actions.oscillatorSupersPatch({
108 | id,
109 | pan: Number(e.currentTarget.value),
110 | }),
111 | )
112 | }
113 | />
114 |
121 | dispatch(
122 | prometheusSlice.actions.oscillatorSupersPatch({
123 | id,
124 | pitch: Number(e.currentTarget.value),
125 | }),
126 | )
127 | }
128 | step={1}
129 | />
130 |
137 | dispatch(
138 | prometheusSlice.actions.oscillatorSupersPatch({
139 | id,
140 | detune: Number(e.currentTarget.value),
141 | }),
142 | )
143 | }
144 | />
145 |
146 | );
147 | }
148 |
--------------------------------------------------------------------------------
/src/components/pages/PrometheusSettings/index.tsx:
--------------------------------------------------------------------------------
1 | import { useSelector } from "react-redux";
2 | import { useNavigate } from "react-router-dom";
3 | import ButtonPrimary from "../../atoms/ButtonPrimary";
4 | import ModuleMaster from "./ModuleMaster";
5 | import ModuleFilter from "./ModuleFilter";
6 | import ModuleLfo from "./ModuleLfo";
7 | import ModuleOscSuper from "./ModuleOscSuper";
8 | import ModuleOscSingle from "./ModuleOscSingle";
9 | import prometheusSlice from "../../../store/prometheusSlice";
10 |
11 | export default function PrometheusSettings() {
12 | const navigate = useNavigate();
13 |
14 | const oscillatorSingles = useSelector(
15 | prometheusSlice.selectors.oscillatorSingles,
16 | );
17 | const oscillatorSupers = useSelector(
18 | prometheusSlice.selectors.oscillatorSupers,
19 | );
20 |
21 | return (
22 | // TOOD: something about this reused classname...
23 |
24 |
25 |
PROMETHEUS
26 |
27 |
28 |
29 |
30 |
31 |
32 | {oscillatorSupers.map(
33 | ({
34 | detune,
35 | gain,
36 | id,
37 | numberOfOscillators,
38 | pan,
39 | pitch,
40 | spread,
41 | type,
42 | }) => (
43 |
54 | ),
55 | )}
56 |
57 | {oscillatorSingles.map(({ detune, gain, id, pan, pitch, type }) => (
58 |
67 | ))}
68 |
69 |
navigate(-1)}>OK
70 |
14 |
18 | dispatch(settingsSlice.actions.bpmSet(Number(e.currentTarget.value)))
19 | }
20 | value={bpm}
21 | >
22 | BPM
23 |
24 |
25 |
26 | Keyboard Settings
27 |
28 |
29 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
](https://andromeda.netlify.app)
2 |
3 | Andromeda is a pluggable digital audio workstation built on open web technologies
4 |
5 | **[Check it out here!](https://andromeda.netlify.app)**
6 |
7 | ---
8 |
9 | Built using [virtual-audio-graph](https://github.com/benji6/virtual-audio-graph)
10 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "andromeda",
3 | "description": "Make music in your browser!",
4 | "scripts": {
5 | "build": "vite build src --emptyOutDir --outDir ../dist && touch dist/robots.txt",
6 | "fmt": "prettier --ignore-unknown --write '**/*'",
7 | "start": "vite src --open",
8 | "test": "run-p test:*",
9 | "test:audit": "npm audit --audit-level=critical",
10 | "test:fmt": "prettier --check --ignore-unknown '**/*'",
11 | "test:types": "tsc --noEmit"
12 | },
13 | "repository": {
14 | "type": "git",
15 | "url": "https://github.com/benji6/andromeda.git"
16 | },
17 | "keywords": [
18 | "andromeda",
19 | "music",
20 | "synth",
21 | "web",
22 | "audio",
23 | "api"
24 | ],
25 | "author": "Ben Hall",
26 | "license": "SEE LICENSE IN /LICENSE",
27 | "bugs": {
28 | "url": "https://github.com/benji6/andromeda/issues"
29 | },
30 | "homepage": "https://github.com/benji6/andromeda",
31 | "dependencies": {
32 | "@reduxjs/toolkit": "^2.6.0",
33 | "react": "^19.0.0",
34 | "react-dom": "^19.0.0",
35 | "react-redux": "^9.2.0",
36 | "react-router-dom": "^6.29.0",
37 | "virtual-audio-graph": "^1.3.0"
38 | },
39 | "devDependencies": {
40 | "@types/react": "^19.0.10",
41 | "@types/react-dom": "^19.0.4",
42 | "npm-run-all": "^4.1.5",
43 | "prettier": "^3.5.2",
44 | "typescript": "^5.7.3",
45 | "vite": "^6.2.7"
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/assets/icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
66 |
--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
90 |
--------------------------------------------------------------------------------
/src/audioHelpers/noteNameFromPitch.ts:
--------------------------------------------------------------------------------
1 | const { floor } = Math;
2 | const alphabeticalComponents = [
3 | "A",
4 | "A#/Bb",
5 | "B",
6 | "C",
7 | "C#/Db",
8 | "D",
9 | "D#/Eb",
10 | "E",
11 | "F",
12 | "F#/Gb",
13 | "G",
14 | "G#/Ab",
15 | ] as const;
16 |
17 | const { length } = alphabeticalComponents;
18 |
19 | export default (pitch: number) => {
20 | const octave = floor(pitch / length) + 4;
21 | return (
22 | alphabeticalComponents[((pitch % length) + length) % length] +
23 | String(octave)
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/src/audioHelpers/pitchToFrequency.ts:
--------------------------------------------------------------------------------
1 | export default (pitch: number) => 440 * Math.pow(2, pitch / 12);
2 |
--------------------------------------------------------------------------------
/src/components/App.tsx:
--------------------------------------------------------------------------------
1 | import Router from "./Router";
2 | import useAudio from "./hooks/useAudio";
3 | import usePressedKeyCodes from "./hooks/usePressedKeyCodes";
4 |
5 | export default function App() {
6 | useAudio();
7 | usePressedKeyCodes();
8 | return