├── screenshot.png
├── .gitignore
├── .netlify
└── state.json
├── postcss.config.js
├── ui
├── index.html
├── style.scss
├── components
│ ├── Header.vue
│ ├── Knob.vue
│ ├── Envelope.vue
│ ├── EnvelopeVisualizer.vue
│ └── Subjam.vue
├── index.js
└── App.vue
├── Cargo.toml
├── src
├── audio.rs
├── cv.rs
├── bus.rs
└── lib.rs
├── README.md
├── netlify.toml
├── package.json
├── webpack.config.js
└── Cargo.lock
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/txus/jam/HEAD/screenshot.png
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /target
2 | **/*.rs.bk
3 | /node_modules
4 | /dist
5 | /pkg
6 |
--------------------------------------------------------------------------------
/.netlify/state.json:
--------------------------------------------------------------------------------
1 | {
2 | "siteId": "af90537b-cd09-496a-b2b4-5c5eb8b5fd4b"
3 | }
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: [
3 | require('autoprefixer')
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/ui/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/ui/style.scss:
--------------------------------------------------------------------------------
1 | @import 'node_modules/bootstrap/scss/bootstrap';
2 | @import 'node_modules/bootstrap-vue/src/index.scss';
3 |
4 | $bluegrey: #2b3a42;
5 |
6 | pre {
7 | padding: 8px 16px;
8 | background: $bluegrey;
9 | color: #e1e6e9;
10 | font-family: Menlo, Courier, monospace;
11 | font-size: 13px;
12 | line-height: 1.5;
13 | text-shadow: 0 1px 0 rgba(23, 31, 35, 0.5);
14 | border-radius: 3px;
15 | }
--------------------------------------------------------------------------------
/Cargo.toml:
--------------------------------------------------------------------------------
1 | [package]
2 | name = "jam"
3 | version = "0.1.0"
4 | authors = ["Txus "]
5 | edition = "2018"
6 |
7 | [lib]
8 | crate-type = ["cdylib"]
9 |
10 | [dependencies]
11 | wasm-bindgen = { version = "0.2.46", features = ['serde-serialize'] }
12 | js-sys = "0.3.23"
13 |
14 | [dependencies.web-sys]
15 | version = "0.3.23"
16 | features = [
17 | 'console',
18 | 'AudioContext',
19 | 'AudioDestinationNode',
20 | 'AudioNode',
21 | 'AudioParam',
22 | 'GainNode',
23 | 'OscillatorNode',
24 | 'OscillatorType',
25 | 'BiquadFilterNode',
26 | 'BiquadFilterType',
27 | 'Window',
28 | 'Document',
29 | ]
30 |
--------------------------------------------------------------------------------
/src/audio.rs:
--------------------------------------------------------------------------------
1 | use web_sys::AudioNode;
2 |
3 | pub trait AudioInput {
4 | fn input(&self) -> AudioNode;
5 | }
6 |
7 | pub trait AudioOutput {
8 | fn output(&self) -> AudioNode;
9 | }
10 |
11 | pub trait AudioInputs {
12 | fn inputs(&self) -> Vec;
13 | }
14 |
15 | pub fn connect(from: &F, to: &T) {
16 | from.output().connect_with_audio_node(&to.input()).unwrap();
17 | }
18 |
19 | pub fn connect_to_one(from: &F, to: &T, at: usize) {
20 | let inputs = to.inputs();
21 | assert!(at < inputs.len(), "index beyond limit");
22 | from.output().connect_with_audio_node(&inputs[at]).unwrap();
23 | }
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Jam
2 |
3 | 
4 |
5 | This will be hopefully a complete, extensible and playable modular synth running in the browser.
6 |
7 | It's written in Rust (interfacing with WebAudio API), compiled to WebAssembly and run in the browser -- the UI is a Vue.js application. If you have a MIDI controller, just plug it in and the browser should recognize it (probably just Chrome)!
8 |
9 | For now I'm just playing around! Definitely not very usable.
10 |
11 | ## Running
12 |
13 | ```
14 | cargo build
15 | npm install
16 | npm run serve
17 | open localhost:8080
18 | ```
19 |
20 | Connect your MIDI controller and turn the synth power ON! :)
21 |
22 | ## Modules
23 |
24 | ### Subjam
25 |
26 | A basic polyphonic 2-oscillator synth with an amp envelope and a low pass filter.
27 |
--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | # example netlify.toml
2 | [build]
3 | command = "npm run build"
4 | functions = "functions"
5 | publish = "dist"
6 |
7 | ## Uncomment to use this redirect for Single Page Applications like create-react-app.
8 | ## Not needed for static site generators.
9 | #[[redirects]]
10 | # from = "/*"
11 | # to = "/index.html"
12 | # status = 200
13 |
14 | ## (optional) Settings for Netlify Dev
15 | ## https://github.com/netlify/netlify-dev-plugin#project-detection
16 | #[dev]
17 | # command = "yarn start" # Command to start your dev server
18 | # port = 3000 # Port that the dev server will be listening on
19 | # publish = "dist" # Folder with the static content for _redirect file
20 |
21 | ## more info on configuring this file: https://www.netlify.com/docs/netlify-toml-reference/
22 |
--------------------------------------------------------------------------------
/ui/components/Header.vue:
--------------------------------------------------------------------------------
1 |
2 |
15 |
16 |
17 |
33 |
34 |
35 |
40 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "scripts": {
3 | "build": "webpack",
4 | "serve": "webpack-dev-server"
5 | },
6 | "devDependencies": {
7 | "@babel/core": "^7.4.4",
8 | "@babel/plugin-syntax-dynamic-import": "^7.2.0",
9 | "@wasm-tool/wasm-pack-plugin": "0.2.1",
10 | "autoprefixer": "^9.5.1",
11 | "babel-loader": "^8.0.5",
12 | "css-loader": "^2.1.1",
13 | "html-webpack-plugin": "^3.2.0",
14 | "mini-css-extract-plugin": "^0.6.0",
15 | "node-sass": "^4.12.0",
16 | "postcss-loader": "^3.0.0",
17 | "sass-loader": "^7.1.0",
18 | "style-loader": "^0.23.1",
19 | "text-encoding": "^0.7.0",
20 | "vue-loader": "^15.7.0",
21 | "vue-template-compiler": "^2.6.10",
22 | "webpack": "^4.29.4",
23 | "webpack-cli": "^3.1.1",
24 | "webpack-dev-server": "^3.1.0"
25 | },
26 | "dependencies": {
27 | "bootstrap": "^4.3.1",
28 | "bootstrap-vue": "^2.0.0-rc.19",
29 | "precision-inputs": "^0.2.5",
30 | "vue": "^2.5.2"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/cv.rs:
--------------------------------------------------------------------------------
1 | use std::ops::Range;
2 | use web_sys::GainNode;
3 | use wasm_bindgen::prelude::*;
4 |
5 | pub trait Control {
6 | fn range() -> Range;
7 | fn set(&mut self, value: T);
8 | fn get(&self) -> T;
9 | fn default_value() -> T;
10 | }
11 |
12 | #[wasm_bindgen]
13 | pub struct GainControl {
14 | node: GainNode,
15 | value: f32
16 | }
17 |
18 | impl Control for GainControl {
19 | fn range() -> Range {
20 | 0.0..1.0
21 | }
22 |
23 | fn set(&mut self, value: f32) {
24 | self.value = value;
25 | }
26 |
27 | fn get(&self) -> f32 {
28 | self.value
29 | }
30 |
31 | fn default_value() -> f32 { 0.0 }
32 | }
33 |
34 |
35 | #[wasm_bindgen]
36 | #[derive(Clone, Copy)]
37 | pub struct MixControl {
38 | value: f32
39 | }
40 |
41 | impl Control for MixControl {
42 | fn range() -> Range {
43 | 0.0..1.0
44 | }
45 |
46 | fn set(&mut self, value: f32) {
47 | self.value = value;
48 | }
49 |
50 | fn get(&self) -> f32 {
51 | self.value
52 | }
53 |
54 | fn default_value() -> f32 { 0.5 }
55 | }
56 |
--------------------------------------------------------------------------------
/ui/index.js:
--------------------------------------------------------------------------------
1 | import './style.scss';
2 | import 'precision-inputs/css/precision-inputs.base.css';
3 | import 'precision-inputs/css/precision-inputs.fl-controls.css';
4 |
5 | import Vue from 'vue'
6 | import BootstrapVue from 'bootstrap-vue';
7 | import App from './App.vue'
8 |
9 | Vue.use(BootstrapVue);
10 |
11 | import('./../pkg/jam')
12 | .then(rust_module => {
13 | let vue = new Vue({
14 | el: '#app',
15 | props: ['rust'],
16 | components: { App },
17 | render: h => h(App, {props: {rust: rust_module}})
18 | });
19 |
20 | // MIDI
21 |
22 | if (navigator.requestMIDIAccess) {
23 | console.log('This browser supports WebMIDI!');
24 | } else {
25 | console.error('WebMIDI is not supported in this browser.');
26 | }
27 |
28 | let midiInputs;
29 |
30 | const onMIDIMessage = ({data}) => {
31 | let cmd = data[0] >> 4;
32 | let channel = data[0] & 0xf;
33 | let type = data[0] & 0xf0;
34 | let note = data[1];
35 | let velocity = data[2];
36 |
37 | switch (type) {
38 | case 144:
39 | vue.$children[0].noteOn(note, velocity);
40 | break;
41 | case 128:
42 | vue.$children[0].noteOff(note, velocity);
43 | break;
44 | }
45 | };
46 |
47 | navigator.requestMIDIAccess()
48 | .then(
49 | midiAccess => {
50 | midiInputs = midiAccess.inputs.values();
51 | for (var input = midiInputs.next(); input && !input.done; input = midiInputs.next()) {
52 | // each time there is a midi message call the onMIDIMessage function
53 | input.value.onmidimessage = onMIDIMessage;
54 | }
55 | },
56 | () => console.error('Could not access your MIDI devices')
57 | );
58 | })
59 | .catch(console.error);
60 |
--------------------------------------------------------------------------------
/ui/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
65 |
66 |
76 |
--------------------------------------------------------------------------------
/src/bus.rs:
--------------------------------------------------------------------------------
1 | use std::collections::HashMap;
2 | use wasm_bindgen::prelude::*;
3 |
4 | use web_sys::console;
5 |
6 | use std::rc::Rc;
7 | use std::cell::RefCell;
8 |
9 | pub struct EventBus {
10 | controls: Rc>>>,
11 | last_value: Rc>>,
12 | modulations: Rc>>>
13 | }
14 |
15 | impl EventBus {
16 | pub fn new() -> EventBus {
17 | EventBus {
18 | controls: Rc::new(RefCell::new(HashMap::new())),
19 | last_value: Rc::new(RefCell::new(HashMap::new())),
20 | modulations: Rc::new(RefCell::new(HashMap::new()))
21 | }
22 |
23 | }
24 |
25 | pub fn control(&self, id: String, initial_value: f32, on_change: Box) {
26 | let mut last_value = self.last_value.borrow_mut();
27 | last_value.insert(id.clone(), initial_value);
28 | let mut controls = self.controls.borrow_mut();
29 | if let Some(_) = controls.insert(id, on_change) {
30 | panic!("Adding control twice");
31 | }
32 | }
33 |
34 | pub fn modulate(&self, from: String, to: String) {
35 | let mut modulations = self.modulations.borrow_mut();
36 | let entries: &mut Vec = modulations.entry(from).or_insert(vec![]);
37 | entries.push(to);
38 | }
39 |
40 | pub fn value(&self, id: String) -> f32 {
41 | let last_value = self.last_value.borrow();
42 | if let Some(v) = last_value.get(&id) {
43 | *v
44 | } else {
45 | 0.0
46 | }
47 | }
48 |
49 | pub fn trigger(&self, id: String, value: f32) {
50 | let controls = self.controls.borrow();
51 |
52 | console::log_1(&"trying to trigger".into());
53 |
54 | if let Some(f) = controls.get(&id) {
55 | let mut last_value = self.last_value.borrow_mut();
56 | last_value.insert(id.clone(), value);
57 | f(value);
58 | }
59 | let modulations = self.modulations.borrow();
60 | if let Some(modulations) = modulations.get(&id) {
61 | for modulated_id in modulations {
62 | self.trigger(modulated_id.to_string(), value);
63 | }
64 | }
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/ui/components/Knob.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | {{label}}
6 |
7 |
3 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
3 |
11 |
3 |
10 |
11 |
18 |
19 |
20 |
LP Filter
21 |
22 |
23 |
24 |
25 |
31 |
32 |