Question

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

我查看了react-mic文档和GitHub问题，看看是否有任何推荐的行动方案，但我只能看到开发人员需要在库之外找到一些解决方案来处理转换。反应麦克风的作者也在考虑将格式转换选项作为未来的增强功能。我是这一切的新手，并且很乐意听到其他人如何照顾这一点。请注意以下内容 - 我的React代码获取音频blob并将其作为POST获取请求的一部分发送到我的Rails后端。后端使用CarrierWave上传音频文件。看到反应式麦克风的普及，我希望得到关于如何处理转换的指导：

这是我使用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

有什么建议吗？我尝试使用carrierwave-audio转换为mp3，但我发现自己走下了一个兔子洞，提到使用sox进行音频转换。这是可以用前端的另一个JS库来处理的吗？所有帮助表示赞赏。提前谢谢。

Answer 1

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

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

mimeType='audio/mp3'

希望这可以帮助至少一个人。

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

1 个答案: