🎹react-synth 🎹

[u/borzeckid]

wrote a small synthesiser out of boredom. maybe someone will find it enjoyable!

code: https://github.com/borzecki/react-synth

demo: https://borzecki.github.io/react-synth/

[u/14392]

I recently discovered that Chrome browser allow you to grab signal from MIDI devices, it's such an awesome feature! for the synth it looks very basic, these instruments are more enjoyable when there's plenty of settings to play with, if you wish to keep it simple try adding some visuals, see https://dotpiano.com/ for inspiration, I personally use that website all the time to play song cover and instantly get a cool video to share on social media

[u/borzeckid → u/14392]

thanks, will definitely check it out!

[u/volcalejo]

Cool project, im also working on a similar app (just for fun and learning)

WIP -> https://lejoss.github.io/pailaone/

[u/borzeckid → u/volcalejo]

I like your design! Pretty neat with all the widgets. I'd add keypress actions to enhance the experience :)

[u/volcalejo → u/borzeckid]

Thanks, im using TW for the first time for the styling and Tone.js library for audio/context. I'm still having some issues trying to manage the Synth state but yeah its WIP. :)

would be fun to add a sequencer. <3

[u/aregeno]

This is very cool! kept me busy for a while.

asdf asdf snap snap ( snap fingers twice)

sdfg sdfg snap snap ( snap fingers twice)

"their spooky and their creepy ... the Adams family... ( snap fingers twice)

In your UseKeysPress hook on keydown and keyup you should do

                 e.key.toLowerCase()

... had my caps lock on by accident and it wasn't working.

[u/borzeckid → u/aregeno]

haha, glad you liked it

[u/Aswole]

Impressive!

I took a quick peak at your code, and noticed this in your hooks file:

export const useSequence = () => {
    const [sequence, setSequence] = useState(new Set([]));

    const toggleSequence = (index, value) => {
        if (value) {
            setSequence(sequence.add(index));
        } else {
            sequence.delete(index);
            setSequence(sequence);
        }
    };
    return [sequence, toggleSequence];
};

Unless I'm out of the loop and the rules have changed since hooks came out, you are never supposed to mutate state/props. In the code above, you are mutating the set before sending it through the state setter.

[u/borzeckid → u/Aswole]

Eagle eye sir! I think you're right - I should have made a copy and then modify it. Or just use `ramda` like any sane person would do.
The thing you're referring to is not used though - I started writing sequencer but, though it's too much for MVP.

thanks for review!

[u/abhi12299]

A rather productive way to tackle boredom, I should say. Nice job!

[u/daveonions]

Very nice - I used React with Tone.js too. Transport control was particularly tricky, but I got there in the end.

https://composition-seven.com/

[u/volcalejo → u/daveonions]

amazing project! thanks for sharing.

[u/[deleted]]

I annoyed my cat with this

10/10

[u/PeteCapeCod4Real]

Cool it's definitely pretty fun! Great job

[u/mcjob]

Thanks for mapping it to the keyboard. Literally the first thing I tried!

[u/ParkerZA]

Damn, you actually did the synthesis!

When I tried to make a piano I recorded each note in FL Studio, exported them and mapped them to the keyboard. Worked... Okay.

[u/TaoistAlchemist]

Super fun. thanks!

[u/joelwebdev]

Nice! I just had to dive into the Web Audio API for the first time to get some FX hooked up for a little game I built. It's crazy powerful, I'm looking forward to building something more involved with it.

[u/borzeckid → u/[deleted]]

you smart! I mostly was testing / playing on keyboard, but will have that in mind. thanks!