Synthesizing..

basicsynth.vue

<template>
  <div class="synth">
    <div class="synth__settings">
      <div v-for="(controls, category) of settings">
        <h2>{{category}}</h2>
        <ul>
          <li v-for="(value, label) of controls">
            <label>{{label}}</label>
            <input type="text" @input="updateSetting(category, label, $event)" v-model="settings[category][label]">
           <!-- {group: "{{category}}", name: "{{label}}", default: {{JSON.stringify(value)}}, min: {{Number.MIN_VALUE}}, max: Infinity}, -->
          </li>
        </ul>
      </div>
    </div>

    {{settings}}
    <button @click="play()">Play Me</button>
   </div>
</template>

<script>
import {MonoSynth} from 'tone';
let controls = [
    {group: "oscillator"    , name: "frequency"    , default: "C4"     , min: 5e-324, max :Infinity},
    {group: "oscillator"    , name: "type"         , default: "square" , min: 5e-324, max :Infinity},
    {group: "filter"        , name: "Q"            , default: 6        , min: 5e-324, max :Infinity},
    {group: "filter"        , name: "type"         , default: "lowpass", min: 5e-324, max :Infinity},
    {group: "filter"        , name: "rolloff"      , default: -24      , min: 5e-324, max :Infinity},
    {group: "envelope"      , name: "attack"       , default: 0.005    , min: 5e-324, max :Infinity},
    {group: "envelope"      , name: "decay"        , default: 0.1      , min: 5e-324, max :Infinity},
    {group: "envelope"      , name: "sustain"      , default: 0.9      , min: 5e-324, max :Infinity},
    {group: "envelope"      , name: "release"      , default: 1        , min: 5e-324, max :Infinity},
    {group: "filterEnvelope", name: "attack"       , default: 0.06     , min: 5e-324, max :Infinity},
    {group: "filterEnvelope", name: "decay"        , default: 0.2      , min: 5e-324, max :Infinity},
    {group: "filterEnvelope", name: "sustain"      , default: 0.5      , min: 5e-324, max :Infinity},
    {group: "filterEnvelope", name: "release"      , default: 2        , min: 5e-324, max :Infinity},
    {group: "filterEnvelope", name: "baseFrequency", default: 200      , min: 5e-324, max :Infinity},
    {group: "filterEnvelope", name: "octaves"      , default: 7        , min: 5e-324, max :Infinity},
    {group: "filterEnvelope", name: "exponent"     , default: 2        , min: 5e-324, max :Infinity}
]
export default {
    name: 'SynthButton',
    data() {
        return {
            synth: null,
            noteLength: "8n",
            note:"C4",
            settings: {
                detune:0,
                oscillator:{
                    frequency:"C4",
                    type:"square"
                },
                filter:{
                    Q:6,
                    type:"lowpass",
                    rolloff:-24,
                },
                envelope:{
                    attack:0.005,
                    decay:0.1,
                    sustain:0.9,
                    release:1,
                },
                filterEnvelope:{
                    attack:0.06,
                    decay:0.2,
                    sustain:0.5,
                    release:2,
                    baseFrequency:200,
                    octaves:7,
                    exponent:2,
                }}
            
        }
    },
    created() {
        this.synth = new MonoSynth(this.settings).toMaster();
        window.synth = this.synth;
    },
    methods: {
        play() {
            this.synth.triggerAttackRelease(this.note, this.noteLength);
        },
        updateSetting(category, control) {
            let value = this.settings[category][control];
            console.log(category, control, value);
            this.synth.set({[category]: {[control]: value}});
        }
    }
}
</script>

<style lang="sass">
.synth {
    background-color: cyan;
    li {
        list-style-type: none;
    }
}
</style>