PolySynth with React and TypeScript

[brentbrinkley]

So I've got tone working in React perfectly my only issue is when I change the synth over to PolySynth the object I'm passing in just will not work. It gives me a long message about the acceptable types. My issue is the list is truncated and I can't see what the defaults are so I don't know what to pass in. I tried following the definitions and this codebase is just incredibly dense. Here's what I'm attempting to pass into PolySynth as the second argument.

const harp = {
    oscillator: {
        type: 'sine'
    },
    modulation: {
        type: 'basic'
    },
    envelope: {
        attack: 0.01,
        decay: 0.1,
        sustain: 0.1,
        release: 1.2,
        attackCurve: 'linear',
        decayCurve: 'exponential',
        releaseCurve: 'exponential'
    }
}

This works perfectly fine in normal JS. But not in TS set to strictmode. Any help would be appreciated.

[tambien]

What is the error that you're getting? and PolySynth code which is throwing the error?

One thing i can see by glancing at it is that i don't think there is a modulation: { type: 'basic' } which is what typescript might be throwing an error about. But if you could provide more context it'd be easier to debug.

[brentbrinkley]

@tambien Thank you for getting back in touch. I grabbed a screenshot of the error for you

[tambien]

yeah looks like it is because you've got 'basic' as the oscillator type in "modulation" which is not a valid oscillator type. Try "sine", "square", "triangle" or "sawtooth"

[brentbrinkley]

When I update the property a similar error message pops up:

Here's the updated object that's causing the error:

export const harp = {
    oscillator: {
        type: 'sine'
    },
    modulation: {
        type: 'sine'
    },
    envelope: {
        attack: 0.01,
        decay: 0.1,
        sustain: 0.1,
        release: 1.2,
        attackCurve: 'linear',
        decayCurve: 'exponential',
        releaseCurve: 'exponential'
    }
}

[tambien]

"sine" is a string and a type and for some reason typescript is not recognizing the string literal as the type. Related to this issue.

The simplest solution seems to be

export const harp = {
    modulation: {
        type: 'sine' as const
    }
}

[brentbrinkley]

Still not responding.

Updated code:

export const harp = {
    oscillator: {
        type: 'sine' as const
    },
    modulation: {
        type: 'sine' as const
    },
    envelope: {
        attack: 0.01,
        decay: 0.1,
        sustain: 0.1,
        release: 1.2,
        attackCurve: 'linear',
        decayCurve: 'exponential',
        releaseCurve: 'exponential'
    }
}

Updated Error:

I decided to try adding const to the other "strings" on the object and when I did this was the new error message:

Updated Object:

export const harp = {
    oscillator: {
        type: 'sine' as const
    },
    modulation: {
        type: 'sine' as const
    },
    envelope: {
        attack: 0.01,
        decay: 0.1,
        sustain: 0.1,
        release: 1.2,
        attackCurve: 'linear' as const,
        decayCurve: 'exponential' as const,
        releaseCurve: 'exponential' as const
    }
}

[tambien]

oh i think it's much simpler than i realized. the synth type you've chosen does not have a 'modulation' property. try removing it.

[brentbrinkley]

Updated Code:

export const harp = {
    oscillator: {
        type: 'sine' as const
    },
    envelope: {
        attack: 0.01,
        decay: 0.1,
        sustain: 0.1,
        release: 1.2,
        attackCurve: 'linear' as const,
        decayCurve: 'exponential' as const,
        releaseCurve: 'exponential' as const
    }
}

Error:

Here's the repo if you want to take a further look https://github.com/brentbrinkley/mosaic

[tambien]

I think the issue it that on this line you're declaring synth as a Synth where it should be a PolySynth.

Here's a simplified version of your code: https://codesandbox.io/s/cool-sun-pp1et?file=/src/index.ts

Let me know if that fixes it for you

[brentbrinkley]

That worked thank you so much for you're assistance! I can't believe I missed something that simple.