Simple monitor for displaying MIDI status for digital pianos.
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

script.js 3.0 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. ((window, electron) => {
  2. const X_OFFSET = 0
  3. const NATURAL_KEY_WIDTH = 16;
  4. const ACCIDENTAL_KEY_WIDTH = 11;
  5. const accidental_key_x_offsets = [
  6. 10.0 / 112.0,
  7. 28.0 / 112.0,
  8. 57.0 / 112.0,
  9. 75.0 / 112.0,
  10. 93.0 / 112.0,
  11. ]
  12. const { ipcRenderer, } = electron
  13. const renderKeys = () => {
  14. let midi_note = 12
  15. const elements = {}
  16. let element
  17. const keyboard = window.document.getElementById('keyboard')
  18. for (let octave = 0; octave < 9; octave += 1) {
  19. for (let natural_key = 0; natural_key < 7; natural_key += 1) {
  20. element = window.document.createElement('div')
  21. element.classList.add('natural')
  22. element.classList.add('key')
  23. element.style.position = 'absolute'
  24. element.style.top = 0
  25. element.style.left = X_OFFSET + (octave * NATURAL_KEY_WIDTH * 7) + (natural_key * NATURAL_KEY_WIDTH) +
  26. 'px'
  27. element.style.width = NATURAL_KEY_WIDTH + 'px'
  28. element.appendChild(window.document.createElement('div'))
  29. elements[midi_note] = element
  30. keyboard.appendChild(element)
  31. switch (natural_key) {
  32. case 0:
  33. case 1:
  34. case 3:
  35. case 4:
  36. case 5:
  37. midi_note += 2;
  38. break;
  39. case 2:
  40. case 6:
  41. midi_note += 1;
  42. break;
  43. default:
  44. break;
  45. }
  46. }
  47. midi_note -= 11;
  48. for (let accidental_key = 0; accidental_key < 5; accidental_key += 1) {
  49. element = window.document.createElement('div')
  50. element.classList.add('accidental')
  51. element.classList.add('key')
  52. element.style.position = 'absolute'
  53. element.style.top = 0
  54. element.style.left = X_OFFSET + (octave * NATURAL_KEY_WIDTH * 7) + (NATURAL_KEY_WIDTH * 7 *
  55. accidental_key_x_offsets[accidental_key]) + 'px'
  56. element.style.width = ACCIDENTAL_KEY_WIDTH + 'px'
  57. element.appendChild(window.document.createElement('div'))
  58. elements[midi_note] = element
  59. keyboard.appendChild(element)
  60. switch (accidental_key) {
  61. case 0:
  62. case 2:
  63. case 3:
  64. midi_note += 2;
  65. break;
  66. case 1:
  67. case 4:
  68. midi_note += 3;
  69. break;
  70. default:
  71. break;
  72. }
  73. }
  74. midi_note -= 1;
  75. }
  76. return elements
  77. }
  78. const elements = renderKeys(null, null)
  79. ipcRenderer.on('note', (event, message) => {
  80. const [key, value, ] = message.split(':')
  81. if (value > 0) {
  82. elements[key].classList.add('pressed')
  83. } else {
  84. elements[key].classList.remove('pressed')
  85. }
  86. })
  87. ipcRenderer.on('pedal', (event, message) => {
  88. console.log(message)
  89. const [which, value, ] = message.split(':')
  90. const pedalIds = {
  91. 64: 'sustain',
  92. 66: 'sostenuto',
  93. 67: 'unacorda',
  94. }
  95. console.log(window.document.getElementById(pedalIds[which]))
  96. window.document.getElementById(pedalIds[which]).style.opacity = value / 127 * 0.75 + 0.25
  97. })
  98. })(window, require('electron'))