feat: download audio

src/main.ts

@@ -4,6 +4,7 @@ import { waitForDocumentLoaded, saveAs } from './utils'
 import { downloadPDF } from './pdf'
 import { downloadMscz } from './mscz'
 import { getFileUrl } from './file'
+import { WebMscore, loadSoundFont } from './mscore'
 import { getDownloadBtn, BtnList, BtnAction } from './btn'
 import * as recaptcha from './recaptcha'
 import scoreinfo from './scoreinfo'
@@ -67,7 +68,7 @@ const main = (): void => {
       interface IndividualDownload {
         name: string;
         fileExt: string;
-        action (score: import('webmscore').default): Promise<Uint8Array>;
+        action (score: WebMscore): Promise<Uint8Array>;
       }
 
       const downloads: IndividualDownload[] = [
@@ -76,11 +77,6 @@ const main = (): void => {
           fileExt: 'pdf',
           action: (score) => score.savePdf(),
         },
-        {
-          name: 'Download MIDI',
-          fileExt: 'mid',
-          action: (score) => score.saveMidi(true, true),
-        },
         {
           name: 'Download Part MSCZ',
           fileExt: 'mscz',
@@ -91,6 +87,21 @@ const main = (): void => {
           fileExt: 'mxl',
           action: (score) => score.saveMxl(),
         },
+        {
+          name: 'Download MIDI',
+          fileExt: 'mid',
+          action: (score) => score.saveMidi(true, true),
+        },
+        {
+          name: 'Download FLAC Audio',
+          fileExt: 'flac',
+          action: (score) => loadSoundFont(score).then(() => score.saveAudio('flac')),
+        },
+        {
+          name: 'Download OGG Audio',
+          fileExt: 'ogg',
+          action: (score) => loadSoundFont(score).then(() => score.saveAudio('ogg')),
+        },
       ]
 
       // part selection

src/mscore.ts

@@ -8,6 +8,9 @@ const WEBMSCORE_URL = 'https://cdn.jsdelivr.net/npm/webmscore@0.10/webmscore.js'
 // JP characters are included in the CN font
 const FONT_URLS = ['CN', 'KR'].map(l => `https://cdn.jsdelivr.net/npm/@librescore/fonts/SourceHanSans${l}-Regular.woff2`)
 
+const SF3_URL = 'https://cdn.jsdelivr.net/npm/@librescore/sf3/FluidR3Mono_GM.sf3'
+const SOUND_FONT_LOADED = Symbol('SoundFont loaded')
+
 export type WebMscore = import('webmscore').default
 
 const initMscore = async (w: Window) => {
@@ -31,6 +34,18 @@ const initFonts = () => {
   }
 }
 
+export const loadSoundFont = (score: WebMscore): Promise<void> => {
+  if (!score[SOUND_FONT_LOADED]) {
+    const loadPromise = (async () => {
+      await score.setSoundFont(
+        await fetchData(SF3_URL),
+      )
+    })()
+    score[SOUND_FONT_LOADED] = loadPromise
+  }
+  return score[SOUND_FONT_LOADED] as Promise<void>
+}
+
 export const loadMscore = async (w: Window): Promise<WebMscore> => {
   initFonts()
   await initMscore(w)