react-native - React Native - 如何从录制的音频缓冲区数据创建音频文件

Question

我正在尝试使用 React Native 创建一个录制应用程序。目前我正在使用一个 npm 包react-native-audio-record来录制似乎工作正常的音频。

但是，当我得到文件时，它会导致一个空文件夹，并且文件系统react-native-fs都在返回，那里没有文件。

话虽这么说，我现在正在缓冲文件并获取音频二进制数据，如下所示

{"data": [253, 75, 30, 174, 207, 230, 145, 233, 101, 203, 242, 226, 110, 182, 171, 203, 240, 222, 189, 233, 104, 165, 234, 255, 10, 138, 222, 74, 41, 174, 149, 171, 104, 175, 240, 222, 190, 39, 30, 179, 255, 66, 215, 176, 121, 212, 63, 133, 15, 142, 62, 227, 158, 253, 248, 13, 64, 243, 225, 66, 224, 94, 65, 3, 158, 248, 11, 191, 221, 106, 214, 191, 10, 137, 237, 106, 41, 222, 174, 207, 195, 106, 214, 191, 2, 154, 101, 137, 198, 173, 138, 137, 255, 8, 31, 57, 227, 125, 2, 251, 192, 187, 215, 238, 4, 215, 159, 128, 223, 126, 254, 208, 48, 60, 243, 142, 182, 247, 64, 192, 252, 58, 28, 186, 103, 167, 182, 207, 237, 122, 203, 112, 106], "type": "Buffer"}

我有两个问题：

1. 我该如何处理这些数据？我尝试使用react-native-fs以下错误编写文件。我是否将缓冲区数据上传到我的服务器，然后写入文件并将其发送回？

• 写入文件错误

 Possible Unhandled Promise Rejection (id: 0):
TypeError: string.charCodeAt is not a function. (In 'string.charCodeAt(counter++)', 'string.charCodeAt' is undefined)
ucs2decode@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:168299:34
utf8encode@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:168373:34
writeFile@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:167959:40
onRecordPause$@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:165688:47
tryCatch@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:31025:23
invoke@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:31201:32
tryCatch@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:31025:23
invoke@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:31101:30
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:31111:21
tryCallOne@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:6202:16
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:6303:27
_callTimer@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:32952:17
_callImmediatesPass@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:32988:19
callImmediates@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:33206:33
callImmediates@[native code]
__callImmediates@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:5638:35
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:5424:34
__guard@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:5621:15
flushedQueue@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:5423:21
flushedQueue@[native code]
invokeCallbackAndReturnFlushedQueue@[native code]

2. 当我手动转到文件的位置时，我可以收听文件，但是当我尝试使用react-native-fsI get获取文件时Error: The file “fileName.wav” couldn’t be opened.。为什么我不能打开WAV。

请参见下面的代码。

   // When user hits the pause icon.
  const onRecordPause = async () => {
    const audioFile = await AudioRecord.stop();
    const bufferFile = Buffer.from(audioFile, 'base64');
    const writeToPath = RNFS.DocumentDirectoryPath + '/test.wav';

  // write the file
    RNFS.writeFile(writeToPath, bufferFile, 'utf8')
      .then((success) => {
        console.log('FILE WRITTEN!');
      })
      .catch((err) => {
        console.log(err.message);
      });
    return setRecordingStatus("PAUSED");
  };

标签： react-nativeaudiobufferaudio-player