✨ real music

package.json

@@ -21,6 +21,7 @@
     "@cycle/run": "^3.1.0",
     "koa": "^2.2.0",
     "koa-bodyparser": "^4.2.0",
+    "trampss-audiosynth": "^1.0.0",
     "xstream": "^10.5.0"
   },
   "scripts": {

src/app.js

@@ -6,14 +6,13 @@ import Character from './components/character'
 import Speaker from './components/speaker'
 
 export function App({ DOM$ }) {
-  const rythmbox = Rythmbox({ DOM$ })
-
   const charactersProps = [
-    { name: 'Zora', instrument: 'harp' },
-    { name: 'Goron', instrument: 'bass' },
-    { name: 'Mojo', instrument: 'guitare' },
-    { name: 'Link', instrument: 'ocarina' },
+    { name: 'Zora', instrument: 'piano' },
+    { name: 'Goron', instrument: 'acoustic' },
+    { name: 'Mojo', instrument: 'organ' },
+    { name: 'Link', instrument: 'edm' },
   ]
+  const rythmbox = Rythmbox({ DOM$, props$: xs.of(charactersProps) })
 
   const characters = charactersProps.map(props =>
     isolate(Character, `${props.name}-${props.instrument}`)(

src/components/character/character.js

@@ -13,8 +13,9 @@ export default ({ NOTE$, props$ }) => {
   // modify the note by character
   const note$ = xs
     .combine(wireNote.NOTE$, props$)
-    .filter(([note, props]) => note.instrument === props.instrument)
-    .map(([note]) => Object.assign({}, note, { frequency: note.frequency + 1000 }))
+    .filter(([note, props]) => note.character === props.name)
+    .map(([note, props]) =>
+      Object.assign({}, note, { note: note.note, instrument: props.instrument }))
 
   // Character wait <tempo> before play the note
   const music$ = note$.compose(delay(tempo))

src/components/rythmbox/range/range.js

@@ -5,12 +5,12 @@ import Touch from './touch'
 
 export default ({ DOM$, props$ }) => {
   const touches$ = props$
-    .map(({ instrument, frequencies }) => frequencies
-      .map(frequency => ({ frequency, instrument }))
+    .map(({ character, notes }) => notes
+      .map(note => ({ note, character }))
       .map(touchProps =>
         isolate(
           Touch,
-          `${touchProps.instrument}-${touchProps.frequency}`,
+          `${touchProps.character}-${touchProps.note}`,
         )({ DOM$, props$: xs.of(touchProps) }),
       ),
     )
@@ -25,7 +25,7 @@ export default ({ DOM$, props$ }) => {
     .map(([props, dom]) => div(
       '.range',
       [
-        div('.instrument', props.instrument),
+        div('.instrument', props.character),
         div('.touches', dom),
       ],
     ))

src/components/rythmbox/range/touch/touch.js

@@ -11,9 +11,9 @@ export default ({ DOM$, props$ }) => {
   const note$ = xs
     .combine(props$, click$)
     .map(([props]) => ({
-      frequency: props.frequency,
-      instrument: props.instrument,
-      time: 2000,
+      note: props.note,
+      character: props.character,
+      time: 4, // time in second
     }))
 
   const vdom$ = props$

src/components/rythmbox/rythmbox.js

@@ -1,42 +1,33 @@
 import { div } from '@cycle/dom'
 import isolate from '@cycle/isolate'
 import xs from 'xstream'
+import { NOTES } from '../../config'
 import Range from './range'
 
-const frequencies = [
-  329, // E
-  392, // G
-  587, // D
-]
-const instruments = [
-  'guitare',
-  'bass',
-  'ocarina',
-  'harp',
-]
+export default ({ DOM$, props$ }) => {
+  // Create characters component with props
+  const createRanges = props =>
+    props.map(c => isolate(Range, c.name)({
+      DOM$,
+      props$: xs.of({ character: c.name, notes: NOTES }),
+    }))
 
-export default ({ DOM$ }) => {
-  const ranges = instruments
-    .map(instrument => ({ instrument, frequencies }))
-    .map(props =>
-      isolate(
-        Range,
-        props.instrument,
-      )({ DOM$, props$: xs.of(props) }),
-    )
+  const ranges$ = props$.map(createRanges)
 
-  const vdom$ = xs
-    .combine(...ranges.map(r => r.DOM$))
-    .map(doms => div(
-      '.rythmbox',
-      [
-        div('.title', frequencies.map(f => div('.frequency', f))),
-        div(doms),
-      ],
-    ))
+  const vdom$ = ranges$
+    .map(ranges => ranges.map(r => r.DOM$))
+    .map(r => xs.combine(...r)
+      .map(rs => div('.rythmbox', [
+        div('.title', NOTES.map(n => div('.frequency', n))),
+        div(rs),
+      ])))
+    .flatten()
 
-  const note$ = xs
-    .merge(...ranges.map(t => t.NOTE$))
+  const note$ = ranges$
+    .map(ranges => xs.merge(
+      ...ranges.map(r => r.NOTE$)),
+    )
+    .flatten()
 
   return {
     DOM$: vdom$,

src/components/speaker/speaker.js

@@ -8,7 +8,7 @@ export default ({ MUSIC$ }) => {
 
   // Add a 'stop' event (for animation)
   const musicStop$ = musicStart$
-    .map(music => xs.of(music).compose(delay(music.time)))
+    .map(music => xs.of(music).compose(delay(music.time * 1000)))
     .flatten()
     .map(music => Object.assign({}, music, { stop: true }))
 

src/config.js

@@ -1 +1,2 @@
 export const WIRE_TIMEOUT = 1000
+export const NOTES = ['A', 'B', 'C', 'D', 'E', 'F', 'G']

src/drivers/music.js

@@ -1,16 +1,10 @@
-const context = new (window.AudioContext || window.webkitAudioContext)()
+import Synth from 'trampss-audiosynth'
 
 export default (sink$) => {
   sink$.addListener({
-    next: (note) => {
-      const { type = 'sine', frequency, time = 200 } = note
-
-      const osc = context.createOscillator()
-      osc.type = type
-      osc.frequency.value = frequency
-      osc.connect(context.destination)
-      osc.start()
-      osc.stop(context.currentTime + (time / 1000))
+    next: (music) => {
+      const { instrument, note, time } = music
+      Synth.play(instrument, note, 3, time)
     },
   })
 }

yarn.lock

@@ -2300,6 +2300,10 @@ koa@^2.2.0:
     type-is "^1.5.5"
     vary "^1.0.0"
 
+kriya-audiosynth@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/kriya-audiosynth/-/kriya-audiosynth-1.0.0.tgz#e2c9fbda600416a7b20bb7e3af1aec28fdef4a1b"
+
 lazy-cache@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
@@ -3544,7 +3548,7 @@ strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
 
-supports-color@3.1.2:
+supports-color@3.1.2, supports-color@^3.1.0, supports-color@^3.1.1:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.1.2.tgz#72a262894d9d408b956ca05ff37b2ed8a6e2a2d5"
   dependencies:
@@ -3554,12 +3558,6 @@ supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
 
-supports-color@^3.1.0, supports-color@^3.1.1:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
-  dependencies:
-    has-flag "^1.0.0"
-
 symbol-observable@^1.0.1, symbol-observable@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d"
@@ -3628,6 +3626,10 @@ tough-cookie@~2.3.0:
   dependencies:
     punycode "^1.4.1"
 
+trampss-audiosynth@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/trampss-audiosynth/-/trampss-audiosynth-1.0.0.tgz#f60a3ce6952692ffde69116431fb99b0f6dc5cba"
+
 trim-right@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"