├── .gitignore ├── README.md ├── bower.json ├── images └── toggle.png ├── index.html ├── lfo-test.html ├── scripts ├── qwerty-hancock.min.js └── synth.js └── styles └── synth.css /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Sympathetic Synthesizer System Mk1 2 | ================================== 3 | 4 | A synth created using the Web Audio API. 5 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sympathetic-synth", 3 | "version": "0.1.0", 4 | "homepage": "https://github.com/stuartmemo/sympathetic-synth", 5 | "authors": [ 6 | "Stuart Memo " 7 | ], 8 | "description": "A synth for all occasions", 9 | "main": "main.js", 10 | "keywords": [ 11 | "synth" 12 | ], 13 | "license": "MIT", 14 | "ignore": [ 15 | "**/.*", 16 | "node_modules", 17 | "bower_components", 18 | "test", 19 | "tests" 20 | ], 21 | "dependencies": { 22 | "tsw": "~0.2.6", 23 | "qwerty-hancock": "~0.4.5" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /images/toggle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stuartmemo/sympathetic-synth/3860d0a5dc3b239ad98d8ee3f534290878bd8787/images/toggle.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Sympathetic Synthesizer System Mk1 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

Sympathetic Synthesizer System Mk 1

15 |
16 |
17 | 18 | 19 |
20 |

Oscillator 1

21 |
22 | 23 | 28 |
29 |
30 | 31 | 38 |
39 | 40 | 41 | 42 | 43 |
44 | 45 | 46 |
47 |

Oscillator 2

48 |
49 | 50 | 55 |
56 |
57 | 58 | 65 |
66 | 67 | 68 | 69 | 70 |
71 | 72 | 73 |
74 |

Oscillator 3

75 |
76 | 77 | 82 |
83 |
84 | 85 | 92 |
93 | 94 | 95 | 96 | 97 | 98 |
99 |
100 |
101 |

LFO

102 | 103 | 108 | 109 | 110 | 111 | 112 | 113 | 114 |
115 | 116 | 117 |
118 |

Filter

119 |
120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 |
132 |
133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 |
142 |
143 |
144 |

Volume Filter

145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 |
157 |
158 |

Noise

159 | 160 | 161 |
162 |
163 |

Output

164 | 165 | 166 |
167 |
168 | MIDI 169 |
170 |
171 |
172 |
173 | 174 | 175 | 176 | 344 | 345 | 346 | 347 | 348 | -------------------------------------------------------------------------------- /lfo-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | test 6 | 7 | 8 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /scripts/qwerty-hancock.min.js: -------------------------------------------------------------------------------- 1 | (function(x,G){x.qwertyHancock=function(c){var a=c.id||"keyboard",y=7*(c.octaves||3),z=c.width||600,A=c.height||150,l=c.startNote||"A3",g=l.charAt(1),v=c.whiteNotesColour||"#FFF",w=c.blackNotesColour||"#000",r=c.hoverColour||"#076cf0",s=z/y,D=s/2;c=c.keyboardLayout||"en";var E=new Raphael(a,z,A),t="CDEFGAB".split(""),F=["A","C","D","F","G"],f=0,u=l.charAt(0),l=g,m=!1,p,q,B={},d=[],h=[],n=[];document.getElementById(a).style.fontSize="0px";for(var e=function(a){var b;b=3===a.length?a.charAt(2):a.charAt(1); 2 | a="A A# B C C# D D# E F F# G G#".split(" ").indexOf(a.slice(0,-1));return 440*Math.pow(2,((3>a?a+12+12*(b-1)+1:a+12*(b-1)+1)-49)/12)},a=0;7>a;a++)if(u===t[a]){keyOffset=a;break}for(a=0;7>a;a++)n[a]=6 div { 142 | float: left; 143 | width: 33%; 144 | } 145 | 146 | .oscillators > div.last { 147 | float: none; 148 | display: inline-block; 149 | } 150 | 151 | .filter { 152 | background: #DB9AB7; 153 | border-top: none; 154 | height: 190px; 155 | width: 425px; 156 | float: left; 157 | } 158 | 159 | .lfo { 160 | background: #89BD79; 161 | border-radius: 0 2px 0 0; 162 | width: 150px; 163 | height: 162px; 164 | float: left; 165 | border-left: none; 166 | } 167 | 168 | .volume-filter { 169 | background: #E25D34; 170 | height: 190px; 171 | width: 229px; 172 | float: left; 173 | border-width: 0 4px 4px 0; 174 | } 175 | 176 | .config-bar { 177 | background: #272727; 178 | color: white; 179 | width: 892px; 180 | border-bottom: 0; 181 | padding-right: 0; 182 | display: none; 183 | } 184 | 185 | .volume-filter input[type="range"] { 186 | background: #fe8864; 187 | } 188 | 189 | .filter input[type="range"] { 190 | background: #ecc5d6; 191 | } 192 | 193 | .output input[type="range"] { 194 | background: #49bce2; 195 | width: 145px; 196 | } 197 | 198 | .oscillators input[type="range"] { 199 | background: #fbefb3; 200 | } 201 | 202 | .lfo input[type="range"] { 203 | background: lightgreen; 204 | width: 145px; 205 | } 206 | 207 | .noise h2 { 208 | color: #A981C0; 209 | } 210 | 211 | .noise input[type="range"] { 212 | background-color: #A981C0; 213 | border-color: black; 214 | width: 145px; 215 | } 216 | 217 | .noise { 218 | background: #A25CA5; 219 | border-top: none; 220 | display: inline-block; 221 | width: 150px; 222 | height: 77px; 223 | border-left: none; 224 | } 225 | 226 | .output { 227 | background: #0099cc; 228 | border-top: none; 229 | display: inline-block; 230 | width: 150px; 231 | height: 77px; 232 | border-left: none; 233 | border-bottom: none; 234 | } 235 | 236 | .note-on { 237 | fill: pink; 238 | } 239 | --------------------------------------------------------------------------------