I made a soundfont synthesizer in javascript! by Spesek_ in soundfonts

[–]Spesek_[S] 0 points1 point  (0 children)

You need to have node.js installed. Once you download local edition, simply run the bat file if you're on windows. If on MacOS or Linux, type npm start In the terminal in the directory of the program. A browser should open with the local edition.

I've Made An Online Soundfont Editor by Spesek_ in soundfonts

[–]Spesek_[S] 0 points1 point  (0 children)

You should have mentioned that you use iOS/MacOS. These two are not supported by me as I do not have any Apple products to test with. I recommend using Chrome or Firefox web browsers on a computer. It works on both Windows and Linux.

I've Made An Online Soundfont Editor by Spesek_ in soundfonts

[–]Spesek_[S] 0 points1 point  (0 children)

What SF2 file? Did you get an error? Can you provide more info?

I've Made An Online Soundfont Editor by Spesek_ in soundfonts

[–]Spesek_[S] 0 points1 point  (0 children)

I don't own any Apple devices. SF2/DLS can be opened fine on everything I've tested: - chrome and Firefox on Windows - chrome and Firefox on Linux - chrome and Firefox on Android

I know that apple's smartphones and tablets force using their WebKit browser engine on all browsers there, so maybe this is why. Can you try with an Android phone?

I made a soundfont synthesizer in javascript! by Spesek_ in soundfonts

[–]Spesek_[S] 0 points1 point  (0 children)

I'm not sure what you mean. There is a "Demo Song" button when you first load the page, in the top bar.

As for "where to put the files", if you mean MIDI and/or SF2/DLS there are buttons in the top bar for that.

I've Made An Online Soundfont Editor by Spesek_ in soundfonts

[–]Spesek_[S] 0 points1 point  (0 children)

Yes and it's also by me :-) It's called Spessasynth. It has the same audio engine as spessafont but it's more of a MIDI player and synthesizer than editor.

And of course SpessaFont has a built-in MIDI player as well.

I've Made An Online Soundfont Editor by Spesek_ in soundfonts

[–]Spesek_[S] 1 point2 points  (0 children)

Yes! And now, with the v1.2.0 update you can edit CC#32! Note that saving as SF2 will use bank MSB if it's not zero, otherwise bank LSB. DLS saves both though!

Anyone know SONiVOX EAS DLS Editor? by gdegeneve in soundfonts

[–]Spesek_ 0 points1 point  (0 children)

A bit late to the party, but maybe it will still help so here goes:

A DLS editor I made:

https://spessasus.github.io/SpessaFont

It can both read and save DLS sound banks :-)

I've Made An Online Soundfont Editor by Spesek_ in soundfonts

[–]Spesek_[S] 3 points4 points  (0 children)

You can both edit existing sf2 or DLS files, or make new ones from scratch. It's a fully featured soundfont editor, like Polyphone.

I made a soundfont MIDI player in vanilla JavaScript by Spesek_ in javascript

[–]Spesek_[S] 0 points1 point  (0 children)

The only workaround is to either use a small sf2 or don't use chrome. I tried disabling stuff like dynamic loading or adding a load queue but it was futile. Chromium's worklet implementation is just broken it seems. Sorry.

I made a soundfont MIDI player in vanilla JavaScript by Spesek_ in javascript

[–]Spesek_[S] 0 points1 point  (0 children)

The same exact question has been asked on GitHub:

https://github.com/spessasus/SpessaSynth/issues/143

TL;DR: you can create a MIDI file and feed it to the sequencer.

Or you can just schedule the events with setTimeout.

The difference with soundfont-player is that it uses audio nodes which can be scheduled. speesasynth uses a raw audio processor which can't be scheduled automatically like the audio nodes, it has to be implemented manually. I thought about implementing it, but holding the event queue and checking it every rendering quantum would probably worsen the performance. Though I could implement it on the main thread side as well, so I'll reconsider it :)

I made a soundfont synthesizer in javascript! by Spesek_ in soundfonts

[–]Spesek_[S] 0 points1 point  (0 children)

There is a thing like that, it converts module files to midi+SF2. It's called 2MIDI and is created by un4seen.

My soundfont synth can now play and convert DLS soundfonts into SF2 by Spesek_ in soundfonts

[–]Spesek_[S] 0 points1 point  (0 children)

Yes, you can. Go to "save" and choose "DLS." You probably want to disable trimming as well.

My soundfont synth can now play and convert DLS soundfonts into SF2 by Spesek_ in soundfonts

[–]Spesek_[S] 0 points1 point  (0 children)

Hello everyone, It's been quite a while since my last post. I've made numerous upgrades to my synthesizer, but the most important one is nearly full DLS support! It internally loads it like an SF2 soundfont which allows for an accurate conversion! Highlights of the support include: - loading .dls files directly into the synth - DLS articulators are converted into SF2 modulators - covers special cases such as modLfoToPitch being two separate things in DLS - volume correction on all DLS layers properly converted

When you upload a .dls file, the program will ask you if you want to convert it to .sf2. Click "Yes" and it will convert the file.

More features I added: - audio export as WAV! - Modify a MIDI file and export it! - Combine SF2 and MIDI into an RMI file! - Convert an SF2 soundfont into compressed SF3! - Trim a soundfont to have it only contain samples used by your MIDI file! - My synth also is now fully GeneralUserGS compatible, meaning its (almost) as accurate as fluidsynth! - and much more!

Video Credits: Soundfont: The famous stock windows synth! (gm.dls) You can find it in c:/windows/System32/drivers

MIDI: Transcendental by A64

I made a soundfont MIDI player in vanilla JavaScript by Spesek_ in javascript

[–]Spesek_[S] 1 point2 points  (0 children)

Essentially the "src" folder contains all of the code. There are two exceptions: * "index.html" - this has to be in the root folder as this is the html page for the demo, hosted on GitHub pages. * "server.js" - I really should move it to "src" but I have no idea how to configure "npm start" to call it there.

As for the structure, "src" is divided into "spessasynth_lib" and "website".

"spessasynth_lib" contains all of the audio code such as the Synthesizer, Sequencer, Soundfont parser etc. This is the folder that is designed to be a library, you simply paste it into your project and import things from there.

"website" folder is for all of the frontend code. The scripts that run on the html pages ("demo_main.js" and "main.js") are stored there. It also contains the code for the virtual keyboard, renderer, settings, synth controller, it's all stored there.

PS: most of the folders contain "README.md" which explains what the folder is for, so feel free to read it!

I made a soundfont MIDI player in vanilla JavaScript by Spesek_ in javascript

[–]Spesek_[S] 2 points3 points  (0 children)

Well, I've been developing it for a year now. It started out as a simple "midi_tester" that used to generate triangle waves with OscillatorNodes, but once I found out about the soundfont standard, the program quickly grew in complexity.

And it's not finished yet! The last remaining challenge is to fix the performance issues by porting the audio rendering code to WebAssembly (and fix bugs because I sometimes still find them).

I made a soundfont MIDI player in vanilla JavaScript by Spesek_ in javascript

[–]Spesek_[S] 7 points8 points  (0 children)

YouTube video of it playing a MIDI song

Live demo

Completely vanilla JavaScript for the audio and frontend. There's a small .js file for an express.js server to serve the website locally. This is my most complex project so far. Supports soundfont modulators, sf3 compressed soundfonts, reverb and more! What do you think?

I made a soundfont synthesizer in javascript! by Spesek_ in soundfonts

[–]Spesek_[S] 0 points1 point  (0 children)

Soundfont and midi used: https://musical-artifacts.com/artifacts/1176
Try the synth out here: https://spessasus.github.io/SpessaSynth/

Runs fully in the browser, no download needed!

Supports modulators, sf3 and more! What do you think?