{ "componentChunkName": "component---src-templates-blog-post-jsx", "path": "/post/rn-audio-record/", "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"09daeeda-cfa4-5354-8a09-9d58f73e1f3b","excerpt":"こんにちは。 React Nativeで音声の録音機能を実装した時のメモです。 使用するライブラリはAndroidにも対応しているので、iOS/Android両方対応してみます。 つくったもの — Leko/ReactNative-KitchenSink: Kitchen sink of react-native…","html":"

こんにちは。
\nReact Nativeで音声の録音機能を実装した時のメモです。

\n

使用するライブラリはAndroidにも対応しているので、iOS/Android両方対応してみます。

\n\n

つくったもの

\n
\n

— Leko/ReactNative-KitchenSink: Kitchen sink of react-native

\n
\n

ここにおいてあります。
\nこの記事に関係する差分はこのPRになります。

\n

先の話ですが、今後React Nativeの実験的な記事を書いていくときにここにコードを置いていこうと思います。

\n

react-native-audioを導入

\n

jsierles/react-native-audioというライブラリを使ってみました。
\n他にも選択肢はあったんですが、Starが結構（執筆時点で417）ついていて、LicenseもMITなので採用しました。

\n
npm install react-native-audio --save\nreact-native link react-native-audio
\n

差分はこちらを確認して下さい

\n

Info.plistを編集

\n

マイクを扱うには、ユーザに許可を求めるために設定を書き換える必要があります。

\n

差分はこちらを確認して下さい

\n

iOS

\n

ios/ReactNativeKitchenSink/Info.plistに追加

\n
<key>NSMicrophoneUsageDescription</key>\n<string>This sample uses the microphone to record your speech and convert it to text.</string>
\n

<string>...</string>のところはなぜマイクを使う必要があるのかを記入します。

\n
\n

— [iOS 10] 各種ユーザーデータへアクセスする目的を記述することが必須になるようです ｜ Developers.IO

\n
\n

Android

\n

android/app/src/main/AndroidManifest.xmlに追加

\n
<uses-permission android:name=\"android.permission.RECORD_AUDIO\" />
\n

音声の仕様を決定する

\n

公式のCross-platform optionsを見てみると、
\niOS, Androidの共通項となるオーディオフォーマットはaacだけです。
\nということで、今回は.aacファイルとして録音した音声を保存することにします。

\n

ひとまず音になっていればいいので、サンプリングレートやチャンネル数は適当にしておきます。

\n

録音処理

\n

公式のUsageがやや複雑なので、もう少し簡素なものを実装しました。\nまるごと貼ると長くなってしまうので、全差分はこちらを確認して下さい。

\n

録音するための準備

\n

録音を開始する前に、ファイルパスやフォーマット、メタ情報などを与えておく必要があります。

\n
  async setUp () {\n    const options = {\n      SampleRate: 22050,    // CDと同じ\n      Channels: 1,          // モノラル\n      AudioQuality: 'Low',  // \n      AudioEncoding: 'aac', // iOS/Android両対応のフォーマット\n    }\n\n    return AudioRecorder.prepareRecordingAtPath(this.props.audioPath, options)\n  }
\n

録音する

\n

準備が整っていれば、AudioRecorder.startRecordingを呼ぶだけです。

\n
  async record () {\n    return await AudioRecorder.startRecording()\n  }
\n

録音中の経過時間を取得する

\n

iOS/AndroidともにAudioRecorder.onProgressというイベントハンドラが設定できます。
\nこれをstateやactionに渡してあげることで、何秒間録音しているかを表示したり、録音可能な秒数を制限する機能の実装などができると思います。

\n
  componentDidMount () {\n    // ...\n    AudioRecorder.onProgress = ({ currentTime }) => {\n      this.setState({ recordingTime: Math.floor(currentTime) })\n    }\n  }
\n

録音終了する（Android）

\n

Androidの場合はAudioRecorder.stopRecordingを呼ぶだけです。
\nなぜここが揃ってないのかわからないのですが、iOSは別の方法で完了をハンドリングします

\n
  async tearDown (success) {\n    this.setState({ recording: false, recorded: success, recordingTime: 0 })\n  }\n\n  async handleStop () {\n    if (!this.state.recording) {\n      return\n    }\n\n    const filePath = await AudioRecorder.stopRecording()\n    if (Platform.OS === 'android') {\n      await this.tearDown(true, filePath)\n    }\n  }
\n

録音終了する（iOS）

\n

iOS用の録音を終了する処理はAudioRecorder.onFinishedイベントハンドラから行います
\nこれは、Androidのほうで出てきたAudioRecorder.stopRecordingから内部的にコールされます
\ntearDownは先ほど貼ったコードと同じなので割愛します

\n
  componentDidMount () {\n    const isOK = flow(digger('status'), is('OK'))\n    AudioRecorder.onFinished = (data) => {\n      if (Platform.OS !== 'ios') {\n        return\n      }\n      this.tearDown(isOK(data))\n    }\n    // ...\n  }
\n

録音中のstate変更とUI

\n

上記コードの中ですでにsetStateが出ていることからもお察しの通り、
\nreact-native-audioは録音していることをあらわすUIは提供してくれません。自前で実装する必要があります。

\n

べた書きコンポーネントなのでやや読みづらいかもしれませんが、
\nコードを読めばどこが状態を書き換えるべきポイントかは分かるかと思います。
\nもしReduxな方ならactionに変えればいいし、他のFluxでも同様に、フックポイントにあたる部分を好みの通りに改変してもらえればと思います。

\n

録音した音声を再生する

\n

「あ、その機能はないんだ」感がややありますが、録音した音声を再生する手段が提供されていません。
\nですが、公式のデモにもある通り、react-native-soundを利用すれば簡単に再生できます。
\n名前がややこしいですが、audioは録音、soundは再生、覚えゲーです。混同しないようにご注意下さい。

\n

AAC形式の音声はiOS/Androidどちらでも再生可能なので、録音形式をAACにしておけば、互換性にさほど悩まずに済むと思います。

\n

あとがき

\n

公式のREADME見るだけではやはりハマるポイントがあり、まとめておきたいと思いました。
\n一度写経した上で削って最小構成にして理解していく、という方法が私が理解しやすいかなと思っています。

\n

次回以降の記事で、

\n\n

などについてものんびりと書き留めていこうと思っていますので、ぜひ今後の続編も読んでいただけると幸いです。

","timeToRead":7,"frontmatter":{"title":"React nativeで音声を録音する","tags":["JavaScript","React","React Native","iOS","Android"],"date":"July 25, 2017","featuredImage":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='165'%20viewBox='0%200%20400%20165'%20preserveAspectRatio='none'%3e%3cpath%20d='M206%206v6h194V0H206v6M95%2020c0%201-1%202-2%201-3%200-3%200-3%202s3%204%204%202h17c2%201%206%201%206-1%200-3%202-2%202%200%201%204%205%203%205-1s-1-5-2-3l-8%201-8%201h-1l-3-1c-1%201-2%200-2-1h-5M48%20145c0%202%200%202-1%201%200-2-1-2-1-1l-1-1c-1-1-1-1-1%201s-1%203-4%201c-1-2-3-2-3-1l-2-1c-3-1-3-1-4%201h-7l-1-2-1%201h-7l2%201%201%203c0%202%200%202%201%201l5-1h5l2-1%201-1c0%202%202%202%209%202h5c3%200%203-1%203-3%200-4-1-4-1%200'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.420289855072464,"src":"/static/1d908d149b3ad712f8636d800bf063bf/8eab8/featured-image.png","srcSet":"/static/1d908d149b3ad712f8636d800bf063bf/1ec58/featured-image.png 334w,\n/static/1d908d149b3ad712f8636d800bf063bf/ccb4a/featured-image.png 668w,\n/static/1d908d149b3ad712f8636d800bf063bf/8eab8/featured-image.png 1336w,\n/static/1d908d149b3ad712f8636d800bf063bf/85e22/featured-image.png 2004w,\n/static/1d908d149b3ad712f8636d800bf063bf/ebefb/featured-image.png 2058w","srcWebp":"/static/1d908d149b3ad712f8636d800bf063bf/f7e47/featured-image.webp","srcSetWebp":"/static/1d908d149b3ad712f8636d800bf063bf/cd98f/featured-image.webp 334w,\n/static/1d908d149b3ad712f8636d800bf063bf/7535d/featured-image.webp 668w,\n/static/1d908d149b3ad712f8636d800bf063bf/f7e47/featured-image.webp 1336w,\n/static/1d908d149b3ad712f8636d800bf063bf/f6b67/featured-image.webp 2004w,\n/static/1d908d149b3ad712f8636d800bf063bf/8aa9d/featured-image.webp 2058w","sizes":"(max-width: 1336px) 100vw, 1336px"}}}}}},"pageContext":{"slug":"/rn-audio-record/","previous":{"fields":{"slug":"/benefits-of-node-bluebird/"},"frontmatter":{"title":"ネイティブのPromiseより早いbluebirdのPromiseの便利機能をまとめてみた","tags":["Nodejs","JavaScript"]}},"next":{"fields":{"slug":"/special-chars-for-cli/"},"frontmatter":{"title":"CLIアプリに使えそうな特殊文字たちで遊んでみた","tags":["Nodejs","JavaScript","CLI"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}