Speed & Pitch Shift Control and Panning using Tone.JS

[1618lip]

I know it is possible using the Phase Vocoder technique, through this example here

but I can't seem to make it work. I noticed that it is possible to connect wavesurfer to Tone.js, which has the speed and pitch control (and they can be controlled independent of each other). How should I do that?

For context, here is my relevant JS code:

// Create audio wave using wavesurfer API
const wavesurfer = WaveSurfer.create({
    container: '#waveform', //Waveform container
    waveColor: gradient,
    progressColor: gradientprog,
    height: 300,
    backend: 'MediaElement',
    barWidth: NaN,
    barRadius: NaN,
    audioRate: 1, // set the initial playback rate
    // normalize: true,
    hideScrollbar: false,
    responsive: true,
    minPxPerSec: 20,
    barHeight: 0.5,
    plugins: [ 
        regions = WaveSurfer.Regions.create(),
        WaveSurfer.Hover.create({
            lineColor: '#ff0000',
            lineWidth: 2,
            labelBackground: '#555',
            labelColor: '#fff',
            labelSize: '11px',
          }),
            timeline,
      ],
})

[katspaugh]

AFAIK Tone.js is Web Audio-based, so generally you would connect it as any other Web Audio node. See this example:

https://wavesurfer.xyz/examples/?webaudio.js

Also see this thread: #3024