{"id":15286876,"url":"https://github.com/hyochan/react-native-audio-recorder-player","last_synced_at":"2025-05-13T23:05:44.210Z","repository":{"id":38386537,"uuid":"129062069","full_name":"hyochan/react-native-audio-recorder-player","owner":"hyochan","description":"react-native native module for audio recorder and player.","archived":false,"fork":false,"pushed_at":"2024-11-18T22:42:29.000Z","size":4093,"stargazers_count":767,"open_issues_count":163,"forks_count":226,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-05-10T06:03:22.876Z","etag":null,"topics":["audio-player","audio-recorder","java","kotlin","objective-c","react-native","swift","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hyochan.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-11T08:37:46.000Z","updated_at":"2025-05-09T03:39:48.000Z","dependencies_parsed_at":"2024-06-20T14:16:33.792Z","dependency_job_id":"09ba8474-d49c-455a-9d71-7844d0c62a07","html_url":"https://github.com/hyochan/react-native-audio-recorder-player","commit_stats":{"total_commits":419,"total_committers":52,"mean_commits":8.057692307692308,"dds":"0.49880668257756566","last_synced_commit":"8d866e7ddfc720f2125136de249253dfa5a44550"},"previous_names":["dooboolab/react-native-audio-recorder-player"],"tags_count":49,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyochan%2Freact-native-audio-recorder-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyochan%2Freact-native-audio-recorder-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyochan%2Freact-native-audio-recorder-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyochan%2Freact-native-audio-recorder-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hyochan","download_url":"https://codeload.github.com/hyochan/react-native-audio-recorder-player/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254040707,"owners_count":22004597,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio-player","audio-recorder","java","kotlin","objective-c","react-native","swift","typescript"],"created_at":"2024-09-30T15:18:49.047Z","updated_at":"2025-05-13T23:05:39.201Z","avatar_url":"https://github.com/hyochan.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/hyochan","https://paypal.me/dooboolab"],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-native-audio-recorder-player\n\n\u003cimg src=\"Logotype Primary.png\" width=\"70%\" height=\"70%\" /\u003e\n\n[![yarn Version](http://img.shields.io/npm/v/react-native-audio-recorder-player.svg?style=flat-square)](https://npmjs.org/package/react-native-audio-recorder-player)\n[![Downloads](http://img.shields.io/npm/dm/react-native-audio-recorder-player.svg?style=flat-square)](https://npmjs.org/package/react-native-audio-recorder-player)\n[![CI](https://github.com/hyochan/react-native-audio-recorder-player/actions/workflows/ci.yml/badge.svg)](https://github.com/hyochan/react-native-audio-recorder-player/actions/workflows/ci.yml)\n[![publish-package](https://github.com/hyochan/react-native-audio-recorder-player/actions/workflows/publish-package.yml/badge.svg)](https://github.com/hyochan/react-native-audio-recorder-player/actions/workflows/publish-package.yml)\n![License](http://img.shields.io/npm/l/react-native-audio-recorder-player.svg?style=flat-square)\n[![supports iOS](https://img.shields.io/badge/iOS-4630EB.svg?style=flat-square\u0026logo=APPLE\u0026labelColor=999999\u0026logoColor=fff)](https://itunes.apple.com/app/apple-store/id982107779)\n[![supports Android](https://img.shields.io/badge/Android-4630EB.svg?style=flat-square\u0026logo=ANDROID\u0026labelColor=A4C639\u0026logoColor=fff)](https://play.google.com/store/apps/details?id=host.exp.exponent\u0026referrer=www)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![LICENSE](http://img.shields.io/npm/l/@react-native-seoul/masonry-list.svg?style=flat-square)](https://npmjs.org/package/@react-native-seoul/masonry-list)\n\nThis is a react-native link module for audio recorder and player. This is not a playlist audio module and this library provides simple recorder and player functionalities for both `android` and `ios` platforms. This only supports default file extension for each platform. This module can also handle file from url.\n\n## Preview\n\n\u003cimg src=\"https://user-images.githubusercontent.com/27461460/117547014-3fe52000-b068-11eb-9f34-2bfc1e5092fd.gif\" width=300/\u003e\n\n## Free read\n\n- [Version 3 Release Note](https://medium.com/dooboolab/react-native-audio-player-and-recorder-v3-7697e25cd07)\n\n- Happy [Blog](https://medium.com/@dooboolab/react-native-audio-recorder-and-player-4aa5f26a666).\n\n## Breaking Changes\n\n- From version `3.0.+`, a critical migration has been done. Current version is not much different from version `2.0.+` in usability, but there are many changes internally. Also note that it supports `iOS` platform version `10.0` or newer.\n\n  1. Codebase has been re-written to [kotlin for Android](https://kotlinlang.org) and [swift for iOS](https://swift.org). Please follow the [post installation](https://github.com/hyochan/react-native-audio-recorder-player#post-installation) for this changes.\n\n     [iOS]\n\n     - [AVAudioPlayer](https://developer.apple.com/documentation/avfaudio/avaudioplayer) has been migrated to [AVPlayer](https://developer.apple.com/documentation/avfoundation/avplayer) which supports stream and more possibilities [#231](https://github.com/hyochan/react-native-audio-recorder-player/issues/231), [#245](https://github.com/hyochan/react-native-audio-recorder-player/issues/245), [#275](https://github.com/hyochan/react-native-audio-recorder-player/issues/275).\n\n  2. `pauseRecorder` and `resumeRecorder` features are added.\n     - **Caveat**\n       Android now requires `minSdk` of `24`.\n  3. Renamed callback variables.\n\n     ```ts\n     export type RecordBackType = {\n       isRecording?: boolean;\n       currentPosition: number;\n       currentMetering?: number;\n     };\n\n     export type PlayBackType = {\n       isMuted?: boolean;\n       currentPosition: number;\n       duration: number;\n     };\n     ```\n\n  4. `subscriptionDuration` offset not defaults to `0.5` which is `500ms`.\n     - Resolve [#273](https://github.com/hyochan/react-native-audio-recorder-player/issues/273)\n\n- There has been vast improvements in [#114](https://github.com/hyochan/react-native-audio-recorder-player/pull/114) which is released in `2.3.0`. We now support all `RN` versions without any version differentiating. See below installation guide for your understanding.\n\n## Migration Guide\n\n| 1.x.x                  | 2.x.x \u0026 3.x.x             |\n| ---------------------- | ------------------------- |\n| `startRecord`          | `startRecorder`           |\n|                        | `pauseRecorder` (3.x.x)   |\n|                        | `resumeRecorder` (3.x.x)  |\n| `stopRecord`           | `stopRecorder`            |\n| `startPlay`            | `startPlayer`             |\n| `stopPlay`             | `stopPlayer`              |\n| `pausePlay`            | `pausePlayer`             |\n| `resume`               | `resumePlayer`            |\n| `seekTo`               | `seekToPlayer`            |\n|                        | `setSubscriptionDuration` |\n| `addPlayBackListener`  | `addPlayBackListener`     |\n| `setRecordInterval`    | `addRecordBackListener`   |\n| `removeRecordInterval` | ``                        |\n|                        | `setVolume`               |\n\n## Getting started\n\n`$ yarn add react-native-audio-recorder-player`\n\n## Installation\n\n#### Using React Native \u003e= 0.61\n\n[iOS only]\n\n```sh\nnpx pod-install\n```\n\n#### Using React Native \u003c 0.60\n\n`$ react-native link react-native-audio-recorder-player`\n\n### Manual installation\n\n#### iOS\n\n1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`\n2. Go to `node_modules` ➜ `react-native-audio-recorder-player` and add `RNAudioRecorderPlayer.xcodeproj`\n3. In XCode, in the project navigator, select your project. Add `libRNAudioRecorderPlayer.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`\n4. Run your project (`Cmd+R`)\u003c\n\n#### Android\n\n1. Open up `android/app/src/main/java/[...]/MainApplication.java`\n\n- Add `import package com.dooboolab.audiorecorderplayer.RNAudioRecorderPlayerPackage;` to the imports at the top of the file\n- Add `new RNAudioRecorderPlayerPackage()` to the list returned by the `getPackages()` method\n\n2. Append the following lines to `android/settings.gradle`:\n   ```\n   include ':react-native-audio-recorder-player'\n   project(':react-native-audio-recorder-player').projectDir = new File(rootProject.projectDir, \t'../node_modules/react-native-audio-recorder-player/android')\n   ```\n3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:\n   ```\n     compile project(':react-native-audio-recorder-player')\n   ```\n\n## Post installation\n\n#### iOS\n\nOn _iOS_ you need to add a usage description to `Info.plist`:\n\n```xml\n\u003ckey\u003eNSMicrophoneUsageDescription\u003c/key\u003e\n\u003cstring\u003eGive $(PRODUCT_NAME) permission to use your microphone. Your record wont be shared without your permission.\u003c/string\u003e\n```\n\nAlso, add [swift bridging header](https://stackoverflow.com/questions/31716413/xcode-not-automatically-creating-bridging-header) if you haven't created one for `swift` compatibility.\n\n\u003cimg width=\"800\" alt=\"1\" src=\"https://user-images.githubusercontent.com/27461460/111863065-8be6e300-899c-11eb-8ad8-6811e0bd0fbd.png\"\u003e\n\n#### Android\n\nOn _Android_ you need to add a permission to `AndroidManifest.xml`:\n\n```xml\n\u003cuses-permission android:name=\"android.permission.RECORD_AUDIO\" /\u003e\n\u003cuses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" /\u003e\n\u003cuses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" /\u003e\n```\n\nAlso, android above `Marshmallow` needs runtime permission to record audio. Using [react-native-permissions](https://github.com/yonahforst/react-native-permissions) will help you out with this problem. Below is sample usage before when before staring the recording.\n\n```ts\nif (Platform.OS === 'android') {\n  try {\n    const grants = await PermissionsAndroid.requestMultiple([\n      PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,\n      PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,\n      PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,\n    ]);\n\n    console.log('write external storage', grants);\n\n    if (\n      grants['android.permission.WRITE_EXTERNAL_STORAGE'] ===\n        PermissionsAndroid.RESULTS.GRANTED \u0026\u0026\n      grants['android.permission.READ_EXTERNAL_STORAGE'] ===\n        PermissionsAndroid.RESULTS.GRANTED \u0026\u0026\n      grants['android.permission.RECORD_AUDIO'] ===\n        PermissionsAndroid.RESULTS.GRANTED\n    ) {\n      console.log('Permissions granted');\n    } else {\n      console.log('All required permissions not granted');\n      return;\n    }\n  } catch (err) {\n    console.warn(err);\n    return;\n  }\n}\n```\n\nLastly, you need to enable `kotlin`. Please change add the line below in `android/build.gradle`.\n\n```diff\nbuildscript {\n  ext {\n      buildToolsVersion = \"29.0.3\"\n+     // Note: Below change is necessary for pause / resume audio feature. Not for Kotlin.\n+     minSdkVersion = 24\n      compileSdkVersion = 29\n      targetSdkVersion = 29\n+     kotlinVersion = '1.6.10'\n\n      ndkVersion = \"20.1.5948944\"\n  }\n  repositories {\n      google()\n      jcenter()\n  }\n  dependencies {\n      classpath(\"com.android.tools.build:gradle:4.2.2\")\n  }\n...\n```\n\n## Methods\n\nAll methods are implemented with promises.\n\n| Func                     |                        Param                        |      Return       | Description                                                                                                         |\n| :----------------------- | :-------------------------------------------------: | :---------------: | :------------------------------------------------------------------------------------------------------------------ |\n| mmss                     |                  `number` seconds                   |     `string`      | Convert seconds to `minute:second` string                                                                           |\n| setSubscriptionDuration  |                                                     |      `void`       | Set default callback time when starting recorder or player. Default to `0.5` which is `500ms`                       |\n| addRecordBackListener    |                 `Function` callBack                 |      `void`       | Get callback from native module. Will receive `currentPosition`, `currentMetering` (if configured in startRecorder) |\n| removeRecordBackListener |                 `Function` callBack                 |      `void`       | Removes recordBack listener                                                                                         |\n| addPlayBackListener      |                 `Function` callBack                 |      `void`       | Get callback from native module. Will receive `duration`, `currentPosition`                                         |\n| removePlayBackListener   |                 `Function` callBack                 |      `void`       | Removes playback listener                                                                                           |\n| startRecorder            |    `\u003cstring\u003e` uri? `\u003cboolean\u003e` meteringEnabled?     |  `Promise\u003cvoid\u003e`  | Start recording. Not passing uri will save audio in default location.                                               |\n| pauseRecorder            |                                                     | `Promise\u003cstring\u003e` | Pause recording.                                                                                                    |\n| resumeRecorder           |                                                     | `Promise\u003cstring\u003e` | Resume recording.                                                                                                   |\n| stopRecorder             |                                                     | `Promise\u003cstring\u003e` | Stop recording.                                                                                                     |\n| startPlayer              | `string` uri? `Record\u003cstring, string\u003e` httpHeaders? | `Promise\u003cstring\u003e` | Start playing. Not passing the param will play audio in default location.                                           |\n| stopPlayer               |                                                     | `Promise\u003cstring\u003e` | Stop playing.                                                                                                       |\n| pausePlayer              |                                                     | `Promise\u003cstring\u003e` | Pause playing.                                                                                                      |\n| seekToPlayer             |                `number` milliseconds                | `Promise\u003cstring\u003e` | Seek audio.                                                                                                         |\n| setVolume                |                   `double` value                    | `Promise\u003cstring\u003e` | Set volume of audio player (default 1.0, range: 0.0 ~ 1.0).                                                         |\n\n## Able to customize recorded audio quality (from `2.3.0`)\n\n```\ninterface AudioSet {\n  AVSampleRateKeyIOS?: number;\n  AVFormatIDKeyIOS?: AVEncodingType;\n  AVModeIOS?: AVModeType;\n  AVNumberOfChannelsKeyIOS?: number;\n  AVEncoderAudioQualityKeyIOS?: AVEncoderAudioQualityIOSType;\n  AudioSourceAndroid?: AudioSourceAndroidType;\n  OutputFormatAndroid?: OutputFormatAndroidType;\n  AudioEncoderAndroid?: AudioEncoderAndroidType;\n}\n```\n\n\u003e More description on each parameter types are described in `index.d.ts`. Below is an example code.\n\n```ts\nconst audioSet: AudioSet = {\n  AudioEncoderAndroid: AudioEncoderAndroidType.AAC,\n  AudioSourceAndroid: AudioSourceAndroidType.MIC,\n  AVModeIOS: AVModeIOSOption.measurement,\n  AVEncoderAudioQualityKeyIOS: AVEncoderAudioQualityIOSType.high,\n  AVNumberOfChannelsKeyIOS: 2,\n  AVFormatIDKeyIOS: AVEncodingOption.aac,\n};\nconst meteringEnabled = false;\n\nconst uri = await this.audioRecorderPlayer.startRecorder(\n  path,\n  audioSet,\n  meteringEnabled,\n);\n\nthis.audioRecorderPlayer.addRecordBackListener((e: any) =\u003e {\n  this.setState({\n    recordSecs: e.currentPosition,\n    recordTime: this.audioRecorderPlayer.mmssss(Math.floor(e.currentPosition)),\n  });\n});\n```\n\n## Default Path\n\n- Default path for android uri is `{cacheDir}/sound.mp4`.\n- Default path for ios uri is `{cacheDir}/sound.m4a`.\n\n## Usage\n\n```javascript\nimport AudioRecorderPlayer from 'react-native-audio-recorder-player';\n\nconst audioRecorderPlayer = new AudioRecorderPlayer();\n\nonStartRecord = async () =\u003e {\n  const result = await this.audioRecorderPlayer.startRecorder();\n  this.audioRecorderPlayer.addRecordBackListener((e) =\u003e {\n    this.setState({\n      recordSecs: e.currentPosition,\n      recordTime: this.audioRecorderPlayer.mmssss(\n        Math.floor(e.currentPosition),\n      ),\n    });\n    return;\n  });\n  console.log(result);\n};\n\nonStopRecord = async () =\u003e {\n  const result = await this.audioRecorderPlayer.stopRecorder();\n  this.audioRecorderPlayer.removeRecordBackListener();\n  this.setState({\n    recordSecs: 0,\n  });\n  console.log(result);\n};\n\nonStartPlay = async () =\u003e {\n  console.log('onStartPlay');\n  const msg = await this.audioRecorderPlayer.startPlayer();\n  console.log(msg);\n  this.audioRecorderPlayer.addPlayBackListener((e) =\u003e {\n    this.setState({\n      currentPositionSec: e.currentPosition,\n      currentDurationSec: e.duration,\n      playTime: this.audioRecorderPlayer.mmssss(Math.floor(e.currentPosition)),\n      duration: this.audioRecorderPlayer.mmssss(Math.floor(e.duration)),\n    });\n    return;\n  });\n};\n\nonPausePlay = async () =\u003e {\n  await this.audioRecorderPlayer.pausePlayer();\n};\n\nonStopPlay = async () =\u003e {\n  console.log('onStopPlay');\n  this.audioRecorderPlayer.stopPlayer();\n  this.audioRecorderPlayer.removePlayBackListener();\n};\n```\n\n## TIPS\n\nIf you want to get actual uri from the record or play file to actually grab it and upload it to your bucket, just grab the resolved message when using `startPlay` or `startRecord` method like below.\n\nTo access the file with more reliability, please use [react-native-blob-util](https://www.npmjs.com/package/react-native-blob-util) or [react-native-file-access](https://github.com/alpha0010/react-native-file-access). See below for examples.\n\n`react-native-blob-util`\n```ts\nimport ReactNativeBlobUtil from 'react-native-blob-util'\n...\nconst dirs = ReactNativeBlobUtil.fs.dirs;\nconst path = Platform.select({\n  ios: 'hello.m4a',\n  android: `${dirs.CacheDir}/hello.mp3`,\n});\n\nconst uri = await audioRecorderPlayer.startRecord(path);\n```\n\nAlso, above example helps you to setup manual path to record audio. Not giving path param will record in `default` path as mentioned above.\n\nTo pass in specific URI in IOS, you need to append `file://` to the path. As an example using [RFNS](https://github.com/itinance/react-native-fs).\n\n```javascript\nimport RNFetchBlob from 'rn-fetch-blob';\n...\nconst dirs = RNFetchBlob.fs.dirs;\nconst path = Platform.select({\n  ios: `file://${RNFS.DocumentDirectoryPath}/hello.m4a`,\n  android: `${this.dirs.CacheDir}/hello.mp3`,\n});\n\nconst uri = await audioRecorderPlayer.startRecord(path);\n```\n\n`react-native-file-access`\n```ts\nimport { Dirs } from \"react-native-file-access\";\n...\nconst path = Platform.select({\n  ios: 'hello.m4a',\n  android: `${Dirs.CacheDir}/hello.mp3`,\n});\n\nconst uri = await audioRecorderPlayer.startRecord(path);\n```\n\n\n\n## Try yourself\n\n1. Goto `Example` folder by running `cd Example`.\n2. Run `yarn install \u0026\u0026 yarn start`.\n3. Run `yarn ios` to run on ios simulator and `yarn android` to run on your android device.\n\n## Special Thanks\n\n[mansya](https://github.com/mansya) - logo designer.\n\n## Help Maintenance\n\nI've been maintaining quite many repos these days and burning out slowly. If you could help me cheer up, buying me a cup of coffee will make my life really happy and get much energy out of it.\n\u003cbr/\u003e\n\u003ca href=\"https://www.buymeacoffee.com/hyochan\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/purple_img.png\" alt=\"Buy Me A Coffee\" style=\"height: auto !important;width: auto !important;\" \u003e\u003c/a\u003e\n[![Paypal](https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-100px.png)](https://paypal.me/dooboolab)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyochan%2Freact-native-audio-recorder-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhyochan%2Freact-native-audio-recorder-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyochan%2Freact-native-audio-recorder-player/lists"}