ruby-on-rails - react 麦克风 : Recommended Options to Convert weba Audio to MP3, MP4 或 WAV

Question

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

我查看了 react-mic 文档和 GitHub 问题，看看是否有任何推荐的操作方案，但我所能看到的是，开发人员需要在库之外找到一些解决方案来处理转换。此外，react-mic 的作者正在研究格式转换选项作为 future 的增强功能。我是这一切的新手，很想听听其他人是如何处理这件事的。请注意以下几点——我的 React 代码获取音频 blob 并将其作为 POST 提取请求的一部分发送到我的 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 uploader :

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 库来解决？感谢所有帮助。提前致谢。

Answer 1

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

答案很简单。假设您想将音频文件转换为 mp3，那么您所要做的就是将以下代码添加为属性

mimeType='audio/mp3'

希望这至少对一个人有所帮助。