Приложение для записи - React native - Звук не сохраняется должным образом - PullRequest
Новая
       13

Приложение для записи - React native - Звук не сохраняется должным образом

1 голос
/ 06 октября 2019

Я создаю приложение для записи. После первой записи звук можно найти и воспроизвести в списке записей. Но после того, как я создал новую запись и сохранил ее, предыдущий звук больше не воспроизводился. Кто-нибудь знает проблему? Был ли я неправ при хранении? Я могу поделиться репозиторием, если кто-нибудь может мне помочь. Заранее спасибо! Ниже приведены фрагменты кода о том, как создать и сохранить звук:

** CREATE SOUND FILE

// экспортировать звуковой массив с информацией о звуке для дальнейшего использования

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>

** CURRENT RECORD FILE

// импорт звукового массива из создаваемого звукового файла 

    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>)
    ...)
...