search

Tonejs / Tone.js

A Web Audio framework for making interactive music in the browser.
https://tonejs.github.io
MIT License
13.52k stars 983 forks source link

Render offline buffer to a static file #1020

Closed cacalo closed 2 years ago

cacalo commented 2 years ago

I'm creating a composer and I'm currently investigating on offline rendering the result to a file.

I've tried using the recorder but it records the audio not in real time, but in offline time, making and ultra short and fast audio file. I've also searched for this online but I'm yet to find a solution that works with offline toneJs. I tried audioBufferToWav to make a blob of type: 'audio/wav' with the audioBuffer generated with Offline to pass createObjectURL but this generates a wav file with correct length but filled with silence.

I also tried to make a blob out of the ToneAudioBuffer but I haven't had any luck with this as well. In the documentation of Offline and ToneAudioBuffer there is no explanation of what to do with the context but to log it.

Some of my code: Code where I create the buffer async createMP3(notes: INote[]) { const recorder = new Tone.Recorder(); const buffer = await Tone.Offline(({ transport }) => { const instrument = this.currentSampler!; instrument.connect(recorder); recorder.start(); const song = new Tone.Part((time, note) => { instrument.triggerAttackRelease(note, '1860i', time); }, this.songToTonejs(notes)).start(0); transport.schedule((time) => { song; }, 1); // make sure to start the transport transport.start(0); }, this.getSongLenght(notes)); return buffer;

Code where I create the wav file async exportMp3(){ const mp3 = await this.playerService.createMP3(this.composerState.currentVersion.notes) const wav = audioBufferToWav(mp3.get()!) const blob = new Blob([wav], {type: 'audio/wav'}); console.log(mp3,blob,wav) const url = await URL.createObjectURL(blob); const anchor = document.createElement("a"); anchor.download = "recording.wav"; anchor.href = url; anchor.click();

The code above generates a valid .wav file with no sound.

Sorry about the styling, I'm not really sure how to make it look nice here on GH.

Does anybody has experiece with this issue?

marcelblum commented 2 years ago

Looks like you're mixing up Tone.Recorder and Tone.Offline. Recorder is for recording the realtime output of an online context. Offline is for silently rendering a precomposed piece of sound faster than realtime. It sounds like you want to do the latter, in which case the reason you're getting a silent wav is because you're connecting instrument to recorder (which is useless in an offline context) instead of to the offline context's own destination. Try instrument.toDestination() and remove the Recorder stuff and it should work.

cacalo commented 2 years ago

You were correct. I could connect my PolySynth to the offline context and it worked correctly :) I'm still working out making this work with the sampler, but those are my problems. Thank you for your help!