Giter VIP home page Giter VIP logo

wavelet's Introduction

Wavelet

The single AudioWorkletProcessor which plays midi

Features

  • Wavetable synthesizer
  • Never stops the UI thread
  • Ability to specify playback timing to prevent rhythm disruptions
  • Multi-channel support
  • Faster offline rendering

wavelet's People

Contributors

ryohey avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Forkers

hattonjs

wavelet's Issues

Run it on main thread

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?

Load multiple soundfont samples

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?

Can I use the library on the main thread?

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?

AudioWorkletProcessor is not defined in Next.js app

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.