Merge pull request #16 from ryohey/faster-load

Faster load

Author: ryohey

.github/workflows/node.js.yml

@@ -0,0 +1,30 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    branches: ["main"]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+      - run: npm ci
+      - run: npm run build --if-present
+      - run: npm test

.github/workflows/npm-publish.yml

@@ -0,0 +1,23 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  publish-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm run build
+      - run: npm run publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

example/src/index.ts

@@ -2,7 +2,7 @@ import {
   AudioData,
   audioDataToAudioBuffer,
   CancelMessage,
-  getSamplesFromSoundFont,
+  getSampleEventsFromSoundFont,
   OutMessage,
   renderAudio,
   StartMessage,
@@ -13,7 +13,8 @@ import { encode } from "wav-encoder"
 import { MIDIPlayer } from "./MIDIPlayer"
 import { midiToSynthEvents } from "./midiToSynthEvents"
 
-const soundFontUrl = "soundfonts/A320U.sf2"
+// const soundFontUrl = "soundfonts/A320U.sf2"
+const soundFontUrl = "soundfonts/SGM-V2.01.sf2"
 
 const Sleep = (time: number) =>
   new Promise<void>((resolve) => setTimeout(resolve, time))
@@ -44,20 +45,24 @@ const main = async () => {
   }
 
   const loadSoundFont = async () => {
+    let startDate = Date.now()
+    console.log("Loading soundfont...")
     soundFontData = await (await fetch(soundFontUrl)).arrayBuffer()
+    console.log(
+      `Soundfont loaded. (${Date.now() - startDate}ms, ${
+        soundFontData.byteLength
+      } bytes)`
+    )
 
+    startDate = Date.now()
     console.log("Parsing soundfont...")
-    const parsed = getSamplesFromSoundFont(
-      new Uint8Array(soundFontData),
-      context
+    const sampleEvents = getSampleEventsFromSoundFont(
+      new Uint8Array(soundFontData)
     )
-    console.log("Soundfont parsed.")
+    console.log(`Soundfont parsed. (${Date.now() - startDate}ms)`)
 
-    for (const sample of parsed) {
-      postSynthMessage(
-        sample,
-        [sample.sample.buffer] // transfer instead of copy
-      )
+    for (const event of sampleEvents) {
+      postSynthMessage(event.event, event.transfer)
     }
   }
 
@@ -157,9 +162,8 @@ const main = async () => {
     if (soundFontData === null) {
       return
     }
-    const samples = getSamplesFromSoundFont(
-      new Uint8Array(soundFontData),
-      context
+    const sampleEvents = getSampleEventsFromSoundFont(
+      new Uint8Array(soundFontData)
     )
     const sampleRate = 44100
     const events = midiToSynthEvents(midi, sampleRate)
@@ -175,14 +179,18 @@ const main = async () => {
       cancelButton.onclick = () => (cancel = true)
       exportPanel.appendChild(cancelButton)
 
-      const result = await renderAudio(samples, events, {
-        sampleRate,
-        bufferSize: 256,
-        cancel: () => cancel,
-        waitForEventLoop: waitForAnimationFrame,
-        onProgress: (numFrames, totalFrames) =>
-          (progress.value = numFrames / totalFrames),
-      })
+      const result = await renderAudio(
+        sampleEvents.map((event) => event.event),
+        events,
+        {
+          sampleRate,
+          bufferSize: 256,
+          cancel: () => cancel,
+          waitForEventLoop: waitForAnimationFrame,
+          onProgress: (numFrames, totalFrames) =>
+            (progress.value = numFrames / totalFrames),
+        }
+      )
 
       cancelButton.remove()
 
@@ -195,15 +203,14 @@ const main = async () => {
           return
         }
         const worker = new Worker("/js/rendererWorker.js")
-        const samples = getSamplesFromSoundFont(
-          new Uint8Array(soundFontData),
-          context
+        const sampleEvents = getSampleEventsFromSoundFont(
+          new Uint8Array(soundFontData)
         )
         const sampleRate = 44100
         const events = midiToSynthEvents(midi, sampleRate)
         const message: StartMessage = {
           type: "start",
-          samples,
+          samples: sampleEvents.map((e) => e.event),
           events,
           sampleRate,
           bufferSize: 128,

jest.config.js lib/jest.config.jsjest.config.js renamed to lib/jest.config.js

@@ -1,14 +1,14 @@
 {
   "name": "@ryohey/wavelet",
-  "version": "0.6.3",
+  "version": "0.7.0",
   "description": "A wavetable synthesizer that never stops the UI thread created by AudioWorklet.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
   "scripts": {
     "start": "rollup --config --watch",
     "build": "rollup --config",
-    "test": "jest"
+    "test": "jest --roots ./src"
   },
   "author": "ryohey",
   "license": "MIT",

lib/package.json

@@ -7,9 +7,9 @@ export interface SampleLoop {
   end: number
 }
 
-export interface SampleData<BufferType> {
+export interface SampleParameter {
   name: string
-  buffer: BufferType
+  sampleID: number
   pitch: number
   loop: SampleLoop | null
   sampleStart: number
@@ -25,15 +25,25 @@ export interface SampleData<BufferType> {
   volume: number // 0 to 1
 }
 
-export interface LoadSampleEvent {
-  type: "loadSample"
-  sample: SampleData<ArrayBuffer>
+export interface SampleRange {
   bank: number
   instrument: number // GM Patch Number
   keyRange: [number, number]
   velRange: [number, number]
 }
 
+export interface LoadSampleEvent {
+  type: "loadSample"
+  data: ArrayBuffer
+  sampleID: number
+}
+
+export interface SampleParameterEvent {
+  type: "sampleParameter"
+  parameter: SampleParameter
+  range: SampleRange
+}
+
 export type MIDIEventBody = DistributiveOmit<AnyChannelEvent, "deltaTime">
 
 export type MIDIEvent = {
@@ -44,7 +54,7 @@ export type MIDIEvent = {
   delayTime: number
 }
 
-export type ImmediateEvent = LoadSampleEvent
+export type ImmediateEvent = LoadSampleEvent | SampleParameterEvent
 export type SynthEvent = ImmediateEvent | MIDIEvent
 
 export const DrumInstrumentNumber = 128

lib/src/SynthEvent.ts

@@ -1,36 +1,44 @@
-import { SampleData } from "../SynthEvent"
+import { SampleParameter, SampleRange } from "../SynthEvent"
 
-type Sample = SampleData<Float32Array>
-
-export type SampleTableItem = Sample & {
+export type SampleTableItem = SampleParameter & {
   velRange: [number, number]
 }
 
+export type Sample = SampleParameter & {
+  buffer: ArrayBuffer
+}
+
 export class SampleTable {
   private samples: {
+    [sampleID: number]: Float32Array
+  } = {}
+
+  private sampleParameters: {
     [bank: number]: {
       [instrument: number]: { [pitch: number]: SampleTableItem[] }
     }
   } = {}
 
-  addSample(
-    sample: Sample,
-    bank: number,
-    instrument: number,
-    keyRange: [number, number],
-    velRange: [number, number]
-  ) {
+  addSample(data: Float32Array, sampleID: number) {
+    this.samples[sampleID] = data
+  }
+
+  addSampleParameter(parameter: SampleParameter, range: SampleRange) {
+    const { bank, instrument, keyRange, velRange } = range
     for (let i = keyRange[0]; i <= keyRange[1]; i++) {
-      if (this.samples[bank] === undefined) {
-        this.samples[bank] = {}
+      if (this.sampleParameters[bank] === undefined) {
+        this.sampleParameters[bank] = {}
       }
-      if (this.samples[bank][instrument] === undefined) {
-        this.samples[bank][instrument] = {}
+      if (this.sampleParameters[bank][instrument] === undefined) {
+        this.sampleParameters[bank][instrument] = {}
       }
-      if (this.samples[bank][instrument][i] === undefined) {
-        this.samples[bank][instrument][i] = []
+      if (this.sampleParameters[bank][instrument][i] === undefined) {
+        this.sampleParameters[bank][instrument][i] = []
       }
-      this.samples[bank][instrument][i].push({ ...sample, velRange })
+      this.sampleParameters[bank][instrument][i].push({
+        ...parameter,
+        velRange,
+      })
     }
   }
 
@@ -40,11 +48,25 @@ export class SampleTable {
     pitch: number,
     velocity: number
   ): Sample[] {
-    const samples = this.samples?.[bank]?.[instrument]?.[pitch]
-    return (
-      samples?.filter(
+    const parameters =
+      this.sampleParameters?.[bank]?.[instrument]?.[pitch]?.filter(
         (s) => velocity >= s.velRange[0] && velocity <= s.velRange[1]
       ) ?? []
-    )
+
+    const samples: Sample[] = []
+
+    for (const parameter of parameters) {
+      const buffer = this.samples[parameter.sampleID]
+      if (buffer === undefined) {
+        console.warn(`sample not found: ${parameter.sampleID}`)
+        continue
+      }
+      samples.push({
+        ...parameter,
+        buffer,
+      })
+    }
+
+    return samples
   }
 }