Musical keyboard component written in React.
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

README.md 3.1 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. # Musical Keyboard
  2. Musical keyboard component written in React.
  3. ## Installation
  4. This component is currently available in:
  5. * [Modal.sh JavaScript Package Registry](https://js.pack.modal.sh)
  6. * [npm](https://npmjs.com)
  7. * [GitHub Package Registry](https://npm.pkg.github.com)
  8. Once set up, install the package from the registry:
  9. ```shell script
  10. yarn add @theoryofnekomata/react-musical-keyboard
  11. ```
  12. ## Usage
  13. Basic usage is as follows, rendering the keyboard range of a modern grand piano (88 keys, from A0 to C8):
  14. ```jsx harmony
  15. import * as React from 'react'
  16. import ReactDOM from 'react-dom'
  17. import Keyboard from '@theoryofnekomata/react-musical-keyboard'
  18. const App = () => {
  19. return (
  20. <div>
  21. <Keyboard
  22. startKey={21}
  23. endKey={108}
  24. />
  25. </div>
  26. )
  27. }
  28. const container = window.document.createElement('div')
  29. window.document.body.appendChild(container)
  30. ReactDOM.render(<App />, container)
  31. ```
  32. The library also supports keyboard maps for handling mouse, touch, and keyboard events:
  33. ```jsx harmony
  34. import * as React from 'react'
  35. import ReactDOM from 'react-dom'
  36. import Keyboard, { KeyboardMap } from '@theoryofnekomata/react-musical-keyboard'
  37. const App = () => {
  38. const handleKeysChange = keys => {
  39. // TODO handle key change: send MIDI events, play audio samples, etc.
  40. }
  41. return (
  42. <div>
  43. <Keyboard
  44. startKey={21}
  45. endKey={108}
  46. >
  47. <KeyboardMap
  48. channel={0}
  49. onChange={handleKeysChange}
  50. />
  51. </Keyboard>
  52. </div>
  53. )
  54. }
  55. const container = window.document.createElement('div')
  56. window.document.body.appendChild(container)
  57. ReactDOM.render(<App />, container)
  58. ```
  59. The component is stylable, just supply custom components for the keys:
  60. ```jsx harmony
  61. import * as React from 'react'
  62. import ReactDOM from 'react-dom'
  63. import Keyboard from '@theoryofnekomata/react-musical-keyboard'
  64. import NaturalKey from './my-styled-keys/NaturalKey'
  65. import AccidentalKey from './my-styled-keys/AccidentalKey'
  66. const App = () => {
  67. return (
  68. <div>
  69. <Keyboard
  70. startKey={21}
  71. endKey={108}
  72. keyComponents={{
  73. natural: NaturalKey,
  74. accidental: AccidentalKey
  75. }}
  76. />
  77. </div>
  78. )
  79. }
  80. const container = window.document.createElement('div')
  81. window.document.body.appendChild(container)
  82. ReactDOM.render(<App />, container)
  83. ```
  84. Custom keys should accept a `keyChannels` prop for active keys. For instance, in the custom key components imported above:
  85. ```jsx harmony
  86. // ./my-styled-keys/NaturalKey.js
  87. import * as React from 'react'
  88. import NOT_PRESSED_KEY from './not-pressed.png'
  89. import PRESSED_KEY_OVERLAY from './pressed-overlay.png'
  90. const NaturalKey = ({
  91. keyChannels = []
  92. }) => {
  93. return (
  94. <div>
  95. <img src={NOT_PRESSED_KEY} alt="" />
  96. {keyChannels.map(k => (
  97. <img key={k.channel} src={PRESSED_KEY_OVERLAY} alt="" />
  98. ))}
  99. </div>
  100. )
  101. }
  102. export default NaturalKey
  103. ```
  104. Take note that pressed keys from multiple channels might overlap, therefore it is advisable to support multiple channels pressing a single key at once.
  105. ## License
  106. MIT. See [License file](./LICENSE) for details.