The single AudioWorkletProcessor which plays midi
- Wavetable synthesizer
- Never stops the UI thread
- Ability to specify playback timing to prevent rhythm disruptions
- Multi-channel support
- Faster offline rendering
SoundFont Player built with AudioWorkletProcessor
License: MIT License
Hi @ryohey
I'm playing a midi file in the following manner:
As soon as I'm getting events from a midi keyboard stream, I'm simply sending
postSynthMessage({ type: "midi", midi: noteData, delayTime: 0 })
However, if there are a lot of events, it's causing problems with the output. It kind of hangs.
Is there a way to run this on the main thread so that there's no postMessage to the worker?
Hi @ryohey
This is one great library to play SoundFont files written in TypeScript.
Is there a way I can load multiple sf2 files for different instruments? Like a different one for grand piano and a different one for acoustic guitar?
Hi @ryohey
Although this library is simply perfect for my use case, I can easily import custom soundfonts to play different instruments, there's still a bit of latency while using postMessage to send data about the note that is to be played by the audio worklet.
Is there a way to run this library on the main thread without using postMessage?
Hi, I hope you are doing well.
I have an issue with this package processor, I am using it in my next.js app but in this section:
async setup() {
const waveletModule = await import('@ryohey/wavelet/dist/processor.js');
const url = new URL(waveletModule.default, import.meta.url);
await this.context?.audioWorklet.addModule(url);
}
I get an error which is AudioWorkletProcessor is not defined although I fixed window undefined issues before initializing the rootStore in my app.tsx file :
React.useEffect(() => {
if (typeof window !== 'undefined') {
const audioContext = new window.AudioContext();
setRootStore(new RootStore(audioContext));
}
}, []);
and in the rootStore class:
export default class RootStore {
song: Song = emptySong();
readonly pianoRollStore!: PianoRollStore;
readonly controlStore!: ControlStore;
readonly player!: Player;
readonly synth!: SoundFontSynth;
readonly metronomeSynth!: SoundFontSynth;
readonly midiRecorder!: MIDIRecorder;
readonly trackMute = new TrackMute();
readonly historyStore = new HistoryStore<SerializedState>();
readonly rootViewStore = new RootViewStore();
readonly arrangeViewStore = new ArrangeViewStore(this);
readonly tempoEditorStore = new TempoEditorStore(this);
readonly midiDeviceStore = new MIDIDeviceStore();
readonly exportStore = new ExportStore();
readonly authStore = new AuthStore();
readonly cloudFileStore = new CloudFileStore(this);
readonly settingStore = new SettingStore();
readonly synthGroup = new GroupOutput();
readonly midiInput = new MIDIInput();
readonly soundFontStore!: SoundFontStore;
constructor(audioContext: AudioContext) {
makeObservable(this, {
song: observable.ref,
});
if (typeof window !== 'undefined') {
this.synth = new SoundFontSynth(audioContext);
this.metronomeSynth = new SoundFontSynth(audioContext);
this.synthGroup.outputs.push({ synth: this.synth, isEnabled: true });
this.player = new Player(this.synthGroup, this.metronomeSynth, this.trackMute, this);
this.midiRecorder = new MIDIRecorder(this.player, this);
this.pianoRollStore = new PianoRollStore(this);
this.controlStore = new ControlStore(this.pianoRollStore);
this.soundFontStore = new SoundFontStore(this.synth);
const preview = previewMidiInput(this);
this.midiInput.onMidiMessage = (e: any) => {
preview(e);
this.midiRecorder.onMessage(e);
};
this.pianoRollStore!.setUpAutorun();
this.arrangeViewStore.setUpAutorun();
this.tempoEditorStore.setUpAutorun();
registerReactions(this);
this.init();
}
}
private async init() {
try {
await this.synth.setup();
await this.soundFontStore.init();
this.setupMetronomeSynth();
} catch (e) {
console.log(e);
this.rootViewStore.initializeError = e as Error;
this.rootViewStore.openInitializeErrorDialog = true;
}
}
...
}
but I catch the"AudioWorkletProcessor is not defined " error in init catch block.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.