React Native Waveform Player

English

Tiếng Việt
简体中文

English

Tiếng Việt
简体中文

Appearance

React Native Waveform PlayerVoice notes, drawn natively

One Fabric component plays any local or remote audio file and renders a play button, an animated waveform you can scrub, a time label and a speed pill. Swift on iOS, Kotlin on Android, no JavaScript in the playback or drawing loop.

Get started
What is it?
API reference
0:090:151.5x

Native waveform

Rounded bars decoded from the audio on the device, with placeholder bars while loading and a playhead that fills the current bar up to the exact pixel.

Styling

Scrub and speed

Press and drag anywhere on the waveform to seek, even inside a ScrollView. Tap the pill to cycle through your own list of speeds.

Speed and playback

Controlled or uncontrolled

Let the component manage play and speed itself, or drive them from your state with the playing and speed props.

Controlled mode

Background playback

Paused when the app goes to the background by default. Opt in with playInBackground; the page lists the iOS and Android setup.

Background playback

Events and ref methods

onLoad, onPlayerStateChange, onTimeUpdate, onSeek and onEnd, plus play, pause, toggle, seekTo and setSpeed on a ref.

Events

Bare React Native and Expo

Fabric component for the New Architecture. Works in Expo development builds and with expo prebuild, not in Expo Go.

Installation

Install ​

sh
npm install react-native-waveform-player
cd ios && pod install
sh
yarn add react-native-waveform-player
cd ios && pod install
sh
npx expo install react-native-waveform-player
npx expo prebuild

See Installation for requirements and Expo details.

Render a voice note ​

tsx
import { AudioWaveformView } from 'react-native-waveform-player';

<AudioWaveformView
  source={{ uri: 'https://example.com/voice-note.m4a' }}
  style={{ height: 56 }}
/>;

Try it in the browser ​

Web approximation of the native component, playing a short clip generated in your browser. Layout and behavior follow the iOS implementation; real rendering is native.

Change colors, bar size and more in the styling playground.

See it on a device ​

Example app on iOS with four voice-note players in different styles
iOS
Example app on Android with four voice-note players in different styles
Android

Need to record too? ​

This library plays and visualizes audio. To record voice notes with a live waveform, see the sister library react-native-waveform-recorder.

Released under the MIT License.