react-mic：将weba音频转换为MP3，MP4或WAV的推荐选项

Question

我最近在我的应用中加入了react-mic。我的应用程序在前端使用React，在后端使用Rails。虽然我确实喜欢使用react-mic，但在将音频Blob转换为另一种格式（尤其是mp3，mp4甚至是wav）时遇到了麻烦。

我查看了react-mic文档和GitHub问题，以查看是否有建议的操作方案，但我所能看到的是开发人员需要在库外找到一些解决方案来完成转换。 react-mic的作者也正在研究格式转换选项，作为将来的增强功能。我是这方面的新手，很想听听其他人如何处理此事。请注意以下内容-作为POST提取请求的一部分，我的React代码获取音频Blob并将其发送到我的Rails后端。后端使用CarrierWave上载音频文件。看到react-mic的流行，我希望获得有关如何进行转换的指导：

这是我使用react-mic库的React代码：

    import React from 'react';
    import { ReactMic } from 'react-mic';

    const hasGetUserMedia = !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia || navigator.msGetUserMedia);

    class AudioMic extends React.Component {
        constructor(props){
        super(props)
        this.state = {
                recordAudio: false,
                blobAudio: null,
                blobURL: null
        };
        };

            startRecording = () => {
            this.setState({
              recordAudio: true
            });
          }

          stopRecording = () => {
            this.setState({
              recordAudio: false
            });
          }

            onStart = () => {
            console.log('You can tap into the onStart callback');
          }

          onStop = (blobAudio) => {
                this.setState({
                    blobAudio: blobAudio,
                    blobURL: blobAudio.blobURL
                });

                this.onUpload();
          };

            onUpload= () => {
                let reader = new FileReader()
                reader.onload = (event) => {
                    //save audio blob in FormData and use FileReader to get into proper format
                    let formData  = new FormData();
                    formData.append('audio', event.target.result);

                    fetch('/api/v1/user_response', {
                        credentials: 'same-origin',
                      method: 'POST',
                      body: formData,
                        headers: {
                            'Accept': 'application/json, */*'
                      }
                    }).then(response => {
                        if (response.ok) {
                            return response;
                        }
                        else {
                            let errorMessage = `${response.status} (${response.statusText})`, error = new Error(errorMessage);
                            throw(error);
                        }
                    })
                    .then(response => response.json())
                    .then(body => {
                        console.log('MADE IT HERE');
                        console.log(body);
                    })
                    .catch(error => console.error(`Error in fetch: ${error.message}`));
                };
                reader.readAsDataURL(this.state.blobAudio.blob);
            };

componentDidMount = () => {
        if(!hasGetUserMedia) {
            alert('Your browser cannot stream from your audio. Please switch to Chrome or Firefox.');
        }
    };

render() {
        return (
            <div>
<ReactMic
              className='oscilloscope'
              record={ this.state.recordAudio }
              backgroundColor='#FF4081'
              visualSetting='sinewave'
              audioBitsPerSecond= { 128000 }
              onStop={ this.onStop }
              onStart={ this.onStart }
              strokeColor='#000000'
                    />
            <div>
              <audio ref='audioSource' controls='controls' src={ this.state.blobURL }></audio>
            </div>
                    <Button animated='fade' onClick={ this.startRecording } >
                <Button.Content visible>Start Recording</Button.Content>
                <Button.Content hidden><Icon name='microphone' /></Button.Content>
                </Button>
                    <Button animated='fade' onClick={ this.stopRecording }>
                        <Button.Content visible>Stop Recording</Button.Content>
                        <Button.Content hidden><Icon name='stop' /></Button.Content>
                    </Button>
                    <Button animated='fade' onClick={ this.upload }>
                        <Button.Content visible>Upload Response</Button.Content>
                        <Button.Content hidden><Icon name='cloud upload' /></Button.Content>
                    </Button>
            </div>
        );
    };
};
这是我的音频文件的Rails上传器：

class UserResponseUploader < CarrierWave::Uploader::Base
  include CarrierWave::Audio

  if Rails.env.test?
    storage :file
  else
    storage :fog
  end


  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end
end
有什么建议吗？我曾尝试使用载波音频将音频转换为mp3，但发现自己陷入了一个兔子洞，其中提到了使用sox进行音频转换。前端的另一个JS库可以解决此问题吗？感谢所有帮助。预先感谢。

我最近在我的应用中加入了react-mic。我的应用程序在前端使用React，在后端使用Rails。虽然我确实喜欢使用react-mic，但在将音频Blob转换为另一个...

Answer 1

[好，我知道这是一个很老的问题，但我也为这个问题而苦苦挣扎。因此，我认为其他人将从该解决方案中受益。