Why Tone.js player audio not downloading

64 Views Asked by At

I am building a web application where users can upload song and convert it to lofi slow and reverbed i am using tone.js library for audio processing it is also working properly and playing the audio but when i am downloading it using tone recorder the normal audio getting downloaded not the lofi or converted version.

<script>
    // Create global variables to hold the necessary state
    let audioFile = null;
    let player = null;
    let bitCrusher = null;
    let pitchShift = null;
    let reverb = null;
    let isPlaying = false;
    let isInitialized = false;
    let recorder=null;
    // Function to handle file upload
    const handleFileUpload = (event) => {
        const file = event.target.files[0];
        audioFile = URL.createObjectURL(file);
    };

    // Function to initialize audio
    const initializeAudio = () => {
        Tone.start();

        player = new Tone.Player();
        recorder =new Tone.Recorder();
        player.load(audioFile);
       
        bitCrusher = new Tone.BitCrusher({
            bits: 3,
            wet: 0
        });

        pitchShift = new Tone.PitchShift({
            pitch: -4
        });

        reverb = new Tone.Reverb({
            decay: 3
        });

        player.chain(bitCrusher, pitchShift, reverb, Tone.Destination);
        player.connect(recorder);
        isInitialized = true;
        document.getElementById('start-play').style.display = 'block';
        document.getElementById('initialize-btn').style.display = 'none';
    };

    // Function to play audio
    const playAudio = () => {
        if (player && bitCrusher && pitchShift && reverb) {
            Tone.loaded().then(() => {
                player.start();
                recorder.start();
                isPlaying = true;
                document.getElementById('stop-play').style.display = 'block';
                document.getElementById('start-play').style.display = 'none';
                document.getElementById('initialize-btn').style.display = 'none';
            });
        }
    };

    // Function to stop audio
    const stopAudio = () => {
        if (player) {
            player.stop();
            isPlaying = false;
            document.getElementById('start-play').style.display = 'block';
            document.getElementById('stop-play').style.display = 'none';
        }
    };

    // Function to handle play/pause button click
    const handleTogglePlay = () => {
        if (isPlaying) {
            stopAudio();
        } else {
            playAudio();
        }
    };

    // Function to download the audio file
     const downloadAudio = async () => {
        const recording = await recorder.stop();
    const url = URL.createObjectURL(recording);
    const anchor = document.createElement("a");
    anchor.download = "converted-lofi.mp3";
    anchor.href = url;
    anchor.click();
};




</script>

I tried multiple ways placing the player.connect() at multiple places none of them working

0

There are 0 best solutions below