test

.gitignore

@@ -0,0 +1,46 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+static/bundle.js
+esdoc
+pkg
+build
+dist
+testdata/tracks.mid
+testdata/format0.mid
+.vscode/extensions.json
+.vscode/launch.json
+.vscode/settings.json
+.vscode/tasks.json

package.json

@@ -0,0 +1,99 @@
+{
+  "name": "signal",
+  "version": "0.0.1",
+  "description": "A friendly music sequencer application for OS X and Windows.",
+  "scripts": {
+    "start": "webpack serve --config webpack.dev.js",
+    "build": "webpack --config webpack.prod.js",
+    "serve": "npx http-server dist",
+    "test": "jest",
+    "format": "prettier --write src",
+    "lint": "prettier --check src",
+    "firebase": "firebase emulators:start",
+    "firebase:deploy": "firebase deploy"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ryohey/signal.git"
+  },
+  "author": "ryohey",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ryohey/signal/issues"
+  },
+  "homepage": "https://github.com/ryohey/signal/",
+  "private": true,
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-portal": "^1.0.3",
+    "@radix-ui/react-slider": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.0.6",
+    "@rehooks/component-size": "1.0.3",
+    "@ryohey/react-split-pane": "^0.1.94",
+    "@ryohey/react-svg-spinners": "^0.3.2",
+    "@ryohey/wavelet": "^0.6.1",
+    "@ryohey/webgl-react": "^0.3.1",
+    "@sentry/react": "^7.69.0",
+    "@sentry/tracing": "^7.69.0",
+    "color": "^4.2.3",
+    "firebase": "^10.4.0",
+    "firebaseui": "^6.1.0",
+    "gl-matrix": "^3.4.3",
+    "lodash": "^4.17.21",
+    "mdi-react": "^9.2.0",
+    "midifile-ts": "1.5.1",
+    "mobx": "^6.10.2",
+    "mobx-persist-store": "^1.1.3",
+    "mobx-react-lite": "4.0.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-helmet-async": "^1.3.0",
+    "react-window": "^1.8.9",
+    "serializr": "^3.0.2",
+    "wav-encoder": "^1.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.19",
+    "@babel/preset-env": "7.22.15",
+    "@babel/preset-react": "7.22.15",
+    "@babel/preset-typescript": "7.22.15",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
+    "@sentry/webpack-plugin": "^2.7.1",
+    "@types/color": "3.0.4",
+    "@types/jest": "29.5.5",
+    "@types/lodash": "^4.14.198",
+    "@types/node": "20.6.1",
+    "@types/react-dom": "18.2.7",
+    "@types/react-helmet": "6.1.6",
+    "@types/react-window": "^1.8.5",
+    "@types/wav-encoder": "^1.3.0",
+    "@types/webmidi": "2.0.7",
+    "@types/webpack-env": "1.18.1",
+    "@types/wicg-file-system-access": "^2020.9.6",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-inline-react-svg": "^2.0.2",
+    "babel-plugin-lodash": "^3.3.4",
+    "copy-webpack-plugin": "11.0.0",
+    "fork-ts-checker-webpack-plugin": "8.0.0",
+    "html-webpack-plugin": "^5.5.3",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "react-refresh": "0.14.0",
+    "ts-jest": "^29.1.1",
+    "ts-loader": "^9.4.4",
+    "typescript": "^5.2.2",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.88.2",
+    "webpack-bundle-analyzer": "4.9.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
+    "webpack-merge": "5.9.0"
+  }
+}

src/@types/emotion.d.ts

@@ -0,0 +1,5 @@
+import { Theme as BaseTheme } from "../common/theme/Theme"
+
+declare module "@emotion/react" {
+  export interface Theme extends BaseTheme {}
+}

src/@types/index.d.ts

@@ -0,0 +1,6 @@
+declare module "*.png"
+declare module "*.svg"
+
+interface Window {
+  webkitAudioContext: typeof AudioContext
+}

src/common/geometry/Point.ts

@@ -0,0 +1,20 @@
+export interface IPoint {
+  x: number
+  y: number
+}
+
+export function pointSub(v1: IPoint, v2: IPoint) {
+  return {
+    x: v1.x - v2.x,
+    y: v1.y - v2.y,
+  }
+}
+
+export function pointAdd(v1: IPoint, v2: IPoint) {
+  return {
+    x: v1.x + v2.x,
+    y: v1.y + v2.y,
+  }
+}
+
+export const zeroPoint = { x: 0, y: 0 }

src/common/geometry/Rect.test.ts

@@ -0,0 +1,117 @@
+import { intersects } from "."
+
+describe("Rect", () => {
+  describe("intersects", () => {
+    it("included", () => {
+      expect(
+        intersects(
+          {
+            x: 1,
+            y: 1,
+            width: 10,
+            height: 10,
+          },
+          {
+            x: 2,
+            y: 2,
+            width: 1,
+            height: 1,
+          },
+        ),
+      ).toBeTruthy()
+
+      expect(
+        intersects(
+          {
+            x: 1,
+            y: 1,
+            width: 10,
+            height: 10,
+          },
+          {
+            x: 1,
+            y: 1,
+            width: 1,
+            height: 1,
+          },
+        ),
+      ).toBeTruthy()
+    })
+
+    it("overlapped", () => {
+      expect(
+        intersects(
+          {
+            x: 1,
+            y: 1,
+            width: 2,
+            height: 2,
+          },
+          {
+            x: 2,
+            y: 2,
+            width: 1,
+            height: 1,
+          },
+        ),
+      ).toBeTruthy()
+    })
+
+    it("separated", () => {
+      expect(
+        intersects(
+          {
+            x: 0,
+            y: 0,
+            width: 1,
+            height: 1,
+          },
+          {
+            x: 2,
+            y: 2,
+            width: 1,
+            height: 1,
+          },
+        ),
+      ).toBeFalsy()
+    })
+
+    it("adjacent", () => {
+      expect(
+        intersects(
+          {
+            x: 1,
+            y: 1,
+            width: 1,
+            height: 1,
+          },
+          {
+            x: 2,
+            y: 2,
+            width: 1,
+            height: 1,
+          },
+        ),
+      ).toBeFalsy()
+    })
+
+    it("zero", () => {
+      expect(
+        intersects(
+          {
+            x: 1,
+            y: 1,
+            width: 0,
+            height: 0,
+          },
+          {
+            x: 1,
+            y: 1,
+            width: 0,
+            height: 0,
+          },
+        ),
+      ).toBeFalsy()
+    })
+  })
+})

src/common/geometry/Rect.ts

@@ -0,0 +1,77 @@
+import { IPoint } from "../geometry"
+
+export interface IRect extends IPoint {
+  width: number
+  height: number
+}
+
+export function containsPoint(rect: IRect, point: IPoint) {
+  return (
+    point.x >= rect.x &&
+    point.x <= rect.x + rect.width &&
+    point.y >= rect.y &&
+    point.y <= rect.y + rect.height
+  )
+}
+
+export function right(rect: IRect) {
+  return rect.x + rect.width
+}
+
+export function bottom(rect: IRect) {
+  return rect.y + rect.height
+}
+
+export function intersects(rectA: IRect, rectB: IRect) {
+  return (
+    right(rectA) > rectB.x &&
+    right(rectB) > rectA.x &&
+    bottom(rectA) > rectB.y &&
+    bottom(rectB) > rectA.y
+  )
+}
+
+export function containsRect(rectA: IRect, rectB: IRect) {
+  return containsPoint(rectA, rectB) && containsPoint(rectA, br(rectB))
+}
+
+export function br(rect: IRect): IPoint {
+  return {
+    x: right(rect),
+    y: bottom(rect),
+  }
+}
+
+export function fromPoints(pointA: IPoint, pointB: IPoint): IRect {
+  const x1 = Math.min(pointA.x, pointB.x)
+  const x2 = Math.max(pointA.x, pointB.x)
+  const y1 = Math.min(pointA.y, pointB.y)
+  const y2 = Math.max(pointA.y, pointB.y)
+
+  return {
+    x: x1,
+    y: y1,
+    width: x2 - x1,
+    height: y2 - y1,
+  }
+}
+
+export function scale(rect: IRect, scaleX: number, scaleY: number): IRect {
+  return {
+    x: rect.x * scaleX,
+    y: rect.y * scaleY,
+    width: rect.width * scaleX,
+    height: rect.height * scaleY,
+  }
+}
+
+export const zeroRect: IRect = { x: 0, y: 0, width: 0, height: 0 }
+
+export function moveRect(rect: IRect, p: IPoint): IRect {
+  return {
+    x: rect.x + p.x,
+    y: rect.y + p.y,
+    width: rect.width,
+    height: rect.height,
+  }
+}

src/common/geometry/Size.ts

@@ -0,0 +1,4 @@
+export interface ISize {
+  width: number
+  height: number
+}

src/common/geometry/index.ts

@@ -0,0 +1,3 @@
+export * from "./Point"
+export * from "./Rect"
+export * from "./Size"

src/common/helpers/Downloader.ts

@@ -0,0 +1,18 @@
+function download(url: string, name = "noname") {
+  const a = document.createElement("a")
+  a.href = url
+  a.download = name
+  a.style.display = "none"
+  document.body.appendChild(a)
+  a.click()
+  a.remove()
+}
+
+// http://stackoverflow.com/a/33622881/1567777
+export function downloadBlob(blob: Blob, fileName: string) {
+  const url = window.URL.createObjectURL(blob)
+  download(url, fileName)
+  setTimeout(() => {
+    return window.URL.revokeObjectURL(url)
+  }, 1000)
+}

src/common/helpers/array.ts

@@ -0,0 +1,33 @@
+export function isNotNull<T>(a: T | null): a is T {
+  return a !== null
+}
+
+export function isNotUndefined<T>(a: T | undefined): a is T {
+  return a !== undefined
+}
+
+export function isNotNullOrUndefined<T>(a: T | null): a is T {
+  return a !== null && a !== undefined
+}
+
+export const joinObjects = <T extends {}>(
+  list: T[],
+  separator: (prev: T, next: T) => T,
+): T[] => {
+  const result = []
+  for (let i = 0; i < list.length; i++) {
+    result.push(list[i])
+    if (i < list.length - 1) {
+      result.push(separator(list[i], list[i + 1]))
+    }
+  }
+  return result
+}
+
+export const closedRange = (start: number, end: number, step: number) => {
+  const result = []
+  for (let i = start; i <= end; i += step) {
+    result.push(i)
+  }
+  return result
+}

src/common/helpers/bpm.ts

@@ -0,0 +1,9 @@
+const MINUTE = 60 * 1000000
+
+export function uSecPerBeatToBPM(microsecondsPerBeat: number) {
+  return MINUTE / microsecondsPerBeat
+}
+
+export function bpmToUSecPerBeat(bpm: number) {
+  return MINUTE / bpm
+}

src/common/helpers/filterEvents.test.ts

@@ -0,0 +1,33 @@
+import { filterEventsOverlapRange, filterEventsWithRange } from "./filterEvents"
+
+describe("filterEvents", () => {
+  const events = [
+    { tick: 0 },
+    { tick: 5, duration: 5 },
+    { tick: 5, duration: 6 },
+    { tick: 5, duration: 100 },
+    { tick: 10 },
+    { tick: 20 },
+    { tick: 50 },
+  ]
+
+  describe("filterEventsWithRange", () => {
+    it("should contain the event placed at the start tick but the end tick", () => {
+      expect(filterEventsWithRange(events, 10, 50)).toStrictEqual([
+        { tick: 10 },
+        { tick: 20 },
+      ])
+    })
+  })
+
+  describe("filterEventsWithinView", () => {
+    it("should contain events with duration", () => {
+      expect(filterEventsOverlapRange(events, 10, 50)).toStrictEqual([
+        { tick: 5, duration: 6 },
+        { tick: 5, duration: 100 },
+        { tick: 10 },
+        { tick: 20 },
+      ])
+    })
+  })
+})

src/common/helpers/filterEvents.ts

@@ -0,0 +1,49 @@
+export type Range = [start: number, end: number]
+
+const getRange = (
+  pixelsPerTick: number,
+  scrollLeft: number,
+  width: number,
+): Range => [scrollLeft / pixelsPerTick, (scrollLeft + width) / pixelsPerTick]
+
+export const filterEventsWithRange = <T extends { tick: number }>(
+  events: T[],
+  ...range: Range
+): T[] => events.filter((e) => e.tick >= range[0] && e.tick < range[1])
+
+export const filterEventsWithScroll = <T extends { tick: number }>(
+  events: T[],
+  pixelsPerTick: number,
+  scrollLeft: number,
+  width: number,
+): T[] =>
+  filterEventsWithRange(events, ...getRange(pixelsPerTick, scrollLeft, width))
+
+export const filterEventsOverlapRange = <
+  T extends { tick: number; duration?: number },
+>(
+  events: T[],
+  ...range: Range
+): T[] => {
+  return events.filter((e) => {
+    if ("duration" in e && typeof e.duration === "number") {
+      const eventTickEnd = e.tick + e.duration
+      return e.tick < range[1] && eventTickEnd > range[0]
+    }
+    return e.tick >= range[0] && e.tick < range[1]
+  })
+}
+
+export const filterEventsOverlapScroll = <
+  T extends { tick: number; duration?: number },
+>(
+  events: T[],
+  pixelsPerTick: number,
+  scrollLeft: number,
+  width: number,
+): T[] => {
+  return filterEventsOverlapRange(
+    events,
+    ...getRange(pixelsPerTick, scrollLeft, width),
+  )
+}

src/common/helpers/mapBeats.test.ts

@@ -0,0 +1,64 @@
+import { Measure } from "../measure/Measure"
+import { createBeatsInRange } from "./mapBeats"
+
+describe("createBeatsInRange", () => {
+  const timebase = 480
+
+  it("should create beats", () => {
+    const measures: Measure[] = [
+      { startTick: 0, measure: 0, numerator: 4, denominator: 4 },
+      { startTick: timebase * 4, measure: 1, numerator: 6, denominator: 8 },
+      { startTick: timebase * 7, measure: 2, numerator: 3, denominator: 4 },
+    ]
+
+    const beats = createBeatsInRange(measures, timebase, 0, timebase * 15)
+
+    expect(beats).toStrictEqual([
+      // first measure (4/4)
+      { measure: 0, beat: 0, tick: 0 },
+      { measure: 0, beat: 1, tick: timebase },
+      { measure: 0, beat: 2, tick: timebase * 2 },
+      { measure: 0, beat: 3, tick: timebase * 3 },
+
+      // second measure (6/8)
+      { measure: 1, beat: 0, tick: timebase * 4 },
+      { measure: 1, beat: 1, tick: timebase * 4.5 },
+      { measure: 1, beat: 2, tick: timebase * 5 },
+      { measure: 1, beat: 3, tick: timebase * 5.5 },
+      { measure: 1, beat: 4, tick: timebase * 6 },
+      { measure: 1, beat: 5, tick: timebase * 6.5 },
+
+      // third measure (3/4)
+      { measure: 2, beat: 0, tick: timebase * 7 },
+      { measure: 2, beat: 1, tick: timebase * 8 },
+      { measure: 2, beat: 2, tick: timebase * 9 },
+
+      // fourth measure (3/4)
+      { measure: 3, beat: 0, tick: timebase * 10 },
+      { measure: 3, beat: 1, tick: timebase * 11 },
+      { measure: 3, beat: 2, tick: timebase * 12 },
+
+      // fifth measure (3/4)
+      { measure: 4, beat: 0, tick: timebase * 13 },
+      { measure: 4, beat: 1, tick: timebase * 14 },
+    ])
+  })
+
+  it("should create default beats without the initial measure", () => {
+    const measures: Measure[] = [
+      {
+        startTick: timebase * 4, // starts at out of the range
+        measure: 0,
+        numerator: 5,
+        denominator: 8,
+      },
+    ]
+    const beats = createBeatsInRange(measures, timebase, 0, timebase * 4)
+    expect(beats).toStrictEqual([
+      { measure: 0, beat: 0, tick: 0 },
+      { measure: 0, beat: 1, tick: timebase },
+      { measure: 0, beat: 2, tick: timebase * 2 },
+      { measure: 0, beat: 3, tick: timebase * 3 },
+    ])
+  })
+})

src/common/helpers/mapBeats.ts

@@ -0,0 +1,107 @@
+import { Measure } from "../measure/Measure"
+
+export interface Beat {
+  measure: number
+  beat: number
+  tick: number
+}
+
+export type BeatWithX = Beat & {
+  x: number
+}
+
+// 範囲内の measure を探す。最初の要素は startTick 以前のものも含む
+// Find Measure within the range.The first element also includes something before StartTick
+const getMeasuresInRange = (
+  measures: Measure[],
+  startTick: number,
+  endTick: number,
+) => {
+  let i = 0
+  const result: Measure[] = []
+
+  for (const measure of measures) {
+    const nextMeasure = measures[i + 1]
+    i++
+
+    // 最初の measure を探す
+    // Find the first MEASURE
+    if (result.length === 0) {
+      if (nextMeasure !== undefined && nextMeasure.startTick <= startTick) {
+        continue // 次の measure が最初になりうる場合はスキップ
+        // Skip if the next Measure can be the first
+      }
+      if (measure.startTick > startTick) {
+        console.warn("There is no initial time signature. Use 4/4 by default")
+        result.push({ startTick: 0, measure: 0, numerator: 4, denominator: 4 })
+      } else {
+        result.push(measure)
+      }
+    }
+
+    // 残りの measure を探す. 最初の measure がない場合に正しく処理できるように else ではなくもう一度最初の measure があるか調べる
+    // Find the remaining MEASURE. If you can handle correctly if you do not have the first MEASURE, check if you do the first MEASURE, rather than ELSE
+    if (result.length !== 0) {
+      if (measure.startTick <= endTick) {
+        result.push(measure)
+      } else {
+        break
+      }
+    }
+  }
+
+  return result
+}
+
+export const createBeatsInRange = (
+  allMeasures: Measure[],
+  timebase: number,
+  startTick: number,
+  endTick: number,
+): Beat[] => {
+  const beats: Beat[] = []
+  const measures = getMeasuresInRange(allMeasures, startTick, endTick)
+
+  measures.forEach((measure, i) => {
+    const nextMeasure = measures[i + 1]
+
+    const ticksPerBeat = (timebase * 4) / measure.denominator
+
+    // 次の小節か曲の endTick まで拍を作る
+    // Make a beat up to the next bar or song EndTick
+    const lastTick = nextMeasure ? nextMeasure.startTick : endTick
+
+    const startBeat = Math.max(
+      0,
+      Math.floor((startTick - measure.startTick) / ticksPerBeat),
+    )
+    const endBeat = (lastTick - measure.startTick) / ticksPerBeat
+
+    for (let beat = startBeat; beat < endBeat; beat++) {
+      const tick = measure.startTick + ticksPerBeat * beat
+      beats.push({
+        measure: measure.measure + Math.floor(beat / measure.numerator),
+        beat: beat % measure.numerator,
+        tick,
+      })
+    }
+  })
+
+  return beats
+}
+
+export const createBeatsWithXInRange = (
+  allMeasures: Measure[],
+  pixelsPerTick: number,
+  timebase: number,
+  startTick: number,
+  width: number,
+): BeatWithX[] => {
+  const endTick = startTick + width / pixelsPerTick
+  return createBeatsInRange(allMeasures, timebase, startTick, endTick).map(
+    (b) => ({
+      ...b,
+      x: Math.round(b.tick * pixelsPerTick),
+    }),
+  )
+}

src/common/helpers/noteAssembler.test.ts

@@ -0,0 +1,70 @@
+import { assemble, deassemble } from "./noteAssembler"
+
+describe("deassemble", () => {
+  it("should deassemble to two notes", () => {
+    const note = {
+      type: "channel",
+      subtype: "note",
+      noteNumber: 32,
+      tick: 100,
+      duration: 60,
+      velocity: 50,
+      channel: 3,
+    }
+    const result = deassemble(note)
+    expect(result.length).toBe(2)
+    expect(result[0]).toStrictEqual({
+      type: "channel",
+      subtype: "noteOn",
+      noteNumber: 32,
+      deltaTime: 0,
+      tick: 100,
+      velocity: 50,
+      channel: 3,
+    })
+    expect(result[1]).toStrictEqual({
+      type: "channel",
+      subtype: "noteOff",
+      noteNumber: 32,
+      deltaTime: 0,
+      tick: 100 + 60,
+      velocity: 0,
+      channel: 3,
+    })
+  })
+})
+
+describe("assemble", () => {
+  it("should assemble to an note", () => {
+    const notes = [
+      {
+        type: "channel",
+        subtype: "noteOn",
+        noteNumber: 14,
+        tick: 93,
+        velocity: 120,
+        channel: 5,
+      },
+      {
+        type: "channel",
+        subtype: "noteOff",
+        noteNumber: 14,
+        tick: 193,
+        velocity: 0,
+        channel: 5,
+      },
+    ]
+    const result = assemble(notes)
+    expect(result.length).toBe(1)
+    expect(result[0]).toStrictEqual({
+      id: -1,
+      type: "channel",
+      subtype: "note",
+      noteNumber: 14,
+      tick: 93,
+      velocity: 120,
+      channel: 5,
+      duration: 100,
+    })
+  })
+})

src/common/helpers/noteAssembler.ts

@@ -0,0 +1,80 @@
+import { NoteOffEvent, NoteOnEvent } from "midifile-ts"
+import { noteOffMidiEvent, noteOnMidiEvent } from "../midi/MidiEvent"
+import { NoteEvent, TickProvider } from "../track"
+
+/**
+
+  assemble noteOn and noteOff to single note event to append duration
+
+ */
+export function assemble<T extends {}>(
+  events: (T | TickNoteOffEvent | TickNoteOnEvent)[],
+): (T | NoteEvent)[] {
+  const noteOnEvents: TickNoteOnEvent[] = []
+
+  function findNoteOn(noteOff: TickNoteOffEvent): TickNoteOnEvent | null {
+    const i = noteOnEvents.findIndex((e) => {
+      return e.noteNumber === noteOff.noteNumber
+    })
+    if (i < 0) {
+      return null
+    }
+    const e = noteOnEvents[i]
+    noteOnEvents.splice(i, 1)
+    return e
+  }
+
+  const result: (T | NoteEvent)[] = []
+  events.forEach((e) => {
+    if ("subtype" in e) {
+      switch (e.subtype) {
+        case "noteOn":
+          noteOnEvents.push(e)
+          break
+        case "noteOff": {
+          const noteOn = findNoteOn(e)
+          if (noteOn != null) {
+            const note: NoteEvent = {
+              ...noteOn,
+              subtype: "note",
+              id: -1,
+              tick: noteOn.tick,
+              duration: e.tick - noteOn.tick,
+            }
+            result.push(note)
+          }
+          break
+        }
+        default:
+          result.push(e)
+          break
+      }
+    } else {
+      result.push(e)
+    }
+  })
+
+  return result
+}
+
+export type TickNoteOnEvent = Omit<NoteOnEvent, "channel" | "deltaTime"> &
+  TickProvider
+export type TickNoteOffEvent = Omit<NoteOffEvent, "channel" | "deltaTime"> &
+  TickProvider
+
+// separate note to noteOn + noteOff
+export function deassemble<T extends {}>(
+  e: T | NoteEvent,
+): (T | TickNoteOnEvent | TickNoteOffEvent)[] {
+  if ("subtype" in e && e.subtype === "note") {
+    const channel = (e as any)["channel"] ?? -1
+    const noteOn = noteOnMidiEvent(0, channel, e.noteNumber, e.velocity)
+    const noteOff = noteOffMidiEvent(0, channel, e.noteNumber)
+    return [
+      { ...noteOn, tick: e.tick },
+      { ...noteOff, tick: e.tick + e.duration },
+    ]
+  } else {
+    return [e as T]
+  }
+}

src/common/helpers/noteNumberString.ts

@@ -0,0 +1,32 @@
+import { MIDIControlEventNames } from "midifile-ts"
+
+const NOTE_NAMES = [
+  "C",
+  "C#",
+  "D",
+  "D#",
+  "E",
+  "F",
+  "F#",
+  "G",
+  "G#",
+  "A",
+  "A#",
+  "B",
+]
+
+function noteNameWithOctString(noteNumber: number): string {
+  const oct = Math.floor(noteNumber / 12) - 1
+  const key = noteNumber % 12
+  return `${NOTE_NAMES[key]}${oct}`
+}
+
+function noteNumberString(noteNumber: number): string {
+  return `${noteNameWithOctString(noteNumber)} (${noteNumber})`
+}
+
+function controllerTypeString(controllerType: number): string {
+  return MIDIControlEventNames[controllerType]
+}
+
+export { noteNameWithOctString, noteNumberString, controllerTypeString }

src/common/helpers/pojo.ts

@@ -0,0 +1,7 @@
+import { custom } from "serializr"
+
+// https://github.com/mobxjs/serializr/issues/50#issuecomment-310831516
+export const pojo = custom(
+  (val) => val,
+  (val) => val,
+)

src/common/helpers/songToSynthEvents.ts

@@ -0,0 +1,56 @@
+import { SynthEvent } from "@ryohey/wavelet"
+import Song from "../song"
+
+const tickToMillisec = (tick: number, bpm: number, timebase: number) =>
+  (tick / (timebase / 60) / bpm) * 1000
+
+interface Keyframe {
+  tick: number
+  bpm: number
+  timestamp: number
+}
+
+export const songToSynthEvents = (
+  song: Song,
+  sampleRate: number,
+): SynthEvent[] => {
+  const events = [...song.allEvents].sort((a, b) => a.tick - b.tick)
+
+  let keyframe: Keyframe = {
+    tick: 0,
+    bpm: 120,
+    timestamp: 0,
+  }
+
+  const synthEvents: SynthEvent[] = []
+
+  // channel イベントを MIDI Output に送信
+  // Send Channel Event to MIDI OUTPUT
+  for (const e of events) {
+    const timestamp =
+      tickToMillisec(e.tick - keyframe.tick, keyframe.bpm, song.timebase) +
+      keyframe.timestamp
+    const delayTime = (timestamp / 1000) * sampleRate
+
+    switch (e.type) {
+      case "channel":
+        synthEvents.push({
+          type: "midi",
+          midi: e,
+          delayTime,
+        })
+      case "meta":
+        switch (e.subtype) {
+          case "setTempo":
+            keyframe = {
+              tick: e.tick,
+              bpm: (60 * 1000000) / e.microsecondsPerBeat,
+              timestamp,
+            }
+            break
+        }
+    }
+  }
+
+  return synthEvents
+}

src/common/helpers/toRawEvents.ts

@@ -0,0 +1,37 @@
+import flatten from "lodash/flatten"
+import { AnyEvent } from "midifile-ts"
+import { DeltaTimeProvider, TickProvider, TrackEvent } from "../track"
+import { isSignalEvent, mapFromSignalEvent } from "../track/signalEvents"
+import { deassemble as deassembleNote } from "./noteAssembler"
+
+// events in each tracks
+export function addDeltaTime<T extends TickProvider>(
+  events: T[],
+): (T & DeltaTimeProvider)[] {
+  let prevTick = 0
+  return events
+    .sort((a, b) => a.tick - b.tick)
+    .map((e) => {
+      const newEvent = {
+        ...e,
+        deltaTime: e.tick - prevTick,
+      }
+      delete (newEvent as any).tick
+      prevTick = e.tick
+      return newEvent
+    })
+}
+
+// convert the signal event to the normal sequencer specific event
+const fromSignalEvent = (e: TrackEvent): TrackEvent => {
+  if (isSignalEvent(e)) {
+    return mapFromSignalEvent(e)
+  }
+  return e
+}
+
+export function toRawEvents(events: TrackEvent[]): AnyEvent[] {
+  const a = flatten(events.map(fromSignalEvent).map(deassembleNote))
+  const c = addDeltaTime(a)
+  return c as AnyEvent[]
+}

src/common/helpers/toTrackEvents.ts

@@ -0,0 +1,56 @@
+import { AnyEvent } from "midifile-ts"
+import {
+  AnyEventFeature,
+  DeltaTimeProvider,
+  isSequencerSpecificEvent,
+  TickProvider,
+} from "../track"
+import { mapToSignalEvent } from "../track/signalEvents"
+import { DistributiveOmit } from "../types"
+import { assemble as assembleNotes } from "./noteAssembler"
+
+export function addTick<T extends DeltaTimeProvider>(events: T[]) {
+  let tick = 0
+  return events.map((e) => {
+    const { deltaTime, ...rest } = e
+    tick += deltaTime
+    return {
+      ...(rest as DistributiveOmit<T, "deltaTime">),
+      tick,
+    }
+  })
+}
+
+export const removeUnnecessaryProps = <T>(e: T): T => {
+  const { channel, ...ev } = e as any
+  return ev
+}
+
+export const isSupportedEvent = (e: AnyEventFeature): boolean =>
+  !(e.type === "meta" && e.subtype === "endOfTrack")
+
+const toSignalEvent = <
+  T extends DistributiveOmit<AnyEvent, "deltaTime"> & TickProvider,
+>(
+  e: T,
+) => {
+  if (isSequencerSpecificEvent(e)) {
+    return mapToSignalEvent(e)
+  }
+  return e
+}
+
+export function toTrackEvents(events: AnyEvent[]) {
+  return assembleNotes(
+    addTick(events.filter(isSupportedEvent)).map(toSignalEvent),
+  ).map(removeUnnecessaryProps)
+}
+
+// toTrackEvents without addTick
+export function tickedEventsToTrackEvents(
+  events: (DistributiveOmit<AnyEvent, "deltaTime"> & TickProvider)[],
+) {
+  return assembleNotes(events.filter(isSupportedEvent).map(toSignalEvent)).map(
+    removeUnnecessaryProps,
+  )
+}

src/common/helpers/valueEvent.ts

@@ -0,0 +1,41 @@
+// abstraction layer for pitch-bend and controller events
+
+import { controllerMidiEvent, pitchBendMidiEvent } from "../midi/MidiEvent"
+import { isControllerEventWithType, isPitchBendEvent } from "../track"
+
+export type ValueEventType =
+  | { type: "pitchBend" }
+  | { type: "controller"; controllerType: number }
+
+export const createValueEvent = (t: ValueEventType) => (value: number) => {
+  switch (t.type) {
+    case "pitchBend":
+      return pitchBendMidiEvent(0, 0, Math.round(value))
+    case "controller":
+      return controllerMidiEvent(0, 0, t.controllerType, Math.round(value))
+  }
+}
+
+export const isValueEvent = (t: ValueEventType) => {
+  switch (t.type) {
+    case "pitchBend":
+      return isPitchBendEvent
+    case "controller":
+      return isControllerEventWithType(t.controllerType)
+  }
+}
+
+export const isEqualValueEventType = (
+  item: ValueEventType,
+  other: ValueEventType,
+): boolean => {
+  switch (item.type) {
+    case "pitchBend":
+      return other.type === "pitchBend"
+    case "controller":
+      return (
+        other.type === "controller" &&
+        item.controllerType === other.controllerType
+      )
+  }
+}

src/common/localize/envString.ts

@@ -0,0 +1,14 @@
+export const envString = (() => {
+  const os = navigator.userAgent.indexOf("Mac") != -1 ? "macOS" : "PC"
+
+  switch (os) {
+    case "macOS":
+      return {
+        cmdOrCtrl: "Cmd",
+      }
+    case "PC":
+      return {
+        cmdOrCtrl: "Ctrl",
+      }
+  }
+})()

src/common/localize/localization.ts

@@ -0,0 +1,588 @@
+export default {
+  ja: {
+    "landing-title": "signal - オンラインMIDIシーケンサ",
+    "app-intro": "ブラウザで音楽が作れる",
+    "app-desc": "すぐに使えるMIDI編集フリーソフト",
+    launch: "起動",
+    platform:
+      "対応ブラウザ (デスクトップ版のみ): Google Chrome / Firefox / Safari",
+    features: "機能",
+    "feature-midi-file": "フル機能のMIDIエディター",
+    "feature-midi-file-description":
+      "複数トラックに対応したピアノロールエディタを使って、自在に作曲しましょう。もちろんベロシティやピッチベンド、エクスプレッション、モジュレーションを使った豊かな表現ができます。",
+    "feature-gm-module": "GM互換音源搭載",
+    "feature-gm-module-description":
+      "WebAudio APIとAudioWorkletで作られた専用の音源モジュールにより、ブラウザ上で大量のMIDIノートを鳴らすことが可能になりました。",
+    "piano-roll": "ピアノロール",
+    tempo: "テンポ",
+    "tempo-track": "テンポトラック",
+    "feature-time-signature": "4/4以外の拍子・テンポチェンジに対応",
+    "feature-time-signature-description":
+      "グラフエディタを使って、曲の途中でテンポや拍子を自由に変えることができます。",
+    "feature-pwa": "PWA対応",
+    "feature-pwa-description":
+      "アドレスバーが邪魔ですか？アプリとしてインストールすることができます。",
+    "feature-export-wav": "WAVファイルへの書き出し",
+    "feature-midi-io": "MIDIキーボード対応",
+    "feature-midi-io-description":
+      "Web MIDI APIに対応したブラウザでは、MIDIキーボードを接続して演奏を録音したり、ハードウェアシンセで音を鳴らしたりすることができます。",
+    "feature-export-audio": "高速オーディオ書き出し機能",
+    "feature-export-audio-description":
+      "作った曲をWAVファイルに書き出して、スマートフォンで聴いたり動画のBGMに使ったり、DAWに取り込んだりすることができます。",
+    "time-signature": "拍子",
+    "add-time-signature": "拍子を追加",
+    "remove-time-signature": "拍子を削除",
+    support: "サポート",
+    "sponsor-intro":
+      "signalは週末に趣味で作っているアプリです。もしブラウザで動作する軽量な作曲ソフトというコンセプトに共感してもらえたら、ぜひご支援ください。",
+    "support-github-desctiption": "GitHubで不具合報告や要望を送る",
+    "become-sponsor": "スポンサーになりませんか？",
+    "open-github-sponsors": "GitHub Sponsorsを開く",
+    "follow-twitter": "Twitterで更新情報を確認する",
+    file: "ファイル",
+    "new-song": "新規作成",
+    "open-song": "開く",
+    "save-song": "保存",
+    "save-as": "名前を付けて保存",
+    "song-created": "楽曲が作成されました",
+    "song-saved": "楽曲が保存されました",
+    "download-midi": "MIDIファイルをダウンロード",
+    "untitled-song": "無題の楽曲",
+    name: "名前",
+    rename: "名前の変更",
+    track: "トラック",
+    tracks: "トラック",
+    "add-track": "トラックを追加",
+    "delete-track": "トラックを削除",
+    "duplicate-track": "トラックを複製",
+    channel: "チャンネル",
+    categories: "カテゴリ",
+    instruments: "楽器",
+    "rhythm-track": "リズムトラック",
+    "conductor-track": "コンダクタートラック",
+    "track-name": "トラック名",
+    cancel: "キャンセル",
+    ok: "OK",
+    reset: "リセット",
+    triplet: "三連符",
+    dotted: "付点",
+    "confirm-new": "編集中の楽曲が破棄されます。本当に新規作成しますか？",
+    "confirm-open": "編集中の楽曲が破棄されます。本当に開きますか？",
+    "confirm-close": "編集中の楽曲が破棄されます。本当にページを閉じますか？",
+    "auto-scroll": "自動でスクロール",
+    help: "ヘルプ",
+    close: "閉じる",
+    "keyboard-shortcut": "キーボードショートカット",
+    "play-pause": "再生・一時停止",
+    rewind: "巻戻し",
+    "fast-forward": "早送り",
+    "forward-rewind": "早送り・巻き戻し",
+    "next-previous-track": "次のトラック・前のトラック",
+    "solo-mute-ghost": "ソロ・ミュート・ゴーストトラックの切り替え",
+    stop: "停止",
+    record: "録音",
+    "pencil-tool": "鉛筆ツール",
+    "selection-tool": "選択ツール",
+    "copy-selection": "選択範囲をコピー",
+    "cut-selection": "選択範囲を切り取り",
+    "paste-selection": "コピーした選択範囲を現在位置に貼り付け",
+    "select-all": "すべて選択",
+    "delete-selection": "選択範囲を削除",
+    "move-selection": "選択範囲を移動",
+    undo: "元に戻す",
+    redo: "やり直し",
+    cut: "切り取り",
+    copy: "コピー",
+    paste: "ペースト",
+    duplicate: "複製",
+    delete: "削除",
+    "song-deleted": "曲を削除しました",
+    "song-delete-failed": "曲の削除に失敗しました",
+    "select-note": "ノートを選択",
+    "scroll-horizontally": "左右にスクロール",
+    "scroll-vertically": "上下にスクロール",
+    settings: "設定",
+    "midi-settings": "MIDI設定",
+    inputs: "入力",
+    outputs: "出力",
+    "no-inputs": "入力デバイスが見つかりません",
+    "one-octave-up": "+1オクターブ",
+    "one-octave-down": "-1オクターブ",
+    arrange: "アレンジ",
+    "arrangement-view": "アレンジビュー",
+    "open-help": "ヘルプを開く",
+    "event-list": "イベントリスト",
+    "open-chat": "チャットを開く",
+    property: "プロパティ",
+    quantize: "クオンタイズ",
+    "snap-to-grid": "グリッドにスナップ",
+    "export-audio": "オーディオ書き出し",
+    export: "書き出し",
+    "exporting-audio": "オーディオを書き出し中...",
+    "file-type": "ファイル形式",
+    "export-error-too-short": "曲が短すぎます",
+    "set-loop-start": "ループ開始位置を設定",
+    "set-loop-end": "ループ終了位置を設定",
+    "switch-tab": "タブを切り替え",
+    transpose: "トランスポーズ",
+    yes: "はい",
+    no: "いいえ",
+    "please-sign-up": "サインアップしてクラウドセーブを利用",
+    "save-changes": "曲への変更を保存しますか?",
+    "sign-in": "サインイン",
+    "sign-out": "サインアウト",
+    "success-sign-in": "サインインに成功しました",
+    files: "ファイル",
+    "created-date": "作成日時",
+    "modified-date": "更新日時",
+    "cloud-beta-warning":
+      "クラウド機能は開発中のベータ版のため、大事な楽曲はこまめにダウンロードをお願いします。",
+    "cloud-description":
+      "サインインすることで楽曲をクラウドに保存し、いつでもどこからでも作曲を再開することができます。",
+    "import-midi": "MIDI をインポート",
+    "export-midi": "MIDI をエクスポート",
+    general: "一般",
+    "change-track-color": "トラックの色を変更",
+    "control-settings": "コントロール設定",
+    add: "追加",
+    remove: "削除",
+    /* MIDI Instrument Categories */
+    Piano: "ピアノ",
+    "Chromatic Percussion": "クロマチック",
+    Organ: "オルガン",
+    Guitar: "ギター",
+    Bass: "ベース",
+    Strings: "ストリングス",
+    Ensemble: "アンサンブル",
+    Brass: "ブラス",
+    Reed: "リード",
+    Pipe: "笛",
+    "Synth Lead": "シンセリード",
+    "Synth Pad": "シンセパッド",
+    "Synth Effects": "シンセエフェクト",
+    Ethnic: "民族楽器",
+    Percussive: "打楽器",
+    "Sound effects": "効果音",
+    /* MIDI Instruments */
+    "Acoustic Grand Piano": "アコースティックピアノ",
+    "Bright Acoustic Piano": "ブライトピアノ",
+    "Electric Grand Piano": "エレクトリック・グランドピアノ",
+    "Honky-tonk Piano": "ホンキートンクピアノ",
+    "Electric Piano 1": "エレクトリックピアノ",
+    "Electric Piano 2": "FMエレクトリックピアノ",
+    Harpsichord: "ハープシコード",
+    Clavinet: "クラビネット",
+    Celesta: "チェレスタ",
+    Glockenspiel: "グロッケンシュピール",
+    "Music Box": "オルゴール",
+    Vibraphone: "ヴィブラフォン",
+    Marimba: "マリンバ",
+    Xylophone: "木琴",
+    "Tubular Bells": "チューブラーベル",
+    Dulcimer: "ダルシマー",
+    "Drawbar Organ": "ドローバーオルガン",
+    "Percussive Organ": "パーカッシブオルガン",
+    "Rock Organ": "ロックオルガン",
+    "Church Organ": "チャーチオルガン",
+    "Reed Organ": "リードオルガン",
+    Accordion: "アコーディオン",
+    Harmonica: "ハーモニカ",
+    "Tango Accordion": "タンゴアコーディオン",
+    "Acoustic Guitar (nylon)": "アコースティックギター（ナイロン弦）",
+    "Acoustic Guitar (steel)": "アコースティックギター（スチール弦）",
+    "Electric Guitar (jazz)": "ジャズギター",
+    "Electric Guitar (clean)": "クリーンギター",
+    "Electric Guitar (muted)": "ミュートギター",
+    "Overdriven Guitar": "オーバードライブギター",
+    "Distortion Guitar": "ディストーションギター",
+    "Guitar Harmonics": "ギターハーモニクス",
+    "Acoustic Bass": "アコースティックベース",
+    "Electric Bass (finger)": "フィンガーベース",
+    "Electric Bass (pick)": "ピックベース",
+    "Fretless Bass": "フレットレスベース",
+    "Slap Bass 1": "スラップベース 1",
+    "Slap Bass 2": "スラップベース 2",
+    "Synth Bass 1": "シンセベ���ス 1",
+    "Synth Bass 2": "シンセベース 2",
+    Violin: "ヴァイオリン",
+    Viola: "ヴィオラ",
+    Cello: "チェロ",
+    Contrabass: "コントラバス",
+    "Tremolo Strings": "トレモロストリングス",
+    "Pizzicato Strings": "ピッツィカートストリングス",
+    "Orchestral Harp": "ハープ",
+    Timpani: "ティンパニ",
+    "String Ensemble 1": "ストリングアンサンブル",
+    "String Ensemble 2": "スローストリングアンサンブル",
+    "Synth Strings 1": "シンセストリングス",
+    "Synth Strings 2": "シンセストリングス2",
+    "Choir Aahs": "声「アー」",
+    "Voice Oohs": "声「ドゥー」",
+    "Synth Choir": "シンセヴォイス",
+    "Orchestra Hit": "オーケストラヒット",
+    Trumpet: "トランペット",
+    Trombone: "トロンボーン",
+    Tuba: "チューバ",
+    "Muted Trumpet": "ミュートトランペット",
+    "French Horn": "フレンチ・ホルン",
+    "Brass Section": "ブラスセクション",
+    "Synth Brass 1": "シンセブラス 1",
+    "Synth Brass 2": "シンセブラス 2",
+    "Soprano Sax": "ソプラノサックス",
+    "Alto Sax": "アルトサックス",
+    "Tenor Sax": "テナーサックス",
+    "Baritone Sax": "バリトンサックス",
+    Oboe: "オーボエ",
+    "English Horn": "イングリッシュホルン",
+    Bassoon: "ファゴット",
+    Clarinet: "クラリネット",
+    Piccolo: "ピッコロ",
+    Flute: "フルート",
+    Recorder: "リコーダー",
+    "Pan Flute": "パンフルート",
+    "Blown Bottle": "ブロウンボトル",
+    Shakuhachi: "尺八",
+    Whistle: "口笛",
+    Ocarina: "オカリナ",
+    "Lead 1 (square)": "正方波",
+    "Lead 2 (sawtooth)": "ノコギリ波",
+    "Lead 3 (calliope)": "カリオペリード",
+    "Lead 4 (chiff)": "チフリード",
+    "Lead 5 (charang)": "チャランゴリード",
+    "Lead 6 (voice)": "ボイスリード",
+    "Lead 7 (fifths)": "フィフスズリード",
+    "Lead 8 (bass + lead)": "ベース + リード",
+    "Pad 1 (new age)": "ファンタジア",
+    "Pad 2 (warm)": "ウォーム",
+    "Pad 3 (polysynth)": "ポリシンセ",
+    "Pad 4 (choir)": "クワイア",
+    "Pad 5 (bowed)": "ボウ",
+    "Pad 6 (metallic)": "メタリック",
+    "Pad 7 (halo)": "ハロー",
+    "Pad 8 (sweep)": "スウィープ",
+    "FX 1 (rain)": "雨",
+    "FX 2 (soundtrack)": "サウンドトラック",
+    "FX 3 (crystal)": "クリスタル",
+    "FX 4 (atmosphere)": "アトモスフィア",
+    "FX 5 (brightness)": "ブライトネス",
+    "FX 6 (goblins)": "ゴブリン",
+    "FX 7 (echoes)": "エコー",
+    "FX 8 (sci-fi)": "サイファイ",
+    Sitar: "シタール",
+    Banjo: "バンジョー",
+    Shamisen: "三味線",
+    Koto: "琴",
+    Kalimba: "カリンバ",
+    Bagpipe: "バグパイプ",
+    Fiddle: "フィドル",
+    Shanai: "シャハナーイ",
+    "Tinkle Bell": "ティンクルベル",
+    Agogo: "アゴゴ",
+    "Steel Drums": "スチールドラム",
+    Woodblock: "ウッドブロック",
+    "Taiko Drum": "太鼓",
+    "Melodic Tom": "メロディックタム",
+    "Synth Drum": "シンセドラム",
+    "Reverse Cymbal": "リバースシンバル",
+    "Guitar Fret Noise": "ギターフレットノイズ",
+    "Breath Noise": "ブレスノイズ",
+    Seashore: "海岸",
+    "Bird Tweet": "鳥のさえずり",
+    "Telephone Ring": "電話のベル",
+    Helicopter: "ヘリコプター",
+    Applause: "拍手",
+    Gunshot: "銃声",
+  },
+  zh: {
+    "landing-title": "signal - 在线 MIDI 编辑器",
+    "app-intro": "在浏览器中编辑曲目",
+    "app-desc": "无需安装任何东西即可开始创作曲目",
+    launch: "开始",
+    platform: "支持浏览器(仅限桌面版):Google Chrome / Firefox / Safari",
+    features: "功能",
+    "feature-midi-file": "全功能 MIDI 编辑器",
+    "feature-midi-file-description":
+      "使用多轨钢琴卷编辑器自由编排。您可以使用力度、弯音、情绪和调制等控制器来创作出富有表现力的曲目。",
+    "feature-gm-module": "GM 兼容音源",
+    "feature-gm-module-description":
+      "快速加载 128 种虚拟乐器，同时使用 WebAudio API 和 AudioWorklet 构建的专用音频模块让您可以在浏览器中播放任何的音符。",
+    "piano-roll": "钢琴卷",
+    tempo: "速度",
+    "tempo-track": "速度轨",
+    "feature-time-signature": "支持除 4/4 以外的拍号和 300+ BPM",
+    "feature-time-signature-description":
+      "您可以使用可视化编辑器自由更改曲目中的速度和拍号。",
+    "feature-pwa": "支持 PWA",
+    "feature-pwa-description":
+      "想要隐藏浏览器的地址栏？ 您可以将其安装在桌面上并将其用作应用程序使用。",
+    "feature-export-wav": "导出为 WAV 文件",
+    "feature-midi-io": "支持 MIDI 键盘",
+    "feature-midi-io-description":
+      "支持 Web MIDI API 的浏览器允许您连接 MIDI 键盘来录制您的演奏，并使用硬件合成器播放音频。",
+    "feature-export-audio": "快速音频导出功能",
+    "feature-export-audio-description":
+      "您可以将创作的曲目导出为 WAV 文件并在智能手机上播放，将其用作视频的背景音乐，或将其导入 DAW。",
+    "time-signature": "拍号",
+    "add-time-signature": "添加拍号",
+    "remove-time-signature": "删除拍号",
+    support: "支持",
+    "sponsor-intro":
+      "signal 是我个人在周末构建的应用程序。如果您喜欢在浏览器中运行的轻量级合成软件，请支持我。",
+    "support-github-desctiption": "在 GitHub 上提交 BUG 和 PR",
+    "become-sponsor": "成为赞助商",
+    "open-github-sponsors": "前往 GitHub Sponsors",
+    "follow-twitter": "关注 Twitter 以获取更新",
+    file: "文件",
+    "new-song": "新建",
+    "open-song": "打开",
+    "save-song": "保存",
+    "save-as": "另存为",
+    "song-created": "曲目已创建",
+    "song-saved": "曲目已保存",
+    "untitled-song": "未命名",
+    name: "名称",
+    rename: "重命名",
+    track: "音轨",
+    "add-track": "添加音轨",
+    "delete-track": "删除音轨",
+    "duplicate-track": "复制音轨",
+    channel: "频道",
+    categories: "类别",
+    instruments: "乐器",
+    "rhythm-track": "节奏轨",
+    "conductor-track": "指挥轨",
+    "track-name": "音轨名",
+    cancel: "取消",
+    ok: "确定",
+    triplet: "三连音",
+    dotted: "附点",
+    "confirm-new": "正在编辑曲目，您确定要新建一个吗？",
+    "confirm-open": "正在编辑曲目，您确定要打开另一个吗？",
+    "confirm-close": "正在编辑曲目，您确定要关闭吗？",
+    "auto-scroll": "自动滚动",
+    help: "帮助",
+    close: "关闭",
+    "keyboard-shortcut": "快捷键",
+    "play-pause": "播放/暂停",
+    rewind: "快退",
+    "fast-forward": "快进",
+    "forward-rewind": "快进/快退",
+    "next-previous-track": "下一音轨/上一音轨",
+    "solo-mute-ghost": "独奏/静音/幽灵音",
+    stop: "停止",
+    record: "录音",
+    "pencil-tool": "铅笔工具",
+    "selection-tool": "选择工具",
+    "copy-selection": "拷贝选择的内容",
+    "cut-selection": "剪切选择的内容",
+    "paste-selection": "粘贴选择的内容",
+    "select-all": "全选",
+    "delete-selection": "删除选择的内容",
+    "move-selection": "移动选择的内容",
+    undo: "撤消",
+    redo: "恢复",
+    cut: "剪切",
+    copy: "拷贝",
+    paste: "粘贴",
+    duplicate: "复制",
+    delete: "删除",
+    "select-note": "选择音符",
+    "scroll-horizontally": "左右滚动",
+    "scroll-vertically": "上下滚动",
+    settings: "设置",
+    "midi-settings": "MIDI设置",
+    inputs: "输入",
+    outputs: "输出",
+    "one-octave-up": "+1 个八度",
+    "one-octave-down": "-1 个八度",
+    arrange: "编排",
+    "arrangement-view": "编排视图",
+    "open-help": "打开帮助",
+    "event-list": "事件列表",
+    "open-chat": "打开聊天框",
+    property: "属性",
+    quantize: "量化",
+    "snap-to-grid": "对齐网格",
+    "export-audio": "导出音频",
+    export: "导出",
+    "exporting-audio": "正在导出音频...",
+    "file-type": "文件格式",
+    "export-error-too-short": "这首曲目长度太短了",
+    "set-loop-start": "设置循环开始位置",
+    "set-loop-end": "设置循环结束位置",
+    "switch-tab": "切换标签",
+    transpose: "移调",
+    yes: "是",
+    no: "否",
+    "please-sign-up": "注册来使用云存档",
+    "save-changes": "是否要保存对曲目的更改？",
+    "sign-in": "登录",
+    "success-sign-in": "登录成功",
+    files: "文件",
+    "created-date": "创建日期",
+    "modified-date": "修改日期",
+    "cloud-beta-warning":
+      "由于云功能处于开发阶段，请及时下载保存您创作的重要曲目。",
+    "cloud-description":
+      "通过登录，您可以将您的曲目保存到云端并随时随地恢复作曲。",
+    "import-midi": "导入 MIDI",
+    "export-midi": "导出 MIDI",
+    /* MIDI Instrument Categories */
+    Piano: "钢琴",
+    "Chromatic Percussion": "半音打击乐",
+    Organ: "风琴",
+    Guitar: "吉他",
+    Bass: "贝司",
+    Strings: "弦乐独奏",
+    Ensemble: "合唱合奏",
+    Brass: "铜管乐器",
+    Reed: "哨片乐器",
+    Pipe: "吹管乐器",
+    "Synth Lead": "合成主音",
+    "Synth Pad": "合成柔音",
+    "Synth Effects": "合成特效",
+    Ethnic: "民族乐器",
+    Percussive: "打击乐",
+    "Sound effects": "声音特效",
+    /* MIDI Instruments */
+    "Acoustic Grand Piano": "大钢琴",
+    "Bright Acoustic Piano": "立式钢琴",
+    "Electric Grand Piano": "电钢琴",
+    "Honky-tonk Piano": "酒吧钢琴",
+    "Electric Piano 1": "电钢琴1",
+    "Electric Piano 2": "电钢琴2",
+    Harpsichord: "拨弦古钢琴",
+    Clavinet: "击弦古钢琴",
+    Celesta: "钢片琴",
+    Glockenspiel: "钟琴",
+    "Music Box": "八音盒",
+    Vibraphone: "电颤琴",
+    Marimba: "马林巴",
+    Xylophone: "木琴",
+    "Tubular Bells": "管钟",
+    Dulcimer: "扬琴",
+    "Drawbar Organ": "击杆风琴",
+    "Percussive Organ": "打击型风琴",
+    "Rock Organ": "摇滚风琴",
+    "Church Organ": "管风琴",
+    "Reed Organ": "簧风琴",
+    Accordion: "手风琴",
+    Harmonica: "口琴",
+    "Tango Accordion": "探戈手风琴",
+    "Acoustic Guitar (nylon)": "尼龙弦吉他",
+    "Acoustic Guitar (steel)": "钢弦吉他",
+    "Electric Guitar (jazz)": "爵士乐电吉他",
+    "Electric Guitar (clean)": "清音电吉他",
+    "Electric Guitar (muted)": "弱音电吉他",
+    "Overdriven Guitar": "驱动音效吉他",
+    "Distortion Guitar": "失真音效吉他",
+    "Guitar Harmonics": "吉他泛音",
+    "Acoustic Bass": "原声贝司",
+    "Electric Bass (finger)": "指拨电贝司",
+    "Electric Bass (pick)": "拨片拨电贝司",
+    "Fretless Bass": "无品贝司",
+    "Slap Bass 1": "击弦贝司1",
+    "Slap Bass 2": "击弦贝司2",
+    "Synth Bass 1": "合成贝司1",
+    "Synth Bass 2": "合成贝司2",
+    Violin: "小提琴",
+    Viola: "中提琴",
+    Cello: "大提琴",
+    Contrabass: "低音提琴",
+    "Tremolo Strings": "弦乐震音",
+    "Pizzicato Strings": "弦乐拨奏",
+    "Orchestral Harp": "竖琴",
+    Timpani: "定音鼓",
+    "String Ensemble 1": "弦乐合奏1",
+    "String Ensemble 2": "弦乐合奏2",
+    "Synth Strings 1": "合成弦乐1",
+    "Synth Strings 2": "合成弦乐2",
+    "Choir Aahs": "合唱“啊”音",
+    "Voice Oohs": "人声“嘟”音",
+    "Synth Choir": "合成人声",
+    "Orchestra Hit": "乐队打击乐",
+    Trumpet: "小号",
+    Trombone: "长号",
+    Tuba: "大号",
+    "Muted Trumpet": "弱音小号",
+    "French Horn": "圆号",
+    "Brass Section": "铜管组",
+    "Synth Brass 1": "合成铜管1",
+    "Synth Brass 2": "合成铜管2",
+    "Soprano Sax": "高音萨克斯",
+    "Alto Sax": "中音萨克斯",
+    "Tenor Sax": "次中音萨克斯",
+    "Baritone Sax": "上低音萨克斯",
+    Oboe: "双簧管",
+    "English Horn": "英国管",
+    Bassoon: "大管",
+    Clarinet: "单簧管",
+    Piccolo: "短笛",
+    Flute: "长笛",
+    Recorder: "竖笛",
+    "Pan Flute": "排笛",
+    "Blown Bottle": "吹瓶口",
+    Shakuhachi: "尺八",
+    Whistle: "哨",
+    Ocarina: "奥卡雷那",
+    "Lead 1 (square)": "合成主音1（方波）",
+    "Lead 2 (sawtooth)": "合成主音2（锯齿波）",
+    "Lead 3 (calliope)": "合成主音3（汽笛风琴）",
+    "Lead 4 (chiff)": "合成主音4 （吹管）",
+    "Lead 5 (charang)": "合成主音5（吉他）",
+    "Lead 6 (voice)": "合成主音6（人声）",
+    "Lead 7 (fifths)": "合成主音7（五度）",
+    "Lead 8 (bass + lead)": "合成主音8（贝斯加主音）",
+    "Pad 1 (new age)": "合成柔音1（新时代）",
+    "Pad 2 (warm)": "合成柔音（暖音）",
+    "Pad 3 (polysynth)": "合成柔音3（复合成）",
+    "Pad 4 (choir)": "合成柔音4（合唱）",
+    "Pad 5 (bowed)": "合成柔音5（弓弦）",
+    "Pad 6 (metallic)": "合成柔音6（金属）",
+    "Pad 7 (halo)": "合成柔音7（光晕）",
+    "Pad 8 (sweep)": "合成柔音8（扫弦）",
+    "FX 1 (rain)": "合成特效1（雨）",
+    "FX 2 (soundtrack)": "合成特效2（音轨）",
+    "FX 3 (crystal)": "合成特效3（水晶）",
+    "FX 4 (atmosphere)": "合成特效4（大气）",
+    "FX 5 (brightness)": "合成特效5（轻柔）",
+    "FX 6 (goblins)": "合成特效6（小妖）",
+    "FX 7 (echoes)": "合成特效7（回声）",
+    "FX 8 (sci-fi)": "合成特效8（科幻）",
+    Sitar: "锡塔尔",
+    Banjo: "班卓",
+    Shamisen: "三味线",
+    Koto: "筝",
+    Kalimba: "卡林巴",
+    Bagpipe: "风笛",
+    Fiddle: "古提琴",
+    Shanai: "唢呐",
+    "Tinkle Bell": "铃铛",
+    Agogo: "拉丁打铃",
+    "Steel Drums": "钢鼓",
+    Woodblock: "木块",
+    "Taiko Drum": "太鼓",
+    "Melodic Tom": "嗵鼓",
+    "Synth Drum": "合成鼓",
+    "Reverse Cymbal": "铜钹",
+    "Guitar Fret Noise": "磨弦声",
+    "Breath Noise": "呼吸声",
+    Seashore: "海浪声",
+    "Bird Tweet": "鸟鸣声",
+    "Telephone Ring": "电话声",
+    Helicopter: "直升机声",
+    Applause: "鼓掌声",
+    Gunshot: "枪声",
+    velocity: "力度控制",
+    "pitch-bend": "弯音控制",
+    volume: "音量控制",
+    panpot: "声像控制",
+    expression: "情绪控制",
+    "hold-pedal": "延音踏板",
+    pan: "声像",
+    event: "事件",
+    duration: "时长",
+    tick: "起始",
+    value: "值",
+  },
+} as { [key: string]: { [key: string]: string } }

src/common/localize/localizedString.ts

@@ -0,0 +1,36 @@
+import localization from "./localization"
+
+export type Language = "en" | "ja" | "zh"
+
+export function localized(key: string): string | undefined
+export function localized(key: string, defaultValue: string): string
+export function localized(
+  key: string,
+  defaultValue: string,
+  language?: Language,
+): string
+export function localized(
+  key: string,
+  defaultValue?: string,
+  language?: Language,
+): string | undefined {
+  // ja-JP or ja -> ja
+
+  const locale = language ?? getBrowserLanguage()
+
+  if (
+    key !== null &&
+    localization[locale] !== undefined &&
+    localization[locale][key] !== undefined
+  ) {
+    return localization[locale][key]
+  }
+  return defaultValue
+}
+
+function getBrowserLanguage() {
+  // Use URL parameter ?lang=ja or navigator.language
+  const navigatorLanguage = navigator.language.split("-")[0]
+  const langParam = new URL(location.href).searchParams.get("lang")
+  return langParam ?? navigatorLanguage
+}

src/common/measure/Measure.ts

@@ -0,0 +1,29 @@
+export interface Measure {
+  startTick: number
+  measure: number
+  numerator: number
+  denominator: number
+}
+
+export const calculateMBT = (
+  measure: Measure,
+  tick: number,
+  ticksPerBeatBase: number,
+) => {
+  const ticksPerBeat = (ticksPerBeatBase * 4) / measure.denominator
+  const ticksPerMeasure = ticksPerBeat * measure.numerator
+
+  let aTick = tick - measure.startTick
+
+  const deltaMeasure = Math.floor(aTick / ticksPerMeasure)
+  aTick -= deltaMeasure * ticksPerMeasure
+
+  const beat = Math.floor(aTick / ticksPerBeat)
+  aTick -= beat * ticksPerBeat
+
+  return {
+    measure: measure.measure + deltaMeasure,
+    beat: beat,
+    tick: aTick,
+  }
+}

src/common/measure/MeasureList.ts

@@ -0,0 +1,59 @@
+import Track, { isTimeSignatureEvent } from "../track"
+import { Measure } from "./Measure"
+
+export function getMeasureAt(tick: number, measures: Measure[]): Measure {
+  let lastMeasure: Measure = {
+    startTick: 0,
+    measure: 0,
+    denominator: 4,
+    numerator: 4,
+  }
+  for (const m of measures) {
+    if (m.startTick > tick) {
+      break
+    }
+    lastMeasure = m
+  }
+  return lastMeasure
+}
+
+export function getMeasuresFromConductorTrack(
+  conductorTrack: Track,
+  timebase: number,
+): Measure[] {
+  const events = conductorTrack.events
+    .filter(isTimeSignatureEvent)
+    .slice()
+    .sort((a, b) => a.tick - b.tick)
+
+  if (events.length === 0) {
+    return [
+      {
+        startTick: 0,
+        measure: 0,
+        denominator: 4,
+        numerator: 4,
+      },
+    ]
+  } else {
+    let lastMeasure = 0
+    return events.map((e, i) => {
+      let measure = 0
+      if (i > 0) {
+        const lastEvent = events[i - 1]
+        const ticksPerBeat = (timebase * 4) / lastEvent.denominator
+        const measureDelta = Math.floor(
+          (e.tick - lastEvent.tick) / ticksPerBeat / lastEvent.numerator,
+        )
+        measure = lastMeasure + measureDelta
+        lastMeasure = measure
+      }
+      return {
+        startTick: e.tick,
+        measure,
+        numerator: e.numerator,
+        denominator: e.denominator,
+      }
+    })
+  }
+}

src/common/measure/mbt.ts

@@ -0,0 +1,35 @@
+import { calculateMBT, Measure } from "./Measure"
+import { getMeasureAt } from "./MeasureList"
+
+export const getMBTString = (
+  measures: Measure[],
+  tick: number,
+  ticksPerBeat: number,
+  formatter = defaultMBTFormatter,
+): string => formatter(getMBT(measures, tick, ticksPerBeat))
+
+interface Beat {
+  measure: number
+  beat: number
+  tick: number
+}
+
+const getMBT = (
+  measures: Measure[],
+  tick: number,
+  ticksPerBeat: number,
+): Beat => {
+  return calculateMBT(getMeasureAt(tick, measures), tick, ticksPerBeat)
+}
+
+const pad = (v: number, digit: number) => {
+  const str = v.toString(10)
+  return ("0".repeat(digit) + str).slice(-Math.max(digit, str.length))
+}
+
+function defaultMBTFormatter(mbt: Beat): string {
+  return `${pad(mbt.measure + 1, 4)}:${pad(mbt.beat + 1, 2)}:${pad(
+    mbt.tick,
+    3,
+  )}`
+}

src/common/midi/GM.ts

@@ -0,0 +1,21 @@
+export const getCategoryIndex = (programNumber: number) =>
+  Math.floor(programNumber / 8)
+
+export const categoryEmojis = [
+  "🎹",
+  "🔔",
+  "🎹",
+  "🎸",
+  "🎸",
+  "🎻",
+  "🧑‍🤝‍🧑",
+  "🎺",
+  "🎷",
+  "🍾",
+  "🕹️",
+  "🔮",
+  "⚡",
+  "🍛",
+  "🥁",
+  "🚁",
+]

src/common/midi/MidiEvent.ts

@@ -0,0 +1,273 @@
+import {
+  ControllerEvent,
+  EndOfTrackEvent,
+  Event,
+  NoteOffEvent,
+  NoteOnEvent,
+  PitchBendEvent,
+  PortPrefixEvent,
+  ProgramChangeEvent,
+  SequencerSpecificEvent,
+  SetTempoEvent,
+  TimeSignatureEvent,
+  TrackNameEvent,
+} from "midifile-ts"
+
+/* factory */
+
+export function midiEvent<T extends string>(
+  deltaTime: number,
+  type: T,
+): Event<T> {
+  return {
+    deltaTime,
+    type,
+  }
+}
+
+export function endOfTrackMidiEvent(deltaTime: number): EndOfTrackEvent {
+  return {
+    deltaTime,
+    type: "meta",
+    subtype: "endOfTrack",
+  }
+}
+
+export function portPrefixMidiEvent(
+  deltaTime: number,
+  port: number,
+): PortPrefixEvent {
+  return {
+    deltaTime,
+    type: "meta",
+    subtype: "portPrefix",
+    port,
+  }
+}
+
+export function trackNameMidiEvent(
+  deltaTime: number,
+  text: string,
+): TrackNameEvent {
+  return {
+    deltaTime,
+    type: "meta",
+    subtype: "trackName",
+    text,
+  }
+}
+
+// from bpm: SetTempoMidiEvent(t, 60000000 / bpm)
+export function setTempoMidiEvent(
+  deltaTime: number,
+  microsecondsPerBeat: number,
+): SetTempoEvent {
+  return {
+    deltaTime,
+    type: "meta",
+    subtype: "setTempo",
+    microsecondsPerBeat,
+  }
+}
+
+export function timeSignatureMidiEvent(
+  deltaTime: number,
+  numerator = 4,
+  denominator = 4,
+  metronome = 24,
+  thirtyseconds = 8,
+): TimeSignatureEvent {
+  return {
+    deltaTime,
+    type: "meta",
+    subtype: "timeSignature",
+    numerator,
+    denominator,
+    metronome,
+    thirtyseconds,
+  }
+}
+
+// channel events
+
+export function noteOnMidiEvent(
+  deltaTime: number,
+  channel: number,
+  noteNumber: number,
+  velocity: number,
+): NoteOnEvent {
+  return {
+    deltaTime,
+    type: "channel",
+    subtype: "noteOn",
+    channel,
+    noteNumber,
+    velocity,
+  }
+}
+
+export function noteOffMidiEvent(
+  deltaTime: number,
+  channel: number,
+  noteNumber: number,
+  velocity: number = 0,
+): NoteOffEvent {
+  return {
+    deltaTime,
+    type: "channel",
+    subtype: "noteOff",
+    channel,
+    noteNumber,
+    velocity,
+  }
+}
+
+export function pitchBendMidiEvent(
+  deltaTime: number,
+  channel: number,
+  value: number,
+): PitchBendEvent {
+  return {
+    deltaTime,
+    type: "channel",
+    subtype: "pitchBend",
+    channel,
+    value,
+  }
+}
+
+export function programChangeMidiEvent(
+  deltaTime: number,
+  channel: number,
+  value: number,
+): ProgramChangeEvent {
+  return {
+    deltaTime,
+    type: "channel",
+    subtype: "programChange",
+    channel,
+    value,
+  }
+}
+
+// controller events
+
+export function controllerMidiEvent(
+  deltaTime: number,
+  channel: number,
+  controllerType: number,
+  value: number,
+): ControllerEvent {
+  return {
+    deltaTime,
+    type: "channel",
+    subtype: "controller",
+    channel,
+    controllerType,
+    value,
+  }
+}
+
+export function modulationMidiEvent(
+  deltaTime: number,
+  channel: number,
+  value: number,
+) {
+  return controllerMidiEvent(deltaTime, channel, 0x01, value)
+}
+
+export function volumeMidiEvent(
+  deltaTime: number,
+  channel: number,
+  value: number,
+) {
+  return controllerMidiEvent(deltaTime, channel, 0x07, value)
+}
+
+export function panMidiEvent(
+  deltaTime: number,
+  channel: number,
+  value: number,
+) {
+  return controllerMidiEvent(deltaTime, channel, 0x0a, value)
+}
+
+export function expressionMidiEvent(
+  deltaTime: number,
+  channel: number,
+  value: number,
+) {
+  return controllerMidiEvent(deltaTime, channel, 0x0b, value)
+}
+
+export function resetAllMidiEvent(deltaTime: number, channel: number) {
+  return controllerMidiEvent(deltaTime, channel, 121, 0)
+}
+
+export function sequencerSpecificEvent(
+  deltaTime: number,
+  data: number[],
+): SequencerSpecificEvent {
+  return {
+    type: "meta",
+    subtype: "sequencerSpecific",
+    deltaTime,
+    data,
+  }
+}
+
+// Control Change
+
+export function controlChangeEvents(
+  deltaTime: number,
+  channel: number,
+  rpnMsb: number,
+  rpnLsb: number,
+  dataMsb?: number | undefined,
+  dataLsb?: number | undefined,
+): ControllerEvent[] {
+  const rpn = [
+    controllerMidiEvent(deltaTime, channel, 101, rpnMsb),
+    controllerMidiEvent(0, channel, 100, rpnLsb),
+  ]
+
+  const data: ControllerEvent[] = []
+  if (dataMsb !== undefined) {
+    data.push(controllerMidiEvent(0, channel, 6, dataMsb))
+  }
+  if (dataLsb !== undefined) {
+    data.push(controllerMidiEvent(0, channel, 38, dataLsb))
+  }
+
+  return [...rpn, ...data]
+}
+
+// value: 0 - 24 (半音 / Half sound)
+export function pitchbendSensitivityEvents(
+  deltaTime: number,
+  channel: number,
+  value = 2,
+) {
+  return controlChangeEvents(deltaTime, channel, 0, 0, value)
+}
+
+// value: -8192 - 8191
+export function masterFineTuningEvents(
+  deltaTime: number,
+  channel: number,
+  value = 0,
+) {
+  const s = value + 0x2000
+  const m = Math.floor(s / 0x80)
+  const l = s - m * 0x80
+  return controlChangeEvents(deltaTime, channel, 0, 1, m, l)
+}
+
+// value: -24 - 24
+export function masterCoarceTuningEvents(
+  deltaTime: number,
+  channel: number,
+  value = 0,
+) {
+  return controlChangeEvents(deltaTime, channel, 0, 2, value + 64)
+}

src/common/midi/midiConversion.test.ts

@@ -0,0 +1,133 @@
+import * as fs from "fs"
+import { AnyEvent } from "midifile-ts"
+import * as path from "path"
+import { serialize } from "serializr"
+import { emptySong } from "../song/SongFactory"
+import { NoteEvent } from "../track"
+import Track from "../track/Track"
+import {
+  noteOffMidiEvent,
+  noteOnMidiEvent,
+  setTempoMidiEvent,
+  timeSignatureMidiEvent,
+} from "./MidiEvent"
+import {
+  createConductorTrackIfNeeded,
+  songFromMidi,
+  songToMidi,
+  songToMidiEvents,
+} from "./midiConversion"
+
+// id for each event will not be serialized in midi file
+// we change ids sorted by order in events array
+const reassignIDs = (track: Track) => {
+  track.events.forEach((e, i) => {
+    track.events[i].id = i
+  })
+}
+
+describe("SongFile", () => {
+  it("write and read", () => {
+    const song = emptySong()
+    const note = song.tracks[1].addEvent<NoteEvent>({
+      type: "channel",
+      subtype: "note",
+      noteNumber: 57,
+      tick: 960,
+      velocity: 127,
+      duration: 240,
+    })
+    song.tracks.forEach(reassignIDs)
+    const bytes = songToMidi(song)
+    const song2 = songFromMidi(bytes)
+    song2.filepath = song.filepath // filepath will not be serialized
+    expect(serialize(song2)).toStrictEqual(serialize(song))
+  })
+  describe("songToMidiEvents", () => {
+    const expectEveryTrackHaveEndOfTrackEvent = (tracks: AnyEvent[][]) => {
+      for (const track of tracks) {
+        expect(
+          track.findIndex(
+            (e) => e.type === "meta" && e.subtype === "endOfTrack",
+          ),
+        ).toBe(track.length - 1)
+      }
+    }
+
+    const openFile = (fileName: string): AnyEvent[][] => {
+      const song = songFromMidi(
+        fs.readFileSync(path.join(__dirname, "../../../testdata/", fileName))
+          .buffer,
+      )
+      return songToMidiEvents(song)
+    }
+
+    describe("format 1", () => {
+      const rawTracks = openFile("tracks.mid")
+
+      it("every tracks have endOfTrack event", () => {
+        expect(rawTracks.length).toBe(18)
+        expectEveryTrackHaveEndOfTrackEvent(rawTracks)
+      })
+    })
+
+    describe("format 0", () => {
+      const rawTracks = openFile("format0.mid")
+
+      it("every tracks have endOfTrack event", () => {
+        expect(rawTracks.length).toBe(17)
+        expectEveryTrackHaveEndOfTrackEvent(rawTracks)
+      })
+    })
+  })
+
+  describe("signal events", () => {
+    it("should save the track color", () => {
+      const song = emptySong()
+      song.tracks[1].setColor({
+        red: 12,
+        green: 34,
+        blue: 56,
+        alpha: 78,
+      })
+      const bytes = songToMidi(song)
+      const song2 = songFromMidi(bytes)
+      expect(song2.tracks[1].color).toMatchObject({
+        red: 12,
+        green: 34,
+        blue: 56,
+        alpha: 78,
+      })
+    })
+  })
+  describe("createConductorTrackIfNeeded", () => {
+    it("should not create the conductor track", () => {
+      const tracks: AnyEvent[][] = [
+        [timeSignatureMidiEvent(0, 4, 4), setTempoMidiEvent(120, 500000)],
+        [noteOnMidiEvent(0, 1, 60, 100), noteOffMidiEvent(120, 1, 60, 0)],
+      ]
+      const result = createConductorTrackIfNeeded(tracks)
+      expect(result).toStrictEqual([
+        [timeSignatureMidiEvent(0, 4, 4), setTempoMidiEvent(120, 500000)],
+        [noteOnMidiEvent(0, 1, 60, 100), noteOffMidiEvent(120, 1, 60, 0)],
+      ])
+    })
+    it("should create the conductor track", () => {
+      const tracks: AnyEvent[][] = [
+        [
+          timeSignatureMidiEvent(0, 4, 4),
+          setTempoMidiEvent(120, 500000),
+          noteOnMidiEvent(120, 5, 60, 100),
+          noteOffMidiEvent(120, 5, 60, 0),
+        ],
+        [noteOnMidiEvent(0, 2, 60, 100), noteOffMidiEvent(120, 2, 60, 0)],
+      ]
+      const result = createConductorTrackIfNeeded(tracks)
+      expect(result).toStrictEqual([
+        [timeSignatureMidiEvent(0, 4, 4), setTempoMidiEvent(120, 500000)],
+        [noteOnMidiEvent(240, 5, 60, 100), noteOffMidiEvent(120, 5, 60, 0)],
+        [noteOnMidiEvent(0, 2, 60, 100), noteOffMidiEvent(120, 2, 60, 0)],
+      ])
+    })
+  })
+})

src/common/midi/midiConversion.ts

@@ -0,0 +1,170 @@
+import { partition } from "lodash"
+import groupBy from "lodash/groupBy"
+import {
+  AnyEvent,
+  EndOfTrackEvent,
+  MidiFile,
+  read,
+  StreamSource,
+  write as writeMidiFile,
+} from "midifile-ts"
+import { toJS } from "mobx"
+import { isNotNull } from "../helpers/array"
+import { downloadBlob } from "../helpers/Downloader"
+import { addDeltaTime, toRawEvents } from "../helpers/toRawEvents"
+import {
+  addTick,
+  tickedEventsToTrackEvents,
+  toTrackEvents,
+} from "../helpers/toTrackEvents"
+import Song from "../song"
+import Track, { AnyEventFeature } from "../track"
+
+const trackFromMidiEvents = (events: AnyEvent[]): Track => {
+  const track = new Track()
+
+  const channel = findChannel(events)
+  if (channel !== undefined) {
+    track.channel = channel
+  }
+  track.addEvents(toTrackEvents(events))
+
+  return track
+}
+
+const tracksFromFormat0Events = (events: AnyEvent[]): Track[] => {
+  const tickedEvents = addTick(events)
+  const eventsPerChannel = groupBy(tickedEvents, (e) => {
+    if ("channel" in e) {
+      return e.channel + 1
+    }
+    return 0 // conductor track
+  })
+  const tracks: Track[] = []
+  for (const channel of Object.keys(eventsPerChannel)) {
+    const events = eventsPerChannel[channel]
+    const ch = parseInt(channel)
+    while (tracks.length <= ch) {
+      const track = new Track()
+      track.channel = ch > 0 ? ch - 1 : undefined
+      tracks.push(track)
+    }
+    const track = tracks[ch]
+    const trackEvents = tickedEventsToTrackEvents(events)
+    track.addEvents(trackEvents)
+  }
+  return tracks
+}
+
+const findChannel = (events: AnyEvent[]) => {
+  const chEvent = events.find((e) => {
+    return e.type === "channel"
+  })
+  if (chEvent !== undefined && "channel" in chEvent) {
+    return chEvent.channel
+  }
+  return undefined
+}
+
+const isConductorTrack = (track: AnyEvent[]) => findChannel(track) === undefined
+
+const isConductorEvent = (e: AnyEventFeature) =>
+  "subtype" in e && (e.subtype === "timeSignature" || e.subtype === "setTempo")
+
+export const createConductorTrackIfNeeded = (
+  tracks: AnyEvent[][],
+): AnyEvent[][] => {
+  // Find conductor track
+  let [conductorTracks, normalTracks] = partition(tracks, isConductorTrack)
+
+  // Create a conductor track if there is no conductor track
+  if (conductorTracks.length === 0) {
+    conductorTracks.push([])
+  }
+
+  const [conductorTrack, ...restTracks] = [
+    ...conductorTracks,
+    ...normalTracks,
+  ].map(addTick)
+
+  const newTracks = restTracks.map((track) =>
+    track
+      .map((e) => {
+        // Collect all conductor events
+        if (isConductorEvent(e)) {
+          conductorTrack.push(e)
+          return null
+        }
+        return e
+      })
+      .filter(isNotNull),
+  )
+
+  return [conductorTrack, ...newTracks].map(addDeltaTime)
+}
+
+const getTracks = (midi: MidiFile): Track[] => {
+  switch (midi.header.formatType) {
+    case 0:
+      return tracksFromFormat0Events(midi.tracks[0])
+    case 1:
+      return createConductorTrackIfNeeded(midi.tracks).map(trackFromMidiEvents)
+    default:
+      throw new Error(`Unsupported midi format ${midi.header.formatType}`)
+  }
+}
+
+export function songFromMidi(data: StreamSource) {
+  const song = new Song()
+  const midi = read(data)
+
+  getTracks(midi).forEach((t) => song.addTrack(t))
+
+  if (midi.header.formatType === 1 && song.tracks.length > 0) {
+    // Use the first track name as the song title
+    const name = song.tracks[0].name
+    if (name !== undefined) {
+      song.name = name
+    }
+  }
+
+  song.timebase = midi.header.ticksPerBeat
+
+  return song
+}
+
+const setChannel =
+  (channel: number) =>
+  (e: AnyEvent): AnyEvent => {
+    if (e.type === "channel") {
+      return { ...e, channel }
+    }
+    return e
+  }
+
+export function songToMidiEvents(song: Song): AnyEvent[][] {
+  const tracks = toJS(song.tracks)
+  return tracks.map((t) => {
+    const endOfTrack: EndOfTrackEvent = {
+      deltaTime: 0,
+      type: "meta",
+      subtype: "endOfTrack",
+    }
+    const rawEvents = [...toRawEvents(t.events), endOfTrack]
+    if (t.channel !== undefined) {
+      return rawEvents.map(setChannel(t.channel))
+    }
+    return rawEvents
+  })
+}
+
+export function songToMidi(song: Song) {
+  const rawTracks = songToMidiEvents(song)
+  return writeMidiFile(rawTracks, song.timebase)
+}
+
+export function downloadSongAsMidi(song: Song) {
+  const bytes = songToMidi(song)
+  const blob = new Blob([bytes], { type: "application/octet-stream" })
+  downloadBlob(blob, song.filepath.length > 0 ? song.filepath : "no name.mid")
+}

src/common/player/EventScheduler.test.ts

@@ -0,0 +1,41 @@
+import { filterEventsWithRange } from "../helpers/filterEvents"
+import EventScheduler from "./EventScheduler"
+
+describe("EventScheduler", () => {
+  it("readNextEvents", () => {
+    const events = [{ tick: 0 }, { tick: 100 }, { tick: 110 }]
+    const s = new EventScheduler(
+      (start, end) => filterEventsWithRange(events, start, end),
+      () => [],
+      0,
+      480,
+      100,
+    )
+
+    // 先読み時間分のイベントが入っている
+    // There are events for read ahead time
+    {
+      const result = s.readNextEvents(120, 0)
+      expect(result.length).toBe(1)
+      expect(result[0].event).toBe(events[0])
+    }
+
+    // 前回から時間が経過してなければイベントはない
+    // There is no event if time has passed since last time
+    {
+      const result = s.readNextEvents(120, 0)
+      expect(result.length).toBe(0)
+    }
+
+    // 時間が経過すると2個目以降のイベントが返ってくる
+    // If time has passed, the second or later events will come back
+    {
+      const result = s.readNextEvents(120, 120)
+      expect(result.length).toBe(2)
+      expect(result[0].event).toBe(events[1])
+      expect(result[0].timestamp).toBe(120)
+      expect(result[1].event).toBe(events[2])
+      expect(result[1].timestamp).toBe(120)
+    }
+  })
+})

src/common/player/EventScheduler.ts

@@ -0,0 +1,139 @@
+import { DistributiveOmit } from "../types"
+
+export type SchedulableEvent = {
+  tick: number
+}
+
+export interface EventSchedulerLoop {
+  begin: number
+  end: number
+}
+
+type WithTimestamp<E> = {
+  event: E
+  timestamp: number
+}
+
+/**
+ * Player でイベントを随時読み取るためのクラス
+ * 精確にスケジューリングするために先読みを行う
+ * https://www.html5rocks.com/ja/tutorials/audio/scheduling/
+ */
+/**
+ * Player Classes for reading events at any time
+ * Perform prefetching for accurate scheduling
+ * https://www.html5rocks.com/ja/tutorials/audio/scheduling/
+ */
+export default class EventScheduler<E extends SchedulableEvent> {
+  // 先読み時間 (ms)
+  // Leading time (MS)
+  lookAheadTime = 100
+
+  // 1/4 拍子ごとの tick 数
+  // 1/4 TICK number for each beat
+  timebase = 480
+
+  loop: EventSchedulerLoop | null = null
+
+  private _currentTick = 0
+  private _scheduledTick = 0
+  private _prevTime: number | undefined = undefined
+  private _getEvents: (startTick: number, endTick: number) => E[]
+  private _createLoopEndEvents: () => Omit<E, "tick">[]
+
+  constructor(
+    getEvents: (startTick: number, endTick: number) => E[],
+    createLoopEndEvents: () => DistributiveOmit<E, "tick">[],
+    tick = 0,
+    timebase = 480,
+    lookAheadTime = 100,
+  ) {
+    this._getEvents = getEvents
+    this._createLoopEndEvents = createLoopEndEvents
+    this._currentTick = tick
+    this._scheduledTick = tick
+    this.timebase = timebase
+    this.lookAheadTime = lookAheadTime
+  }
+
+  get scheduledTick() {
+    return this._scheduledTick
+  }
+
+  millisecToTick(ms: number, bpm: number) {
+    return (((ms / 1000) * bpm) / 60) * this.timebase
+  }
+
+  tickToMillisec(tick: number, bpm: number) {
+    return (tick / (this.timebase / 60) / bpm) * 1000
+  }
+
+  seek(tick: number) {
+    this._currentTick = this._scheduledTick = Math.max(0, tick)
+  }
+
+  readNextEvents(bpm: number, timestamp: number): WithTimestamp<E>[] {
+    const withTimestamp =
+      (currentTick: number) =>
+      (e: E): WithTimestamp<E> => {
+        const waitTick = e.tick - currentTick
+        const delayedTime =
+          timestamp + Math.max(0, this.tickToMillisec(waitTick, bpm))
+        return { event: e, timestamp: delayedTime }
+      }
+
+    const getEventsInRange = (
+      startTick: number,
+      endTick: number,
+      currentTick: number,
+    ) => this._getEvents(startTick, endTick).map(withTimestamp(currentTick))
+
+    if (this._prevTime === undefined) {
+      this._prevTime = timestamp
+    }
+    const delta = timestamp - this._prevTime
+    const deltaTick = Math.max(0, this.millisecToTick(delta, bpm))
+    const nowTick = Math.floor(this._currentTick + deltaTick)
+
+    // 先読み時間
+    // Leading time
+    const lookAheadTick = Math.floor(
+      this.millisecToTick(this.lookAheadTime, bpm),
+    )
+
+    // 前回スケジュール済みの時点から、
+    // From the previous scheduled point,
+    // 先読み時間までを処理の対象とする
+    // Target of processing up to read time
+    const startTick = this._scheduledTick
+    const endTick = nowTick + lookAheadTick
+
+    this._prevTime = timestamp
+
+    if (
+      this.loop !== null &&
+      startTick < this.loop.end &&
+      endTick >= this.loop.end
+    ) {
+      const loop = this.loop
+      const offset = endTick - loop.end
+      const endTick2 = loop.begin + offset
+      const currentTick = loop.begin - (loop.end - nowTick)
+      this._currentTick = currentTick
+      this._scheduledTick = endTick2
+
+      return [
+        ...getEventsInRange(startTick, loop.end, nowTick),
+        ...this._createLoopEndEvents().map((e) =>
+          withTimestamp(currentTick)({ ...e, tick: loop.begin } as E),
+        ),
+        ...getEventsInRange(loop.begin, endTick2, currentTick),
+      ]
+    } else {
+      this._currentTick = nowTick
+      this._scheduledTick = endTick
+
+      return getEventsInRange(startTick, endTick, nowTick)
+    }
+  }
+}

src/common/player/Player.ts

@@ -0,0 +1,319 @@
+import range from "lodash/range"
+import throttle from "lodash/throttle"
+import { AnyEvent, MIDIControlEvents } from "midifile-ts"
+import { computed, makeObservable, observable } from "mobx"
+import { SendableEvent, SynthOutput } from "../../main/services/SynthOutput"
+import { SongStore } from "../../main/stores/SongStore"
+import { filterEventsWithRange } from "../helpers/filterEvents"
+import { Beat, createBeatsInRange } from "../helpers/mapBeats"
+import {
+  controllerMidiEvent,
+  noteOffMidiEvent,
+  noteOnMidiEvent,
+} from "../midi/MidiEvent"
+import { getStatusEvents } from "../track/selector"
+import { ITrackMute } from "../trackMute/ITrackMute"
+import { DistributiveOmit } from "../types"
+import EventScheduler from "./EventScheduler"
+import { convertTrackEvents, PlayerEvent } from "./PlayerEvent"
+
+export interface LoopSetting {
+  begin: number
+  end: number
+  enabled: boolean
+}
+
+const TIMER_INTERVAL = 50
+const LOOK_AHEAD_TIME = 50
+const METRONOME_TRACK_ID = 99999
+export const DEFAULT_TEMPO = 120
+
+export default class Player {
+  private _currentTempo = DEFAULT_TEMPO
+  private _scheduler: EventScheduler<PlayerEvent> | null = null
+  private _songStore: SongStore
+  private _output: SynthOutput
+  private _metronomeOutput: SynthOutput
+  private _trackMute: ITrackMute
+  private _interval: number | null = null
+  private _currentTick = 0
+  private _isPlaying = false
+
+  disableSeek: boolean = false
+  isMetronomeEnabled: boolean = false
+
+  loop: LoopSetting | null = null
+
+  constructor(
+    output: SynthOutput,
+    metronomeOutput: SynthOutput,
+    trackMute: ITrackMute,
+    songStore: SongStore,
+  ) {
+    makeObservable<Player, "_currentTick" | "_isPlaying">(this, {
+      _currentTick: observable,
+      _isPlaying: observable,
+      loop: observable,
+      isMetronomeEnabled: observable,
+      position: computed,
+      isPlaying: computed,
+    })
+
+    this._output = output
+    this._metronomeOutput = metronomeOutput
+    this._trackMute = trackMute
+    this._songStore = songStore
+  }
+
+  private get song() {
+    return this._songStore.song
+  }
+
+  private get timebase() {
+    return this.song.timebase
+  }
+
+  play() {
+    if (this.isPlaying) {
+      console.warn("called play() while playing. aborted.")
+      return
+    }
+    this._scheduler = new EventScheduler<PlayerEvent>(
+      (startTick, endTick) =>
+        filterEventsWithRange(this.song.allEvents, startTick, endTick).concat(
+          filterEventsWithRange(
+            createBeatsInRange(
+              this.song.measures,
+              this.song.timebase,
+              startTick,
+              endTick,
+            ).flatMap((b) => this.beatToEvents(b)),
+            startTick,
+            endTick,
+          ),
+        ),
+      () => this.allNotesOffEvents(),
+      this._currentTick,
+      this.timebase,
+      TIMER_INTERVAL + LOOK_AHEAD_TIME,
+    )
+    this._isPlaying = true
+    this._output.activate()
+    this._interval = window.setInterval(() => this._onTimer(), TIMER_INTERVAL)
+    this._output.activate()
+  }
+
+  set position(tick: number) {
+    if (!Number.isInteger(tick)) {
+      console.warn("Player.tick should be an integer", tick)
+    }
+    if (this.disableSeek) {
+      return
+    }
+    tick = Math.min(Math.max(Math.floor(tick), 0), this.song.endOfSong)
+    if (this._scheduler) {
+      this._scheduler.seek(tick)
+    }
+    this._currentTick = tick
+
+    if (this.isPlaying) {
+      this.allSoundsOff()
+    }
+
+    this.sendCurrentStateEvents()
+  }
+
+  get position() {
+    return this._currentTick
+  }
+
+  get isPlaying() {
+    return this._isPlaying
+  }
+
+  get numberOfChannels() {
+    return 0xf
+  }
+
+  allSoundsOffChannel(ch: number) {
+    this.sendEvent(
+      controllerMidiEvent(0, ch, MIDIControlEvents.ALL_SOUNDS_OFF, 0),
+    )
+  }
+
+  allSoundsOff() {
+    for (const ch of range(0, this.numberOfChannels)) {
+      this.allSoundsOffChannel(ch)
+    }
+  }
+
+  allSoundsOffExclude(channel: number) {
+    for (const ch of range(0, this.numberOfChannels)) {
+      if (ch !== channel) {
+        this.allSoundsOffChannel(ch)
+      }
+    }
+  }
+
+  private allNotesOffEvents(): DistributiveOmit<PlayerEvent, "tick">[] {
+    return range(0, this.numberOfChannels).map((ch) => ({
+      ...controllerMidiEvent(0, ch, MIDIControlEvents.ALL_NOTES_OFF, 0),
+      trackId: -1, // do not mute
+    }))
+  }
+
+  private resetControllers() {
+    for (const ch of range(0, this.numberOfChannels)) {
+      this.sendEvent(
+        controllerMidiEvent(0, ch, MIDIControlEvents.RESET_CONTROLLERS, 0x7f),
+      )
+    }
+  }
+
+  private beatToEvents(beat: Beat): PlayerEvent[] {
+    const velocity = beat.beat === 0 ? 100 : 70
+    const noteNumber = beat.beat === 0 ? 76 : 77
+    return [
+      {
+        ...noteOnMidiEvent(0, 9, noteNumber, velocity),
+        tick: beat.tick,
+        trackId: METRONOME_TRACK_ID,
+      },
+    ]
+  }
+
+  stop() {
+    this._scheduler = null
+    this.allSoundsOff()
+    this._isPlaying = false
+
+    if (this._interval !== null) {
+      clearInterval(this._interval)
+      this._interval = null
+    }
+  }
+
+  reset() {
+    this.resetControllers()
+    this.stop()
+    this._currentTick = 0
+  }
+
+  /*
+   to restore synthesizer state (e.g. pitch bend)
+   collect all previous state events
+   and send them to the synthesizer
+  */
+  sendCurrentStateEvents() {
+    this.song.tracks
+      .flatMap((t, i) => {
+        const statusEvents = getStatusEvents(t.events, this._currentTick)
+        statusEvents.forEach((e) => this.applyPlayerEvent(e))
+        return convertTrackEvents(statusEvents, t.channel, i)
+      })
+      .forEach((e) => this.sendEvent(e))
+  }
+
+  get currentTempo() {
+    return this._currentTempo
+  }
+
+  set currentTempo(value: number) {
+    this._currentTempo = value
+  }
+
+  startNote(
+    {
+      channel,
+      noteNumber,
+      velocity,
+    }: {
+      noteNumber: number
+      velocity: number
+      channel: number
+    },
+    delayTime = 0,
+  ) {
+    this._output.activate()
+    this.sendEvent(noteOnMidiEvent(0, channel, noteNumber, velocity), delayTime)
+  }
+
+  stopNote(
+    {
+      channel,
+      noteNumber,
+    }: {
+      noteNumber: number
+      channel: number
+    },
+    delayTime = 0,
+  ) {
+    this.sendEvent(noteOffMidiEvent(0, channel, noteNumber, 0), delayTime)
+  }
+
+  // delayTime: seconds, timestampNow: milliseconds
+  sendEvent(
+    event: SendableEvent,
+    delayTime: number = 0,
+    timestampNow: number = performance.now(),
+  ) {
+    this._output.sendEvent(event, delayTime, timestampNow)
+  }
+
+  private syncPosition = throttle(() => {
+    if (this._scheduler !== null) {
+      this._currentTick = this._scheduler.scheduledTick
+    }
+  }, 50)
+
+  private applyPlayerEvent(
+    e: DistributiveOmit<AnyEvent, "deltaTime" | "channel">,
+  ) {
+    if (e.type !== "channel" && "subtype" in e) {
+      switch (e.subtype) {
+        case "setTempo":
+          this._currentTempo = 60000000 / e.microsecondsPerBeat
+          break
+        default:
+          break
+      }
+    }
+  }
+
+  private _onTimer() {
+    if (this._scheduler === null) {
+      return
+    }
+
+    const timestamp = performance.now()
+
+    this._scheduler.loop =
+      this.loop !== null && this.loop.enabled ? this.loop : null
+    const events = this._scheduler.readNextEvents(this._currentTempo, timestamp)
+
+    events.forEach(({ event: e, timestamp: time }) => {
+      if (e.type === "channel") {
+        const delayTime = (time - timestamp) / 1000
+        if (e.trackId === METRONOME_TRACK_ID) {
+          if (this.isMetronomeEnabled) {
+            this._metronomeOutput.sendEvent(e, delayTime, timestamp)
+          }
+        } else if (this._trackMute.shouldPlayTrack(e.trackId)) {
+          // channel イベントを MIDI Output に送信
+          // Send Channel Event to MIDI OUTPUT
+          this.sendEvent(e, delayTime, timestamp)
+        }
+      } else {
+        // channel イベント以外を実行
+        // Run other than Channel Event
+        this.applyPlayerEvent(e)
+      }
+    })
+
+    if (this._scheduler.scheduledTick >= this.song.endOfSong) {
+      this.stop()
+    }
+
+    this.syncPosition()
+  }
+}

src/common/player/PlayerEvent.ts

@@ -0,0 +1,27 @@
+import { AnyChannelEvent, AnyEvent } from "midifile-ts"
+import { deassemble as deassembleNote } from "../helpers/noteAssembler"
+import Track, { TrackEvent } from "../track"
+import { DistributiveOmit } from "../types"
+
+export type PlayerEventOf<T> = DistributiveOmit<T, "deltaTime"> & {
+  tick: number
+  trackId: number
+}
+
+export type PlayerEvent = PlayerEventOf<AnyEvent>
+
+export const convertTrackEvents = (
+  events: TrackEvent[],
+  channel: number | undefined,
+  trackId: number,
+) =>
+  events
+    .filter((e) => !(e.isRecording === true))
+    .flatMap((e) => deassembleNote(e))
+    .map(
+      (e) =>
+        ({ ...e, channel: channel, trackId }) as PlayerEventOf<AnyChannelEvent>,
+    )
+
+export const collectAllEvents = (tracks: Track[]): PlayerEvent[] =>
+  tracks.flatMap((t, i) => convertTrackEvents(t.events, t.channel, i))

src/common/player/index.ts

@@ -0,0 +1,2 @@
+export * from "./Player"
+export { default } from "./Player"

src/common/quantizer/Quantizer.ts

@@ -0,0 +1,50 @@
+import { SongStore } from "../../main/stores/SongStore"
+import { getMeasureStart } from "../song/selector"
+
+export default class Quantizer {
+  private denominator: number
+  private songStore: SongStore
+  private isEnabled: boolean = true
+
+  constructor(songStore: SongStore, denominator: number, isEnabled: boolean) {
+    this.songStore = songStore
+
+    // N 分音符の N
+    // n-remnant note n
+    this.denominator = denominator
+
+    this.isEnabled = isEnabled
+  }
+
+  private get timebase() {
+    return this.songStore.song.timebase
+  }
+
+  private calc(tick: number, fn: (tick: number) => number) {
+    if (!this.isEnabled) {
+      return Math.round(tick)
+    }
+    const measureStart = getMeasureStart(this.songStore.song, tick)
+    const beats =
+      this.denominator === 1 ? measureStart?.timeSignature.numerator ?? 4 : 4
+    const u = (this.timebase * beats) / this.denominator
+    const offset = measureStart?.tick ?? 0
+    return fn((tick - offset) / u) * u + offset
+  }
+
+  round(tick: number) {
+    return this.calc(tick, Math.round)
+  }
+
+  ceil(tick: number) {
+    return this.calc(tick, Math.ceil)
+  }
+
+  floor(tick: number) {
+    return this.calc(tick, Math.floor)
+  }
+
+  get unit() {
+    return (this.timebase * 4) / this.denominator
+  }
+}

src/common/quantizer/index.ts

@@ -0,0 +1 @@
+export { default } from "./Quantizer"

src/common/selection/ArrangeSelection.ts

@@ -0,0 +1,72 @@
+import Quantizer from "../quantizer"
+import { ArrangePoint } from "../transform/ArrangePoint"
+
+export interface ArrangeSelection {
+  fromTick: number
+  fromTrackIndex: number
+  toTick: number
+  toTrackIndex: number
+}
+
+export function arrangeSelectionFromPoints(
+  start: ArrangePoint,
+  end: ArrangePoint,
+  quantizer: Quantizer,
+  maxTrackIndex: number,
+): ArrangeSelection {
+  const startSelection = selectionForPoint(start, quantizer)
+  const endSelection = selectionForPoint(end, quantizer)
+  return clampSelection(
+    unionSelections(startSelection, endSelection),
+    maxTrackIndex,
+  )
+}
+
+export const selectionForPoint = (
+  point: ArrangePoint,
+  quantizer: Quantizer,
+): ArrangeSelection => {
+  const fromTick = quantizer.floor(point.tick)
+  const toTick = quantizer.ceil(point.tick)
+  return {
+    fromTick,
+    toTick,
+    fromTrackIndex: Math.floor(point.trackIndex),
+    toTrackIndex: Math.floor(point.trackIndex) + 1,
+  }
+}
+
+export const unionSelections = (
+  a: ArrangeSelection,
+  b: ArrangeSelection,
+): ArrangeSelection => {
+  return {
+    fromTick: Math.min(a.fromTick, b.fromTick),
+    toTick: Math.max(a.toTick, b.toTick),
+    fromTrackIndex: Math.min(a.fromTrackIndex, b.fromTrackIndex),
+    toTrackIndex: Math.max(a.toTrackIndex, b.toTrackIndex),
+  }
+}
+
+export const clampSelection = (
+  selection: ArrangeSelection,
+  maxTrackIndex: number,
+): ArrangeSelection => ({
+  fromTick: Math.max(0, selection.fromTick),
+  toTick: Math.max(0, selection.toTick),
+  fromTrackIndex: Math.min(
+    maxTrackIndex,
+    Math.max(0, selection.fromTrackIndex),
+  ),
+  toTrackIndex: Math.min(maxTrackIndex, Math.max(0, selection.toTrackIndex)),
+})
+
+export const movedSelection = (
+  selection: ArrangeSelection,
+  delta: ArrangePoint,
+): ArrangeSelection => ({
+  fromTick: selection.fromTick + delta.tick,
+  toTick: selection.toTick + delta.tick,
+  fromTrackIndex: selection.fromTrackIndex + delta.trackIndex,
+  toTrackIndex: selection.toTrackIndex + delta.trackIndex,
+})

src/common/selection/ControlSelection.ts

@@ -0,0 +1,4 @@
+export interface ControlSelection {
+  fromTick: number
+  toTick: number
+}

src/common/selection/Selection.ts

@@ -0,0 +1,71 @@
+import cloneDeep from "lodash/cloneDeep"
+import { MaxNoteNumber } from "../../main/Constants"
+import { IRect } from "../geometry"
+import { NoteCoordTransform } from "../transform"
+import { clampNotePoint, NotePoint } from "../transform/NotePoint"
+
+export interface Selection {
+  from: NotePoint
+  to: NotePoint
+}
+
+export const getSelectionBounds = (
+  selection: Selection,
+  transform: NoteCoordTransform,
+): IRect => {
+  const left = transform.getX(selection.from.tick)
+  const right = transform.getX(selection.to.tick)
+  const top = transform.getY(selection.from.noteNumber)
+  const bottom = transform.getY(selection.to.noteNumber)
+  return {
+    x: left,
+    y: top,
+    width: right - left,
+    height: bottom - top,
+  }
+}
+
+export const movedSelection = (
+  selection: Selection,
+  dt: number,
+  dn: number,
+): Selection => {
+  const s = cloneDeep(selection)
+
+  s.from.tick += dt
+  s.to.tick += dt
+  s.from.noteNumber += dn
+  s.to.noteNumber += dn
+
+  return s
+}
+
+// to が右下になるようにする
+// to Make the lower right
+
+export const regularizedSelection = (
+  fromTick: number,
+  fromNoteNumber: number,
+  toTick: number,
+  toNoteNumber: number,
+): Selection => ({
+  from: {
+    tick: Math.max(0, Math.min(fromTick, toTick)),
+    noteNumber: Math.min(
+      MaxNoteNumber,
+      Math.max(0, Math.max(fromNoteNumber, toNoteNumber)),
+    ),
+  },
+  to: {
+    tick: Math.max(fromTick, toTick),
+    noteNumber: Math.min(
+      MaxNoteNumber,
+      Math.max(0, Math.min(fromNoteNumber, toNoteNumber)),
+    ),
+  },
+})
+
+export const clampSelection = (selection: Selection): Selection => ({
+  from: clampNotePoint(selection.from),
+  to: clampNotePoint(selection.to),
+})

src/common/selection/TempoSelection.ts

@@ -0,0 +1,21 @@
+import { IRect } from "../geometry"
+import { TempoCoordTransform } from "../transform"
+
+export interface TempoSelection {
+  fromTick: number
+  toTick: number
+}
+
+export const getTempoSelectionBounds = (
+  selection: TempoSelection,
+  transform: TempoCoordTransform,
+): IRect => {
+  const left = transform.getX(selection.fromTick)
+  const right = transform.getX(selection.toTick)
+  return {
+    x: left,
+    y: 0,
+    width: right - left,
+    height: transform.height,
+  }
+}

src/common/song/Song.test.ts

@@ -0,0 +1,40 @@
+import * as fs from "fs"
+import * as path from "path"
+import { deserialize, serialize } from "serializr"
+import { songFromMidi } from "../midi/midiConversion"
+import Song from "./Song"
+import { emptySong } from "./SongFactory"
+
+describe("Song", () => {
+  const song = songFromMidi(
+    fs.readFileSync(path.join(__dirname, "../../../testdata/tracks.mid"))
+      .buffer,
+  )
+
+  it("fromMidi", () => {
+    expect(song).not.toBeNull()
+    const { tracks } = song
+    expect(tracks.length).toBe(18)
+
+    expect(tracks[0].isConductorTrack).toBeTruthy()
+    expect(!tracks[1].isConductorTrack).toBeTruthy()
+    expect(tracks[1].channel).toBe(0)
+    expect(tracks[2].channel).toBe(0)
+    expect(tracks[3].channel).toBe(1)
+    expect(tracks[17].channel).toBe(15)
+
+    expect(tracks[0].getTempo(240)).toBe(128)
+    expect(tracks[2].getVolume(193)).toBe(100)
+    expect(tracks[2].getPan(192)).toBe(1)
+    expect(tracks[2].programNumber).toBe(29)
+  })
+
+  it("should be serializable", () => {
+    const song = emptySong()
+    song.filepath = "abc"
+    const x = serialize(song)
+    const s = deserialize(Song, x)
+    expect(s.filepath).toBe("abc")
+    expect(s.tracks.length).toBe(song.tracks.length)
+  })
+})

src/common/song/Song.ts

@@ -0,0 +1,107 @@
+import { DocumentReference } from "firebase/firestore"
+import pullAt from "lodash/pullAt"
+import {
+  action,
+  computed,
+  makeObservable,
+  observable,
+  reaction,
+  transaction,
+} from "mobx"
+import { createModelSchema, list, object, primitive } from "serializr"
+import { FirestoreSong, FirestoreSongData } from "../../firebase/song"
+import { TIME_BASE } from "../../main/Constants"
+import { isNotUndefined } from "../helpers/array"
+import { Measure } from "../measure/Measure"
+import { getMeasuresFromConductorTrack } from "../measure/MeasureList"
+import { collectAllEvents, PlayerEvent } from "../player/PlayerEvent"
+import Track from "../track"
+
+const END_MARGIN = 480 * 30
+
+export default class Song {
+  tracks: Track[] = []
+  filepath: string = ""
+  timebase: number = TIME_BASE
+  name: string = ""
+  fileHandle: FileSystemFileHandle | null = null
+  firestoreReference: DocumentReference<FirestoreSong> | null = null
+  firestoreDataReference: DocumentReference<FirestoreSongData> | null = null
+  isSaved = true
+
+  constructor() {
+    makeObservable(this, {
+      addTrack: action,
+      removeTrack: action,
+      insertTrack: action,
+      conductorTrack: computed,
+      measures: computed,
+      endOfSong: computed,
+      allEvents: computed({ keepAlive: true }),
+      tracks: observable.shallow,
+      filepath: observable,
+      timebase: observable,
+      name: observable,
+      isSaved: observable,
+    })
+
+    reaction(
+      () => [
+        this.tracks.map((t) => ({ channel: t.channel, events: t.events })),
+        this.name,
+      ],
+      () => (this.isSaved = false),
+    )
+  }
+
+  insertTrack(t: Track, index: number) {
+    // 最初のトラックは Conductor Track なので channel を設定しない
+    if (t.channel === undefined && this.tracks.length > 0) {
+      t.channel = t.channel || this.tracks.length - 1
+    }
+    this.tracks.splice(index, 0, t)
+  }
+
+  addTrack(t: Track) {
+    this.insertTrack(t, this.tracks.length)
+  }
+
+  removeTrack(id: number) {
+    transaction(() => {
+      pullAt(this.tracks, id)
+    })
+  }
+
+  get conductorTrack(): Track | undefined {
+    return this.tracks.find((t) => t.isConductorTrack)
+  }
+
+  getTrack(id: number): Track | undefined {
+    return this.tracks[id]
+  }
+
+  get measures(): Measure[] {
+    const conductorTrack = this.conductorTrack
+    if (conductorTrack === undefined) {
+      return []
+    }
+    return getMeasuresFromConductorTrack(conductorTrack, this.timebase)
+  }
+
+  get endOfSong(): number {
+    const eos = Math.max(
+      ...this.tracks.map((t) => t.endOfTrack).filter(isNotUndefined),
+    )
+    return (eos ?? 0) + END_MARGIN
+  }
+
+  get allEvents(): PlayerEvent[] {
+    return collectAllEvents(this.tracks)
+  }
+}
+
+createModelSchema(Song, {
+  tracks: list(object(Track)),
+  filepath: primitive(),
+  timebase: primitive(),
+})

src/common/song/SongFactory.ts

@@ -0,0 +1,11 @@
+import { conductorTrack, emptyTrack } from "../track"
+import Song from "./Song"
+
+export function emptySong() {
+  const song = new Song()
+  song.addTrack(conductorTrack())
+  song.addTrack(emptyTrack(0))
+  // Empty songs do not need to be saved.
+  song.isSaved = true
+  return song
+}

src/common/song/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./Song"
+export * from "./SongFactory"