React Native如何实现点击按钮启停录音并上传至Firebase等服务器

依赖准备 #

先安装录音和Firebase存储的核心依赖：

# 录音库
npm install react-native-audio-recorder-player
# Firebase存储（若未初始化Firebase项目，需先完成项目初始化）
npm install @react-native-firebase/storage

权限配置 #

iOS

在Info.plist中添加麦克风权限声明：

<key>NSMicrophoneUsageDescription</key>
<string>需要访问麦克风进行音频录制</string>

Android

在AndroidManifest.xml中添加必要权限：

<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

核心代码实现 #

以下是完整功能组件，包含一键启停录音、自动上传逻辑：

import React, { useState, useRef } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import AudioRecorderPlayer from 'react-native-audio-recorder-player';
import storage from '@react-native-firebase/storage';

const AudioRecorderUpload = () => {
  const [isRecording, setIsRecording] = useState(false);
  const [audioPath, setAudioPath] = useState('');
  const audioRecorderPlayer = useRef(new AudioRecorderPlayer()).current;

  // 一键切换录音状态：启动/停止+上传
  const toggleRecording = async () => {
    if (!isRecording) {
      try {
        const recordPath = await audioRecorderPlayer.startRecorder();
        setAudioPath(recordPath);
        setIsRecording(true);
        console.log('录音启动，文件路径：', recordPath);
      } catch (err) {
        console.error('启动录音失败：', err);
      }
    } else {
      try {
        const recordResult = await audioRecorderPlayer.stopRecorder();
        setIsRecording(false);
        console.log('录音停止，时长：', recordResult.duration);
        // 触发上传逻辑
        await uploadAudioToFirebase(audioPath);
      } catch (err) {
        console.error('停止录音或上传失败：', err);
      }
    }
  };

  // 上传音频到Firebase存储
  const uploadAudioToFirebase = async (localPath) => {
    if (!localPath) return;
    
    // 生成唯一文件名，防止覆盖
    const uniqueFileName = `recordings/${Date.now()}.m4a`;
    const storageRef = storage().ref(uniqueFileName);

    try {
      await storageRef.putFile(localPath);
      // 可选：获取文件下载链接，用于后续访问
      const downloadUrl = await storageRef.getDownloadURL();
      console.log('上传成功，下载链接：', downloadUrl);
      // 此处可将下载链接存入Firebase数据库或本地存储
    } catch (err) {
      console.error('上传音频失败：', err);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity
        onPress={toggleRecording}
        style={{
          paddingHorizontal: 32,
          paddingVertical: 16,
          backgroundColor: isRecording ? '#ff3b30' : '#007aff',
          borderRadius: 8,
        }}
      >
        <Text style={{ color: 'white', fontSize: 17, fontWeight: '500' }}>
          {isRecording ? '停止录音' : '开始录音'}
        </Text>
      </TouchableOpacity>
    </View>
  );
};

export default AudioRecorderUpload;

关键细节说明 #

• 用useRef保存录音实例，避免组件重渲染时重复初始化
• 录音默认格式为m4a，可通过startRecorder的参数自定义格式（如mp3）
• 上传时用时间戳生成唯一文件名，确保存储的文件不会被覆盖
• 可根据需求扩展：添加录音时长显示、波形动画，或上传成功后的UI提示

内容的提问来源于stack exchange，提问作者Proger228