allow playing mid with external player

frontend/src/_locales/ja/main.json

@@ -316,5 +316,6 @@
   "Current Instrument": "現在の楽器",
   "Please convert model to GGML format first": "モデルをGGML形式に変換してください",
   "Convert To GGML Format": "GGML形式に変換",
-  "CPU (rwkv.cpp, Faster)": "CPU (rwkv.cpp, 高速)"
+  "CPU (rwkv.cpp, Faster)": "CPU (rwkv.cpp, 高速)",
+  "Play With External Player": "外部プレーヤーで再生"
 }

frontend/src/_locales/zh-hans/main.json

@@ -316,5 +316,6 @@
   "Current Instrument": "当前乐器",
   "Please convert model to GGML format first": "请先将模型转换为GGML格式",
   "Convert To GGML Format": "转换为GGML格式",
-  "CPU (rwkv.cpp, Faster)": "CPU (rwkv.cpp, 更快)"
+  "CPU (rwkv.cpp, Faster)": "CPU (rwkv.cpp, 更快)",
+  "Play With External Player": "使用外部播放器播放"
 }

frontend/src/pages/Composition.tsx

@@ -21,7 +21,9 @@ import {
   FileExists,
   OpenFileFolder,
   OpenMidiPort,
-  OpenSaveFileDialogBytes
+  OpenSaveFileDialogBytes,
+  SaveFile,
+  StartFile
 } from '../../wailsjs/go/backend_golang/App';
 import { getServerRoot, getSoundFont, toastWithButton } from '../utils';
 import { CompositionParams } from '../types/composition';
@@ -98,6 +100,31 @@ const CompositionPanel: FC = observer(() => {
     }
   }, []);
 
+  const externalPlayListener = () => {
+    const params = commonStore.compositionParams;
+    const saveAndPlay = async (midi: ArrayBuffer, path: string) => {
+      await SaveFile(path, Array.from(new Uint8Array(midi)));
+      StartFile(path);
+    };
+    if (params.externalPlay) {
+      if (params.midi) {
+        setTimeout(() => {
+          playerRef.current?.stop();
+        });
+        saveAndPlay(params.midi, './midi/last.mid').catch((e: string) => {
+          if (e.includes('being used'))
+            saveAndPlay(params.midi!, './midi/last-2.mid');
+        });
+      }
+    }
+  };
+  useEffect(() => {
+    playerRef.current?.addEventListener('start', externalPlayListener);
+    return () => {
+      playerRef.current?.removeEventListener('start', externalPlayListener);
+    };
+  }, [params.externalPlay]);
+
   useEffect(() => {
     if (!(commonStore.activeMidiDeviceIndex in commonStore.midiPorts)) {
       commonStore.setActiveMidiDeviceIndex(-1);
@@ -123,9 +150,12 @@ const CompositionPanel: FC = observer(() => {
         });
         updateNs(ns);
         if (autoPlay) {
-          setTimeout(() => {
-            playerRef.current?.start();
-          });
+          if (commonStore.compositionParams.externalPlay)
+            externalPlayListener();
+          else
+            setTimeout(() => {
+              playerRef.current?.start();
+            });
         }
       });
     });
@@ -268,6 +298,16 @@ const CompositionPanel: FC = observer(() => {
                   setSoundFont();
                 }} />
             }
+            {
+              commonStore.platform === 'windows' &&
+              <Checkbox className="select-none"
+                size="large" label={t('Play With External Player')} checked={params.externalPlay}
+                onChange={async (_, data) => {
+                  setParams({
+                    externalPlay: data.checked as boolean
+                  });
+                }} />
+            }
             <Checkbox className="select-none"
               size="large" label={t('Auto Play At The End')} checked={params.autoPlay} onChange={(_, data) => {
               setParams({

frontend/src/stores/commonStore.ts

@@ -94,6 +94,7 @@ class CommonStore {
     topP: 0.8,
     autoPlay: true,
     useLocalSoundFont: false,
+    externalPlay: false,
     midi: null,
     ns: null
   };

frontend/src/types/composition.ts

@@ -9,6 +9,7 @@ export type CompositionParams = {
   topP: number,
   autoPlay: boolean,
   useLocalSoundFont: boolean,
+  externalPlay: boolean,
   midi: ArrayBuffer | null,
   ns: NoteSequence | null
 }