feature: starting to work on a soft synth using tonejs

- adds svg piano (maybe would be nice to separate it to a module)
- adds tonejs
- adds vscode debugging launch config
- adds portfolio/audio page

Author: stringparser

.vscode/launch.json

@@ -0,0 +1,26 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Next: Chrome",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Next: Node",
+      "runtimeExecutable": "next",
+      "runtimeArgs": [
+        "--inspect"
+      ],
+      "port": 9229,
+      "console": "integratedTerminal"
+    }
+  ]
+}

components/keys/piano.tsx

@@ -0,0 +1,98 @@
+import styled from 'styled-components';
+
+export type PianoProps = {
+  blackKeyWith?: number;
+  whiteKeyWidth?: number;
+  numberOfOctaves?: number;
+};
+
+function getRange(n: number) {
+  return Array.from(Array(n).keys());
+}
+
+// total is 12 keys per octave
+// index from 0 to 4 is black
+// index from 5 to 11 is white
+
+function getX(index: number, props: PianoProps) {
+  const pos = getPos(index);
+  const offset = Math.floor(index / 12) * getFullOctaveWith(props);
+
+  if (pos < 7) {
+    return offset + pos * props.whiteKeyWidth;
+  }
+
+  if (pos < 9) {
+    return (
+      offset
+      + (pos - 6) * props.whiteKeyWidth
+      - props.blackKeyWith / 2
+    );
+  } else {
+    return (
+      offset +
+      + (4 + pos - 9) * props.whiteKeyWidth
+      - props.blackKeyWith / 2
+    );
+  }
+}
+
+function getRectProps(index: number, props: PianoProps) {
+  const isWhite = isWhiteKey(index);
+  return {
+    fill: isWhite ? 'white' : 'black',
+    width: isWhite ? props.whiteKeyWidth : props.blackKeyWith,
+    height: isWhite ? '80' : '50',
+  };
+}
+
+function getPos(index: number) {
+  return index % 12;
+}
+
+function isWhiteKey(index: number) {
+  return getPos(index) < 7;
+}
+
+function getFullOctaveWith({ whiteKeyWidth }: PianoProps) {
+  return whiteKeyWidth * 7;
+}
+
+const Rect = styled.rect`
+  cursor: pointer;
+
+  &:hover {
+    fill: rgba(0,0,0,0.2);
+  }
+`;
+
+const Piano: React.SFC<PianoProps> = (props) => (
+  <svg
+    strokeWidth="1"
+    viewBox={`0 0 ${props.numberOfOctaves * getFullOctaveWith(props)} 80`}
+  >
+    <g>
+      {getRange(props.numberOfOctaves * 12).map((_, index) => {
+        const rectProps = getRectProps(index, props);
+        return (
+          <Rect
+            x={getX(index, props)}
+            y="0"
+            key={index}
+            stroke="rgba(0,0,0,0.3)"
+            strokeWidth="1"
+            {...rectProps}
+          />
+        );
+      })}
+    </g>
+  </svg>
+);
+
+Piano.defaultProps = {
+  blackKeyWith: 16,
+  whiteKeyWidth: 20,
+  numberOfOctaves: 3,
+};
+
+export default Piano;

package.json

@@ -31,6 +31,8 @@
     "typescript": "^2.9.2"
   },
   "dependencies": {
-    "@types/segment-analytics": "^0.0.28"
+    "@types/segment-analytics": "^0.0.28",
+    "@types/webmidi": "^2.0.2",
+    "tone": "^0.12.80"
   }
 }

pages/portfolio/audio.tsx

@@ -0,0 +1,60 @@
+import { Component } from 'react';
+
+import Page from '../../components/Page';
+import Layer from '../../components/Layer';
+import Piano from '../../components/keys/piano';
+import Section from '../../components/section/Section';
+
+type State = {
+};
+
+class AudioPage extends Component<{}, State> {
+  state: State = {
+  };
+
+  componentDidMount() {
+    navigator.requestMIDIAccess().then(async ({ inputs }) => {
+      const Tone = await import('tone');
+      const synth = new Tone.PolySynth(10);
+
+      synth.toMaster();
+
+      inputs.forEach(el => {
+        el.onmidimessage = (msg) => {
+          const [cmd, midi, velocity] = msg.data;
+
+          if (cmd === 254) {
+            return;
+          }
+
+          const freq = new Tone.Frequency(midi, 'midi');
+
+          if (cmd === 144 && velocity) {
+            synth.triggerAttack([freq], undefined, velocity / 127);
+          } else if (cmd === 144 && !velocity) {
+            synth.triggerRelease(freq);
+          }
+
+          console.log('cmd', cmd, 'note', freq.toNote(), 'data', msg.data);
+        };
+      });
+    });
+  }
+
+  render() {
+    return (
+      <Page title="building audio">
+        <Section>
+          <Layer>
+            controls here
+          </Layer>
+          <Layer>
+            <Piano />
+          </Layer>
+        </Section>
+      </Page>
+    );
+  }
+}
+
+export default AudioPage;

tsconfig.json

@@ -3,21 +3,16 @@
   "compilerOptions": {
     "lib": [
       "dom",
-      "es2015",
-      "es2016",
-      "es2017",
-      "es2017.object"
+      "es7"
     ],
     "jsx": "preserve",
-    "paths": {
-      "@components/*": [ "components/*" ]
-    },
     "module": "esnext",
     "target": "esnext",
     "baseUrl": "src",
     "allowJs": true,
     "sourceMap": true,
     "skipLibCheck": true,
+    "importHelpers": true,
     "noUnusedLocals": true,
     "removeComments": false,
     "moduleResolution": "node",

yarn.lock

@@ -674,6 +674,10 @@
   version "0.0.28"
   resolved "https://registry.yarnpkg.com/@types/segment-analytics/-/segment-analytics-0.0.28.tgz#a23e26d3171cf6a735ae2ae12974b5f6a707c414"
 
+"@types/webmidi@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@types/webmidi/-/webmidi-2.0.2.tgz#0466cf747aaed2b914a1e2564635bbda217cb256"
+
 "@zeit/next-typescript@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@zeit/next-typescript/-/next-typescript-1.1.0.tgz#57a45c85c336fee8d71c1bd966195565016932b2"
@@ -3977,6 +3981,10 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+tone@^0.12.80:
+  version "0.12.80"
+  resolved "https://registry.yarnpkg.com/tone/-/tone-0.12.80.tgz#9a40fca603d02e189251db772ef6c7bf082e6c28"
+
 [email protected]:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/touch/-/touch-3.1.0.tgz#fe365f5f75ec9ed4e56825e0bb76d24ab74af83b"