录音应用-React native-声音无法正确保存

时间:2019-10-06 14:01:02

标签: reactjs react-native audio-recording recording

我正在构建一个录音应用程序。首次录制后,可以在录制列表中找到声音并播放。但是,当我创建新记录并保存后,以前的声音将无法播放。有人知道这个问题吗?我在存储它时错了吗?如果有人可以帮助我,我可以共享git repo。提前致谢!以下是有关如何创建和存储声音的代码:

**创建声音文件

//导出包含有关声音信息的声音数组以供进一步使用

export let soundArray = [];

//此功能是用户点击播放并停止录制后会生成声音文件的功能

async _stopRecordingAndEnablePlayback(){

this.setState({
  isLoading: true
});
try {
  await this.recording.stopAndUnloadAsync();
} catch (error) {
  // Do nothing -- we are already unloaded.
}
const info = await this.recording.getURI();
console.log(`FILE INFO: ${JSON.stringify(info)}`);
await Audio.setAudioModeAsync({
  allowsRecordingIOS: false,
  interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX,
  playsInSilentModeIOS: true,
  playsInSilentLockedModeIOS: true,
  shouldDuckAndroid: true,
  interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX,
  playThroughEarpieceAndroid: false,
  staysActiveInBackground: true
});
const { sound, status } = await this.recording.createNewLoadedSoundAsync(
  {
    isLooping: true,
    isMuted: this.state.muted,
    volume: this.state.volume,
    rate: this.state.rate,
    shouldCorrectPitch: this.state.shouldCorrectPitch
  },
  this._updateScreenForSoundStatus
);
this.soundInfo = info;
this.sound = sound;

this.setState({
  isLoading: false
});

}

///在用户按下“创建新声音”按钮的JSX中,将创建新声音并将当前声音的信息从头开始推入数组并导出以供进一步使用

const newSound = {

       id: uuidv1(),
       name: this.state.name,
       desc: this.state.desc,
       sound: this.soundInfo
};


this.sounds.push(newSound);


soundArray = this.sounds;

**记录列表文件

//从创建声音文件导入

import { soundArray } from "./CreateRecord";

// JSX文件,记录列表,当用户按其中之一时,将导致选择的声音文件:

<View style={styles.background}>
  <Text>List Records</Text>
  <FlatList
    keyExtractor={item => item.id}
    data={soundArray}
    renderItem={({ item }) => {
      return (
        <TouchableOpacity
          onPress={() =>
            navigation.navigate("CurrentRecord", { id: item.id })
          }
        >
          <ListItem chevron title={item.name} description={item.desc} />
        </TouchableOpacity>
      );
    }}
  />
</View>

**当前记录文件

//从创建声音文件导入声音数组

    import { soundArray } from "./CreateRecord";


    export default class CurrentRecord extends React.Component {

    ...

    render() {

        const { navigation } = this.props;
        const id = navigation.getParam("id");
        this.sound = new Audio.Sound();

        if (!this.state.fontLoaded) {
          for (let i = 0; i < soundArray.length; i++) {
            if (soundArray[i].id === id) {
              this.currentSound = soundArray[i];
              console.log(this.currentSound);

              break;
            }
          }
          this.sound.loadAsync(this.currentSound.sound);
          this.sound.setOnPlaybackStatusUpdate(this._updateScreenForSoundStatus);
          return <View style={styles.emptyContainer} />;
        }

        if (!this.state.haveRecordingPermissions) {
           return(

...
// this is where user press play

    <View style={styles.playStopContainer}>
                  <TouchableHighlight
                    underlayColor={BACKGROUND_COLOR}
                    style={styles.wrapper}
                    onPress={this._onPlayPausePressed}
                  >
                    {this.state.isPlaying ? (
                      <Foundation name="pause" size={58} />
                    ) : (
                      <Foundation name="play" size={58} />
                    )}
                  </TouchableHighlight>)
    ...)

0 个答案:

没有答案