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