[project-s] ピアノロールにノートを表示/追加/削除できるようにする

src/helpers/singHelper.ts

@@ -0,0 +1,63 @@
+export function getPitchFromMidi(midi: number): string {
+  const mapPitches: Array<string> = [
+    "C",
+    "C#",
+    "D",
+    "D#",
+    "E",
+    "F",
+    "F#",
+    "G",
+    "G#",
+    "A",
+    "A#",
+    "B",
+  ];
+  const pitchPos = midi % 12;
+  return mapPitches[pitchPos];
+}
+
+export function getDoremiFromMidi(midi: number): string {
+  const mapPitches: Array<string> = [
+    "ド",
+    "ド",
+    "レ",
+    "レ",
+    "ミ",
+    "ファ",
+    "ファ",
+    "ソ",
+    "ソ",
+    "ラ",
+    "ラ",
+    "シ",
+  ];
+  const pitchPos = midi % 12;
+  return mapPitches[pitchPos];
+}
+
+export function getOctaveFromMidi(midi: number): number {
+  return Math.floor(midi / 12) - 1;
+}
+
+export function getKeyColorFromMidi(midi: number): string {
+  const mapWhiteKeys: Array<string> = ["C", "D", "E", "F", "G", "A", "B"];
+  const pitch = getPitchFromMidi(midi);
+  return mapWhiteKeys.includes(pitch) ? "white" : "black";
+}
+
+export const midiKeys = [...Array(128)]
+  .map((_, midi) => {
+    const pitch = getPitchFromMidi(midi);
+    const octave = getOctaveFromMidi(midi);
+    const name = `${pitch}${octave}`;
+    const color = getKeyColorFromMidi(midi);
+    return {
+      midi,
+      pitch,
+      octave,
+      name,
+      color,
+    };
+  })
+  .reverse();

src/store/singing.ts

@@ -9,6 +9,7 @@ import {
 import { createPartialStore } from "./vuex";
 import { createUILockAction } from "./ui";
 import { Midi } from "@tonejs/midi";
+import { getDoremiFromMidi } from "@/helpers/singHelper";
 
 export const singingStoreState: SingingStoreState = {
   engineId: undefined,
@@ -17,6 +18,11 @@ export const singingStoreState: SingingStoreState = {
   renderPhrases: [],
   // NOTE: UIの状態は試行のためsinging.tsに局所化する+Hydrateが必要
   isShowSinger: true,
+  sequencerZoomX: 0.5,
+  sequencerZoomY: 0.5,
+  sequencerScrollY: 60, // Y軸 midi number
+  sequencerScrollX: 0, // X軸 midi duration(仮)
+  sequencerSnapSize: 120, // スナップサイズ 試行用で1/16(ppq=480)のmidi durationで固定
 };
 
 export const singingStore = createPartialStore<SingingStoreTypes>({
@@ -107,6 +113,7 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
       state.score = score;
     },
     async action({ commit }, { score }: { score: Score }) {
+      console.log(score);
       commit("SET_SCORE", { score });
     },
   },
@@ -251,6 +258,104 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
     },
   },
 
+  ADD_NOTE: {
+    mutation(state, { note }: { note: Note }) {
+      if (state.score) {
+        const notes = state.score.notes.concat(note).sort((a, b) => {
+          return a.position - b.position;
+        });
+        state.score.notes = notes;
+      }
+    },
+    // ノートを追加する
+    // NOTE: 重複削除など別途追加
+    async action({ state, commit }, { note }: { note: Note }) {
+      if (state.score === undefined) {
+        throw new Error("Score is not initialized.");
+      }
+      commit("ADD_NOTE", { note });
+    },
+  },
+
+  CHANGE_NOTE: {
+    mutation(state, { index, note }: { index: number; note: Note }) {
+      if (state.score) {
+        const notes = [...state.score.notes];
+        notes.splice(index, 1, note);
+        state.score.notes = notes;
+      }
+    },
+    async action(
+      { state, commit },
+      { index, note }: { index: number; note: Note }
+    ) {
+      if (state.score === undefined) {
+        throw new Error("Score is not initialized.");
+      }
+      commit("CHANGE_NOTE", { index, note });
+    },
+  },
+
+  REMOVE_NOTE: {
+    mutation(state, { index }: { index: number }) {
+      if (state.score) {
+        const notes = [...state.score.notes];
+        notes.splice(index, 1);
+        state.score.notes = notes;
+      }
+    },
+    async action({ state, commit }, { index }: { index: number }) {
+      if (state.score === undefined) {
+        throw new Error("Score is not initialized.");
+      }
+      commit("REMOVE_NOTE", { index });
+    },
+  },
+
+  SET_ZOOM_X: {
+    mutation(state, { zoomX }: { zoomX: number }) {
+      state.sequencerZoomX = zoomX;
+    },
+    async action({ commit }, { zoomX }) {
+      commit("SET_ZOOM_X", {
+        zoomX,
+      });
+    },
+  },
+
+  SET_ZOOM_Y: {
+    mutation(state, { zoomY }: { zoomY: number }) {
+      state.sequencerZoomY = zoomY;
+    },
+    async action({ commit }, { zoomY }) {
+      commit("SET_ZOOM_Y", {
+        zoomY,
+      });
+    },
+  },
+
+  SET_SCROLL_X: {
+    mutation(state, { scrollX }: { scrollX: number }) {
+      state.sequencerScrollX = scrollX;
+    },
+    async action({ commit }, { scrollX }) {
+      commit("SET_SCROLL_X", {
+        scrollX,
+      });
+    },
+  },
+
+  SET_SCROLL_Y: {
+    mutation(state, { scrollY }: { scrollY: number }) {
+      state.sequencerScrollY = scrollY;
+    },
+    async action({ commit }, { scrollY }) {
+      commit("SET_SCROLL_Y", {
+        scrollY,
+      });
+    },
+  },
+
   IMPORT_MIDI_FILE: {
     action: createUILockAction(
       async ({ dispatch }, { filePath }: { filePath?: string }) => {
@@ -297,7 +402,7 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
               note.durationTicks
             ),
             midi: note.midi,
-            lyric: "",
+            lyric: getDoremiFromMidi(note.midi),
           }))
           .sort((a, b) => a.position - b.position)
           .forEach((note) => {

src/store/type.ts

@@ -701,6 +701,11 @@ export type SingingStoreState = {
   // NOTE: UIの状態などは分割・統合した方がよさそうだが、ボイス側と混在させないためいったん局所化する
   isShowSinger: boolean;
   // NOTE: オーディオ再生はボイスと同様もしくは拡張して使う？
+  sequencerZoomX: number;
+  sequencerZoomY: number;
+  sequencerScrollX: number;
+  sequencerScrollY: number;
+  sequencerSnapSize: number;
 };
 
 export type SingingStoreTypes = {
@@ -743,6 +748,41 @@ export type SingingStoreTypes = {
     action(payload: { position: number }): void;
   };
 
+  ADD_NOTE: {
+    mutation: { note: Note };
+    action(payload: { note: Note }): void;
+  };
+
+  CHANGE_NOTE: {
+    mutation: { index: number; note: Note };
+    action(payload: { index: number; note: Note }): void;
+  };
+
+  REMOVE_NOTE: {
+    mutation: { index: number };
+    action(payload: { index: number }): void;
+  };
+
+  SET_ZOOM_X: {
+    mutation: { zoomX: number };
+    action(payload: { zoomX: number }): void;
+  };
+
+  SET_ZOOM_Y: {
+    mutation: { zoomY: number };
+    action(payload: { zoomY: number }): void;
+  };
+
+  SET_SCROLL_X: {
+    mutation: { scrollX: number };
+    action(payload: { scrollX: number }): void;
+  };
+
+  SET_SCROLL_Y: {
+    mutation: { scrollY: number };
+    action(payload: { scrollY: number }): void;
+  };
+
   IMPORT_MIDI_FILE: {
     action(payload: { filePath?: string }): void;
   };

src/views/SingerHome.vue

@@ -48,22 +48,13 @@ export default defineComponent({
 
     // 歌声合成エディターの初期化
     onMounted(async () => {
+      if (store.state.score === undefined) {
+        const emptyScore = await store.dispatch("GET_EMPTY_SCORE");
+        await store.dispatch("SET_SCORE", { score: emptyScore });
+      }
       await store.dispatch("SET_SINGER", {});
-
-      const score = await store.dispatch("GET_EMPTY_SCORE");
-
-      // 実装時の確認用です TODO: 必要なくなったら削除
-      score.notes = [
-        { position: 0, duration: 480, midi: 60, lyric: "ら" },
-        { position: 480, duration: 480, midi: 62, lyric: "ら" },
-        { position: 960, duration: 480, midi: 64, lyric: "ら" },
-        { position: 1440, duration: 480, midi: 65, lyric: "ら" },
-        { position: 1920, duration: 1920, midi: 67, lyric: "ら" },
-      ];
-
-      await store.dispatch("SET_SCORE", { score });
+      return {};
     });
-    return null;
   },
 });
 </script>

tests/unit/store/Vuex.spec.ts

@@ -119,6 +119,11 @@ describe("store/vuex.js test", () => {
           tweakableSliderByScroll: false,
         },
         isShowSinger: true,
+        sequencerZoomX: 1,
+        sequencerZoomY: 1,
+        sequencerScrollX: 0,
+        sequencerScrollY: 60,
+        sequencerSnapSize: 120,
       },
       getters: {
         ...uiStore.getters,