javascript - 我应该如何通过制作音频文件转换器来做出反应

Question

我正在尝试制作一个允许用户提交文件的音频文件转换器。然后使用 JavaScripts Web Audio API 转换音高和拉伸文件。我已经上传了文件，使用文件阅读器来加载一个拉伸和转换音高的功能。现在我正在尝试使用更改导出该文件，我现在只能下载原始文件，但不能下载更改。我不知道如何分配 file = buffer 因为它来自另一个类。我应该如何做到这一点？

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

标签： javascriptweb-audio-api

Answer 1

我开始研究这个......我修复了几个问题，例如音频文件被加载两次。然而，这是正在进行的答案......我还没有弄清楚节省的部分。

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>    
        )
    }
}

现场演示