Skip to content

Instantly share code, notes, and snippets.

@KGZM
Created July 29, 2017 04:26
Show Gist options
  • Save KGZM/daebd4198fc4647bf693c8fe5a1267e7 to your computer and use it in GitHub Desktop.
Save KGZM/daebd4198fc4647bf693c8fe5a1267e7 to your computer and use it in GitHub Desktop.
Synthesizing..
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment