how should I go by making a audio file converter in react

Question

I am trying to make an audio file converter that lets a user submit a file. Then uses JavaScripts Web Audio API to convert the pitch and stretch the file. I have gotten as far as uploading the file, use file reader to onload a function that stretches and converts the pitch. Now I am trying to export that file with the changes and I can right now only download the original file but not with the changes. I dont know how to assign file = buffer because it's from another class. How should I got by making this happen?

convertFile () {
        var fileInput = document.getElementById('audio-file')
        var ctx = new AudioContext()
        var convertFiles = document.getElementById('convert_button')
        
        //load audio file listener
        convertFiles.addEventListener("click", function() {
            if (fileInput.files[0] == undefined) {
                console.log("no file found")
                return false
            }
            
            var reader1 = new FileReader()
            reader1.onload = function(ev) {

                ctx.decodeAudioData(ev.target.result). then(function(buffer){
                    var soundSource = ctx.createBufferSource()
                    soundSource.buffer = buffer

                    // create the stretch
                    soundSource.playbackRate.linearRampToValueAtTime(0.0185, ctx.currentTime)
                    //connect source
                    soundSource.connect(ctx.destination)
                    // convert pitch
                    var pitchChange = ctx.createBiquadFilter()
                    pitchChange.type = 'highpass'
                    pitchChange.frequency.value = 432
                    pitchChange.connect(ctx.destination)
                    
                    
                })
                
            }
            reader1.readAsArrayBuffer(fileInput.files[0])
            
        })
        let file = fileInput.files[0]
        let url = URL.createObjectURL(file)

        let link = document.createElement('a')
        link.href = url
        link.download =  file.name
        link.click()
        link = null

        URL.revokeObjectURL(url)
        
    }
    render() {
        
        return (
            <div className="sec2">
                    <input type="file" id="audio-file" accept="audio/mpeg, audio/ogg, audio/*" name="file" onChange={this.uploadFile} />
                    <button type="button" id="convert_button" onClick={this.convertFile}>Convert to 432Hz</button> 
                    <download onClick={this.downloadFile}>Download File</download>                   
            </div>    
        )
    }
}

export default ConverterSec2

Answer 1

I started looking into this... I fixed a couple issues such as the audio file being loaded twice. However this is work in progress answer... I haven't figure out the saving part yet.

class ConverterSec2 extends React.Component {

    uploadFile = ({ target: { files } }) => {
        console.log(files[0])
        let data = new FormData()
        data.append('file', files[0])
    }

    convertFile () {
        var fileInput = document.getElementById('audio-file')
        var ctx = new AudioContext()
        var convertFiles = document.getElementById('convert_button')
        
        //load audio file listener
            if (fileInput.files[0] == undefined) {
                console.log("no file found")
                return false
            }
            
            var soundSource = ctx.createBufferSource();
            var reader1 = new FileReader()
            reader1.onload = function(ev) {
                ctx.decodeAudioData(ev.target.result).then(function(buffer){
                    soundSource.buffer = buffer

                    // create the stretch
                    soundSource.playbackRate.linearRampToValueAtTime(0.0185, ctx.currentTime)
                    //connect source
                    soundSource.connect(ctx.destination)
                    // convert pitch
                    var pitchChange = ctx.createBiquadFilter()
                    pitchChange.type = 'highpass'
                    pitchChange.frequency.value = 432
                    pitchChange.connect(ctx.destination)
                })

            }
            
            reader1.readAsArrayBuffer(fileInput.files[0]);
    }

    downloadFile() {
        let fileInput = document.getElementById('audio-file')
        let file = fileInput.files[0]
        let url = URL.createObjectURL(file)

        let link = document.createElement('a')
        link.href = url
        link.download =  file.name
        link.click()
        link = null

        URL.revokeObjectURL(url)
    }

    render() {
        
        return (
            <div className="sec2">
                    <input type="file" id="audio-file" accept="audio/mpeg, audio/ogg, audio/*" name="file" onChange={this.uploadFile} />
                    <button type="button" id="convert_button" onClick={this.convertFile}>Convert to 432Hz</button> 
                    <button onClick={this.downloadFile}>Download File</button>                   
            </div>    
        )
    }
}

Live Demo