React Native Waveform Player原生绘制的语音消息

一个 Fabric 组件即可播放本地或远程音频文件，并渲染播放按钮、可拖动的动画波形、时间标签和倍速按钮。iOS 使用 Swift，Android 使用 Kotlin，播放与绘制循环中没有 JavaScript。

快速开始

这是什么？

API 参考

原生波形

圆角波形条直接在设备上从音频解码得到。加载期间显示占位条，播放头会精确到像素地填充当前波形条。

样式

拖动与倍速

在波形上任意位置按住并拖动即可跳转，在 ScrollView 中同样有效。点击倍速按钮可在你自定义的倍速列表中循环切换。

倍速与播放控制

受控或非受控

可以让组件自行管理播放状态和倍速，也可以通过 playing 和 speed 两个 props 由你的 state 驱动。

受控模式

后台播放

默认在应用进入后台时暂停。设置 playInBackground 即可继续播放，相关页面列出了 iOS 和 Android 的配置步骤。

后台播放

事件与 ref 方法

提供 onLoad、onPlayerStateChange、onTimeUpdate、onSeek 和 onEnd 事件，以及 ref 上的 play、pause、toggle、seekTo 和 setSpeed。

事件

原生 React Native 与 Expo

面向 New Architecture 的 Fabric 组件。可在 Expo development build 和 expo prebuild 中使用，不支持 Expo Go。

安装

npmyarnExpo

npm install react-native-waveform-player
cd ios && pod install

yarn add react-native-waveform-player
cd ios && pod install

npx expo install react-native-waveform-player
npx expo prebuild

系统要求和 Expo 的详细说明见安装。

渲染一条语音消息

tsx

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

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

在浏览器中试用

原生组件的网页近似效果，播放一段在浏览器中生成的短音频。布局和行为参照 iOS 实现；在设备上由原生代码绘制。

在样式调试台中可以修改颜色、波形条尺寸等更多参数。

真机效果

Android 上的示例应用，展示四种不同样式的语音消息播放器 — Android

还需要录音？

本库只负责播放和可视化音频。如需录制语音消息并显示实时波形，请使用姊妹库 react-native-waveform-recorder。

React Native Waveform Player原生绘制的语音消息

原生波形

拖动与倍速

受控或非受控

后台播放

事件与 ref 方法

原生 React Native 与 Expo

安装 ​

渲染一条语音消息 ​

在浏览器中试用 ​

真机效果 ​

还需要录音？ ​

安装

渲染一条语音消息

在浏览器中试用

真机效果

还需要录音？