1

Hello im currently trying to create a digital guitar amp through browser using tone js v14.7.77 that has reverb (freeverb), delay(pingPongDelay), and distortion and i have hard time to set the effect options such as delaytime, distortion, etc dynamically through my client (browser) but as for now im currently trying to change the wet option through buttons but it did not worked out. can anyone have any idea what should i do?

heres my code and im using Vue 2 for my front end framework

this is my store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import * as Tone from 'tone'
// const audioContext = new AudioContext()

Vue.use(Vuex)

// Volume Setup
const vol = new Tone.Volume({
  volume: 0,
  mute: false,
  wet: 1
}).toDestination()
// Distortion Setup
const dist = new Tone.Distortion({
  distortion: 0.1,
  wet: 0
}).toDestination()
// Reverb Setup
const freeverb = new Tone.Freeverb({
  reverbDampening: 1500,
  wet: 0
}).toDestination()
// Delay Setup
const pingPong = new Tone.PingPongDelay({
  delayTime: '4n',
  feedback: 0.2,
  wet: 0
}).toDestination()

export default new Vuex.Store({
  state: {
    audioState: 'start',
    // Eq setup
    eq: {
      trebleEQ: 1,
      midEQ: 1,
      bassEQ: 1,
      volume: 1
    },
    // reverb setup
    reverb: {
      status: 'off',
      wet: 0,
      reverbDampening: 1500
    },
    // distortion setup
    distortion: {
      dist: 0.8,
      status: 'off',
      wet: 0
    },
    // delay setup
    delay: {
      status: 'off',
      wet: 0,
      times: '4n',
      timeRange: 0.2
    }
  },
  getters: {
  },
  mutations: {
    switchDelay (state, change) {
      console.log(pingPong.context)
      pingPong.PingPongDelay.wet = change.wet
      state.delay.status = change.status
      state.delay.wet = change.wet
    },
    switchReverb (state, change) {
      // freeverb.Freeverb.wet = change.wet
      state.reverb.status = change.status
      state.reverb.wet = change.wet
    }
  },
  actions: {
    setupContext () {
      // Line Input initiate
      const lineInput = new Tone.UserMedia()
      // --- value setup ---
      lineInput
        .connect(vol)
        .connect(dist)
        .connect(freeverb)
        .connect(pingPong)
        .open().then(() => {
        // promise resolves when input is available
          console.log('line open', pingPong.context)
        }).catch(e => {
        // promise is rejected when the user doesn't have or allow delay access
          console.log('line not open', e)
        })
    },
    reverbChanger (context, payload) {
      context.commit('switchReverb', payload)
    },
    delayChanger (context, payload) {
      console.log(payload)
      context.commit('switchDelay', payload)
    }
  }
})

this is my home.vue

<template>
  <div class="home">
    <button @click="reverbSwitch" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-base px-6 py-3.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Start Reverb [{{reverb.status}}]</button>
    <button @click="delaySwitch" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-base px-6 py-3.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Start Delay [{{delay.status}}]</button>
    <effect-card></effect-card>
  </div>
</template>

<script>
import * as Tone from 'tone'

export default {
  name: 'HomeView',
  data () {
    return {
      delay: {
        status: this.$store.state.delay.status,
        wet: this.$store.state.delay.wet,
        times: this.$store.state.delay.times,
        timeRange: this.$store.state.delay.timeRange
      },
      reverb: {
        status: this.$store.state.reverb.status,
        wet: this.$store.state.reverb.wet,
        reverbDampening: this.$store.state.reverb.reverbDampening
      }
    }
  },
  methods: {
    reverbSwitch () {
      // create a synth and connect it to the main output (your speakers)
      const synth = new Tone.Synth().toDestination()
      if (this.$store.state.reverb.status === 'off') {
        this.$store.commit('reverbChanger', { status: 'on', wet: 1 })
      } else {
        this.$store.commit('switchReverb', { status: 'off', wet: 0 })
      }
      // play a middle 'C' for the duration of an 8th note
      synth.triggerAttackRelease('C2', '8n') // used to trigger web audio api
    },
    delaySwitch () {
      // create a synth and connect it to the main output (your speakers)
      const synth = new Tone.Synth().toDestination()
      console.log(this.$store.state.delay.status)
      if (this.$store.state.delay.status === 'off') {
        console.log('turning on delay')
        this.$store.commit('switchDelay', { status: 'on', wet: 1 })
      } else {
        console.log('turning off delay')
        this.$store.commit('switchDelay', { status: 'off', wet: 0 })
      }
      // play a middle 'C' for the duration of an 8th note
      synth.triggerAttackRelease('C3', '8n') // used to trigger web audio api
    }
  },
  created () {
    // this.$store.dispatch('setupReverb')
    // this.$store.dispatch('setupPingPongDelay')
    this.$store.dispatch('setupContext')
  }
}
</script>
muntun
  • 41
  • 1
  • 5

0 Answers0