Nativeで音声の録音機能を実装した時のメモです。使用するライブラリはAndroidにも対応しているので、iOS/Android両方対応してみます。react-nativeここにおいてあります。この記事に関係する差分はこのPRになります。Nativeの実験的な記事を書いていくときにここにコードを置いていこうと思います。react-native-audioを導入jsierles/react-native-audioというライブラリを使ってみました。他にも選択肢はあったんですが、Starが結構(執筆時点で417)ついていて、LicenseもMITなので採用しました。react-native-audio差分はこちらを確認して下さいInfo.plistを編集マイクを扱うには、ユーザに許可を求めるために設定を書き換える必要があります。text.</string><string>...</string>のところはなぜマイクを使う必要があるのかを記入します。Androidの共通項となるオーディオフォーマットはaacだけです。いうことで、今回は.aacファイルとして録音した音声を保存することにします。音になっていればいいので、サンプリングレートやチャンネル数は適当にしておきます。公式のUsageがやや複雑なので、もう少し簡素なものを実装しました。まるごと貼ると長くなってしまうので、全差分はこちらを確認して下さい。録音を開始する前に、ファイルパスやフォーマット、メタ情報などを与えておく必要があります。}録音する準備が整っていれば、AudioRecorder.startRecordingを呼ぶだけです。}録音中の経過時間を取得するiOS/AndroidともにAudioRecorder.onProgressというイベントハンドラが設定できます。これをstateやactionに渡してあげることで、何秒間録音しているかを表示したり、録音可能な秒数を制限する機能の実装などができると思います。}録音終了する(Android)Androidの場合はAudioRecorder.stopRecordingを呼ぶだけです。}録音中のstate変更とUI上記コードの中ですでにsetStateが出ていることからもお察しの通り、react-native-audioは録音していることをあらわすUIは提供してくれません。自前で実装する必要があります。べた書きコンポーネントなのでやや読みづらいかもしれませんが、コードを読めばどこが状態を書き換えるべきポイントかは分かるかと思います。Reduxな方ならactionに変えればいいし、他のFluxでも同様に、フックポイントにあたる部分を好みの通りに改変してもらえればと思います。録音した音声を再生する「あ、その機能はないんだ」感がややありますが、録音した音声を再生する手段が提供されていません。公式のデモにもある通り、react-native-soundを利用すれば簡単に再生できます。名前がややこしいですが、audioは録音、soundは再生、覚えゲーです。混同しないようにご注意下さい。AAC形式の音声はiOS/Androidどちらでも再生可能なので、録音形式をAACにしておけば、互換性にさほど悩まずに済むと思います。あとがき公式のREADME見るだけではやはりハマるポイントがあり、まとめておきたいと思いました。一度写経した上で削って最小構成にして理解していく、という方法が私が理解しやすいかなと思っています。音声メディアで出てくるファイルの形式・オーディオコーデックこの録音した音声をS3にアップロードしたり、といった音声メディアの取扱いなどについてものんびりと書き留めていこうと思っていますので、ぜひ今後の続編も読んでいただけると幸いです。