Musical keyboard component written in React.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

33 lines
975 B

  1. import * as React from 'react'
  2. import SoundGenerator from '../services/SoundGenerator'
  3. type ChangeProps = {
  4. setInstrument(instrument: number): void
  5. }
  6. type Change = (props: ChangeProps) => React.ChangeEventHandler<HTMLSelectElement>
  7. export const change: Change = ({ setInstrument }) => e => {
  8. const { value: rawValue } = e.target
  9. const value = Number(rawValue)
  10. setInstrument(value)
  11. }
  12. type InitializeProps = {
  13. setInstruments(instruments: string[]): void,
  14. generator: SoundGenerator,
  15. }
  16. type Initialize = (props: InitializeProps) => void
  17. export const initialize: Initialize = ({ setInstruments, generator }) => {
  18. setInstruments(generator.getInstrumentNames())
  19. generator.changeInstrument(0, 0)
  20. }
  21. type ReflectProps = {
  22. generator: SoundGenerator,
  23. channel: number,
  24. instrument: number,
  25. }
  26. type Reflect = (props: ReflectProps) => void
  27. export const reflect: Reflect = ({ generator, channel, instrument, }) => {
  28. generator.changeInstrument(channel, instrument)
  29. }