🎤 React Native でマイク録音機能を実装してみた

皆さん、こんにちは。

今回は「🎤 React Native でマイク録音機能を実装してみた」について紹介させていただきます。

🧩 使用ライブラリ

音声録音を行うには、ネイティブ側の処理が必要なため、以下のライブラリを使用しました。

npm install react-native-audio-recorder-player
npx pod-install

react-native-audio-recorder-playerは iOS/Android双方に対応しており、録音・再生ともに一通りの機能をサポートしています。

📱 権限の設定

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" />

Android 6.0 以降ではランタイムパーミッションが必要です。PermissionsAndroid を使って許可をリクエストします。

iOS

Info.plist に以下を追加：

<key>NSMicrophoneUsageDescription</key>
<string>音声を録音するためにマイクを使用します</string>

🛠️ 録音処理の実装

以下は、録音の開始・停止を実装したコードです：

import React, { useState, useRef } from 'react';
import { View, Button, PermissionsAndroid, Platform } from 'react-native';
import AudioRecorderPlayer from 'react-native-audio-recorder-player';

const Recorder = () => {
  const [isRecording, setIsRecording] = useState(false);
  const recorderPlayer = useRef(new AudioRecorderPlayer()).current;

  const onStartRecord = async () => {
    if (Platform.OS === 'android') {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.RECORD_AUDIO
      );
      if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
        console.warn('マイクの権限がありません');
        return;
      }
    }

    const result = await recorderPlayer.startRecorder();
    console.log('録音開始', result);
    setIsRecording(true);
  };

  const onStopRecord = async () => {
    const result = await recorderPlayer.stopRecorder();
    console.log('録音終了', result);
    setIsRecording(false);
  };

  return (
    <View>
      <Button
        title={isRecording ? '録音停止' : '録音開始'}
        onPress={isRecording ? onStopRecord : onStartRecord}
      />
    </View>
  );
};

export default Recorder;

▶️ 録音した音声の再生

録音したファイルのパスは stopRecorder() の戻り値として得られます。それを startPlayer(path) に渡せば再生できます。

await recorderPlayer.startPlayer(recordedFilePath);

💡 ハマりポイント

• iOS シミュレーターではマイク録音はできません。実機でテストしてください。
• Android のパーミッションは非常に重要。WRITE_EXTERNAL_STORAGE がないと録音できない端末もありました。
• ファイル保存先は iOS/Android で異なるため、戻り値をログで確認しておくと安心です。

✅ まとめ

React Native で音声録音機能を追加するのは、ライブラリを使えば意外と簡単でした！アプリに ボイスメモ や チャット録音 のような機能を追加したい方にはおすすめです。

今日は以上です。

ありがとうございました。
よろしくお願いいたします。