stage 3

stage 3.js

import "./styles.css";
import { useEffect, useRef, useState } from "react";
import * as Tone from "tone";

export default function App() {
  const [filter, setFilter] = useState<Tone.PitchShift | undefined>(undefined);
  const [pitch, setPitch] = useState(1);
  const audioRef = useRef<any>();

  async function init() {
    const player = new Tone.Player("./elle-raw.mp3");

    const filter1 = new Tone.PitchShift().toDestination();
    filter1.pitch = -3;

    const filter2 = new Tone.PitchShift().toDestination();
    filter1.pitch = 3;


    player.connect(filter1);
    player.connect(filter2);


    Tone.loaded().then(() => {
      player.start();
    });
  }

  return (
    <div className="App">
      <button onClick={() => Tone.start()}>start</button>
      <input
        type="range"
        min={-10}
        max={10}
        value={pitch}
        onChange={(event) => {
          const pitch = parseInt(event.target.value, 10);
          setPitch(pitch);
          if (filter) {
            filter.pitch = pitch;
          }
        }}
      />
      <h1>Hello CodeSandbox {pitch}</h1>
      <audio
        onCanPlay={() => init()}
        ref={audioRef}
        controls
        src="https://github.com/41y08h/GHaaS/blob/main/elle-raw.mp3?raw=true"
      />
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}