0바이트 레코드 파일

18985 단어 react-native-audio

묘사

react 로컬 오디오: 4.1.3
반응: 0.55.4
반응: 16.4.0
로컬 사운드를 사용하시겠습니까?아니오.
오디오 파일을 녹음하려고 시도하지만, 끝 파일은 0바이트를 보존합니다
아행grep

ReactNativeJS: Finished recording of duration 6 seconds at path: /data/user/0/myAPP/files/test.aac and size of 0 bytes


녹음기.onProgress=(데이터)=>{
위문하다.로그(data.currentMetering, data.currentPeakMetering)
};

ReactNativeJS: undefined, undefined

토론 #1

resact native fs

토론 #2

의stat(path)@chinnr 힌트 감사합니다. 오디오를 녹음한 코드에 대해 질문이 하나 더 있습니다.stat(path)는 어디에 두시겠습니까?
주 오디오 경로에서?아니면 마지막에 녹음하는 거예요?
컨디션
this.state = {
      currentTime: 0.0,
      recording: false,
      paused: false,
      stoppedRecording: false,
      finished: false,
      audioPath: AudioUtils.DocumentDirectoryPath + '/test.aac',
      hasPermission: undefined,
    };
버튼 클릭
onRecordButtonClick(){
    //Stop recording if already start
    if (this.state.recording) {
      this._stopAudio();
      return;
    }

    this._checkAudioPermission().then((hasPermission) => {
      this.setState({ hasPermission });

      if (!hasPermission) return;

      this.prepareRecordingPath(this.state.audioPath);

      AudioRecorder.onProgress = (data) => {
        console.log(data.currentMetering, data.currentPeakMetering)

        this.setState({currentTime: Math.floor(data.currentTime)});
      };

      AudioRecorder.onFinished = (data) => {
        // Android callback comes in the form of a promise instead.
        if (Platform.OS === 'ios') {
          this._finishRecording(data.status === "OK", data.audioFileURL, data.audioFileSize);
        }
      };

      this._recordAudio();
    });
  }
오디오 기능
```
기록 경로 준비(오디오 경로)
녹음기.기록 경로 준비(오디오 경로)
샘플링기:22050,
채널: 1,
오디오 품질: 낮음
오디오 인코딩: "aac",
오디오 인코딩 비트레이트: 32000
});
}
_checkAudioPermission(){
(Platform.os!='android') {
약속에 보답하다.결심
}
const rationale = {
  'title': 'Microphone Permission',
  'message': 'AudioExample needs access to your microphone so you can record audio.'
};

return PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, rationale)
  .then((result) => {
    console.log('Permission result:', result);
    return (result === true || result === PermissionsAndroid.RESULTS.GRANTED);
  });
}
async_recordAudio(){
(이 상태 로깅)
위문하다.경고(기록됨!);
이stopAudio();
회귀
}
if (!this.state.hasPermission) {
  console.warn('Can\'t record, no permission granted!');
  return;
}

if(this.state.stoppedRecording){
  this.prepareRecordingPath(this.state.audioPath);
}

this.setState({recording: true, paused: false});

try {
  const filePath = await AudioRecorder.startRecording();
} catch (error) {
  console.error(error);
}
}
비동기식 stopAudio()
만약(!this.state.recording)
위문하다.경고("멈출 수 없어, 녹음할 수 없어!");
회귀
}
this.setState({stoppedRecording: true, recording: false, paused: false});

try {
  const filePath = await AudioRecorder.stopRecording();

  if (Platform.OS === 'android') {
    this._finishRecording(true, filePath);
  }
  return filePath;
} catch (error) {
  console.error(error);
}
}
finishRecording(성공, 파일 경로, 파일 크기)
이거.setState({finished:didcessfuel});
위문하다.로그("####didcessfuel", didcessfuel);
위문하다.로그(파일 경로, filePath);
RNFS.moveFile(FsUtils.stat(filePath), '/device-path/sound.aac');
console.log(`Finished recording of duration ${this.state.currentTime} seconds at path: ${filePath} and size of ${fileSize || 0} bytes`);
}
```

토론 #셋

AudioRecorder.onProgress = (data) => { console.log(data.currentMetering, data.currentPeakMetering) };

ReactNativeJS: undefined, undefined


나도 같은 문제가 있는데, 어떻게 해결해야 합니까?

토론 #4

image
image
打印出来的录音进度偶然会为0?

토론 #5

내 예에서 AudioExample 옵션을 추가하고 코드를 변경하여 레코드 파일을 서버에 업로드하는 중
가족:
npm i axios
'React'에서 React, {Component} 가져오기;
수입
평가학,
스타일시트,
텍스트
관점
고광택 터치,
플랫폼
라이센스 Sandroid,
} 리액션 본기에서
"axios"에서 axios 가져오기;
"react native Sound"에서 사운드 가져오기;
"react native audio"에서 {Audio Recorder, Audio Utils} 가져오기;
클래스 AudioExample 확장 구성 요소
state = {
  currentTime: 0.0,
  recording: false,
  paused: false,
  stoppedRecording: false,
  finished: false,
  audioPath: AudioUtils.DocumentDirectoryPath + '/test.aac',
  hasPermission: undefined,
};

prepareRecordingPath(audioPath){
  AudioRecorder.prepareRecordingAtPath(audioPath, {
    SampleRate: 22050,
    Channels: 1,
    AudioQuality: "Low",
    AudioEncoding: "aac",
    AudioEncodingBitRate: 32000
  });
}

componentDidMount() {
  this._checkPermission().then((hasPermission) => {
    this.setState({ hasPermission });

    if (!hasPermission) return;

    this.prepareRecordingPath(this.state.audioPath);

    AudioRecorder.onProgress = (data) => {
      this.setState({currentTime: Math.floor(data.currentTime)});
    };

    AudioRecorder.onFinished = (data) => {
      // Android callback comes in the form of a promise instead.
      if (Platform.OS === 'ios') {
        this._finishRecording(data.status === "OK", data.audioFileURL, data.audioFileSize);
      }
    };
  });
}

_checkPermission() {
  if (Platform.OS !== 'android') {
    return Promise.resolve(true);
  }

  const rationale = {
    'title': 'Microphone Permission',
    'message': 'AudioExample needs access to your microphone so you can record audio.'
  };

  return PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, rationale)
    .then((result) => {
      console.log('Permission result:', result);
      return (result === true || result === PermissionsAndroid.RESULTS.GRANTED);
    });
}

_renderButton(title, onPress, active) {
  var style = (active) ? styles.activeButtonText : styles.buttonText;

  return (
    <TouchableHighlight style={styles.button} onPress={onPress}>
      <Text style={style}>
        {title}
      </Text>
    </TouchableHighlight>
  );
}

_renderPauseButton(onPress, active) {
  var style = (active) ? styles.activeButtonText : styles.buttonText;
  var title = this.state.paused ? "RESUME" : "PAUSE";
  return (
    <TouchableHighlight style={styles.button} onPress={onPress}>
      <Text style={style}>
        {title}
      </Text>
    </TouchableHighlight>
  );
}

async _pause() {
  if (!this.state.recording) {
    console.warn('Can\'t pause, not recording!');
    return;
  }

  try {
    const filePath = await AudioRecorder.pauseRecording();
    this.setState({paused: true});
  } catch (error) {
    console.error(error);
  }
}

async _resume() {
  if (!this.state.paused) {
    console.warn('Can\'t resume, not paused!');
    return;
  }

  try {
    await AudioRecorder.resumeRecording();
    this.setState({paused: false});
  } catch (error) {
    console.error(error);
  }
}

async _stop() {
  if (!this.state.recording) {
    console.warn('Can\'t stop, not recording!');
    return;
  }

  this.setState({stoppedRecording: true, recording: false, paused: false});

  try {
    const filePath = await AudioRecorder.stopRecording();

    if (Platform.OS === 'android') {
      this._finishRecording(true, filePath);
    }
    return filePath;
  } catch (error) {
    console.error(error);
  }
}

async _play() {
  if (this.state.recording) {
    await this._stop();
  }

  // These timeouts are a hacky workaround for some issues with react-native-sound.
  // See https://github.com/zmxv/react-native-sound/issues/89.
  setTimeout(() => {
    var sound = new Sound(this.state.audioPath, '', (error) => {
      if (error) {
        console.log('failed to load the sound', error);
      }
    });

    setTimeout(() => {
      sound.play((success) => {
        if (success) {
          console.log('successfully finished playing');
        } else {
          console.log('playback failed due to audio decoding errors');
        }
      });
    }, 100);
  }, 100);
}

async _record() {
  if (this.state.recording) {
    console.warn('Already recording!');
    return;
  }

  if (!this.state.hasPermission) {
    console.warn('Can\'t record, no permission granted!');
    return;
  }

  if(this.state.stoppedRecording){
    this.prepareRecordingPath(this.state.audioPath);
  }

  this.setState({recording: true, paused: false});

  try {
    const filePath = await AudioRecorder.startRecording();
  } catch (error) {
    console.error(error);
  }
}

_finishRecording(didSucceed, filePath) {
  this.setState({ finished: didSucceed });
  console.log(`Finished recording of duration ${this.state.currentTime} seconds at path: ${filePath}`);

    let ext = 'aac';
    let data = new FormData();
    data.append('file', {
        uri:`file://${filePath}`,
        name:`recording.${ext}`,
        type:`audio/${ext}`
    });

    //Upload file to server
    const url = "YOUR_END_POINT";
    let headers = {};
    headers['Content-Type'] = 'multipart/form-data;';

    axios.post(url, data, {headers:headers});
}

render() {

  return (
    <View style={styles.container}>
      <View style={styles.controls}>
        {this._renderButton("RECORD", () => {this._record()}, this.state.recording )}
        {this._renderButton("PLAY", () => {this._play()} )}
        {this._renderButton("STOP", () => {this._stop()} )}
        {/* {this._renderButton("PAUSE", () => {this._pause()} )} */}
        {this._renderPauseButton(() => {this.state.paused ? this._resume() : this._pause()})}
        <Text style={styles.progressText}>{this.state.currentTime}s</Text>
      </View>
    </View>
  );
}
}
var styles = 스타일시트.창조({
컨테이너:
flex:1,
배경색: "2b608a",
},
제어:
내용 변호: "중심",
항목 정렬: 가운데 맞춤,
flex:1,
},
진행 텍스트:
paddingTop:50,
사이즈:50,
색상:"ff"
},
버튼:
채우기:20
},
버튼 텍스트 사용 안 함:
색상: "#eee"
},
버튼 텍스트:
사이즈:20,
색상:"ff"
},
activeButtonText:{
사이즈:20,
색상: "B81F00"
}
});
기본 오디오 샘플 내보내기;
`

토론 #6

@expouic 제발, iOS에서 어떻게 녹음했어요?stat (경로) 를 사용하십니까?나는 그 문제에 너무 오래 빠졌다

토론 #7

. 이 문제에 대해 무슨 해결 방법이 있습니까?

토론 #8

any fix for this problem please ?


안드로이드 메소드 녹음기.stopRecording은 파일에 기록된 파일 경로만 되돌려주고 파일 크기가 포함된 데이터 구조는 되돌려주지 않습니다.ios에서 파일 크기를 되돌려줍니다.따라서 컨트롤 데스크톱에서 0 바이트가 기록되어 있다는 메시지를 보면 오류가 발생합니다.
바로 여기에서 언급한 바와 같다

using stat(path) by react-native-fs


이 방법을 사용하여 파일 크기를 검색할 수 있습니다.stopRecording 방법을stat에 반환하는 파일 경로를 매개 변수로 제공합니다.

토론 #9

json 데이터를 통해audioPath

토론 #10

On this my example, i'm using and changing code from AudioExample adding option to upload record file to server

Dependences: npm i axios

`import React, {Component} from 'react'; import { AppRegistry, StyleSheet, Text, View, TouchableHighlight, Platform, PermissionsAndroid, } from 'react-native'; import axios from 'axios'; import Sound from 'react-native-sound'; import {AudioRecorder, AudioUtils} from 'react-native-audio';

class AudioExample extends Component {

``` state = { currentTime: 0.0, recording: false, paused: false, stoppedRecording: false, finished: false, audioPath: AudioUtils.DocumentDirectoryPath + '/test.aac', hasPermission: undefined, };

prepareRecordingPath(audioPath){ AudioRecorder.prepareRecordingAtPath(audioPath, { SampleRate: 22050, Channels: 1, AudioQuality: "Low", AudioEncoding: "aac", AudioEncodingBitRate: 32000 }); }

componentDidMount() { this._checkPermission().then((hasPermission) => { this.setState({ hasPermission });

if (!hasPermission) return;

this.prepareRecordingPath(this.state.audioPath);

AudioRecorder.onProgress = (data) => {
  this.setState({currentTime: Math.floor(data.currentTime)});
};

AudioRecorder.onFinished = (data) => {
  // Android callback comes in the form of a promise instead.
  if (Platform.OS === 'ios') {
    this._finishRecording(data.status === "OK", data.audioFileURL, data.audioFileSize);
  }
};

}); }

_checkPermission() { if (Platform.OS !== 'android') { return Promise.resolve(true); }

const rationale = { 'title': 'Microphone Permission', 'message': 'AudioExample needs access to your microphone so you can record audio.' };

return PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, rationale) .then((result) => { console.log('Permission result:', result); return (result === true || result === PermissionsAndroid.RESULTS.GRANTED); }); }

_renderButton(title, onPress, active) { var style = (active) ? styles.activeButtonText : styles.buttonText;

return ( {title} ); }

_renderPauseButton(onPress, active) { var style = (active) ? styles.activeButtonText : styles.buttonText; var title = this.state.paused ? "RESUME" : "PAUSE"; return ( {title} ); }

async _pause() { if (!this.state.recording) { console.warn('Can\'t pause, not recording!'); return; }

try { const filePath = await AudioRecorder.pauseRecording(); this.setState({paused: true}); } catch (error) { console.error(error); } }

async _resume() { if (!this.state.paused) { console.warn('Can\'t resume, not paused!'); return; }

try { await AudioRecorder.resumeRecording(); this.setState({paused: false}); } catch (error) { console.error(error); } }

async _stop() { if (!this.state.recording) { console.warn('Can\'t stop, not recording!'); return; }

this.setState({stoppedRecording: true, recording: false, paused: false});

try { const filePath = await AudioRecorder.stopRecording();

if (Platform.OS === 'android') {
  this._finishRecording(true, filePath);
}
return filePath;

} catch (error) { console.error(error); } }

async _play() { if (this.state.recording) { await this._stop(); }

// These timeouts are a hacky workaround for some issues with react-native-sound. // See https://github.com/zmxv/react-native-sound/issues/89. setTimeout(() => { var sound = new Sound(this.state.audioPath, '', (error) => { if (error) { console.log('failed to load the sound', error); } });

setTimeout(() => {
  sound.play((success) => {
    if (success) {
      console.log('successfully finished playing');
    } else {
      console.log('playback failed due to audio decoding errors');
    }
  });
}, 100);

}, 100); }

async _record() { if (this.state.recording) { console.warn('Already recording!'); return; }

if (!this.state.hasPermission) { console.warn('Can\'t record, no permission granted!'); return; }

if(this.state.stoppedRecording){ this.prepareRecordingPath(this.state.audioPath); }

this.setState({recording: true, paused: false});

try { const filePath = await AudioRecorder.startRecording(); } catch (error) { console.error(error); } }

_finishRecording(didSucceed, filePath) { this.setState({ finished: didSucceed }); console.log(Finished recording of duration ${this.state.currentTime} seconds at path: ${filePath});

let ext = 'aac';
let data = new FormData();
data.append('file', {
    uri:`file://${filePath}`,
    name:`recording.${ext}`,
    type:`audio/${ext}`
});

//Upload file to server
const url = "YOUR_END_POINT";
let headers = {};
headers['Content-Type'] = 'multipart/form-data;';

axios.post(url, data, {headers:headers});

}

render() {

return ( {this._renderButton("RECORD", () => {this._record()}, this.state.recording )} {this._renderButton("PLAY", () => {this._play()} )} {this._renderButton("STOP", () => {this._stop()} )} {/ {this._renderButton("PAUSE", () => {this._pause()} )} /} {this._renderPauseButton(() => {this.state.paused ? this._resume() : this._pause()})} {this.state.currentTime}s ); } ```

}

var styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#2b608a", }, controls: { justifyContent: 'center', alignItems: 'center', flex: 1, }, progressText: { paddingTop: 50, fontSize: 50, color: "#fff" }, button: { padding: 20 }, disabledButtonText: { color: '#eee' }, buttonText: { fontSize: 20, color: "#fff" }, activeButtonText: { fontSize: 20, color: "#B81F00" }

});

export default AudioExample; `

를 어떻게 보내는지
만약 내가 내용 유형을 선택한다면: - application/json은요

좋은 웹페이지 즐겨찾기