Skip to content

React Native Waveform RecorderGhi âm với dạng sóng native theo thời gian thực

Một view Fabric cho iOS và Android để ghi âm, vẽ dạng sóng trên UI thread, nghe lại rồi ghi tiếp, và trả về tệp âm thanh kèm 64 cột sẵn sàng cho bong bóng chat.

0:070:12

View ghi âm trên iOS: các cột dạng sóng màu trắng trên khung màu xanh, đồng hồ hiển thị 0:07

Cài đặt ​

sh
npm install react-native-waveform-recorder
sh
yarn add react-native-waveform-recorder
sh
npx expo install react-native-waveform-recorder
npx expo prebuild

Sau đó chạy npx pod-install cho iOS và thêm mô tả quyền dùng micro. Xem Cài đặt để biết về quyền, ghi âm khi chạy nền và config plugin của Expo.

Ghi một tin nhắn thoại ​

tsx
import { useRef } from 'react';
import { Button, View } from 'react-native';
import {
  WaveformRecorderView,
  type WaveformRecorderViewRef,
} from 'react-native-waveform-recorder';

export function VoiceNote() {
  const ref = useRef<WaveformRecorderViewRef>(null);
  return (
    <View>
      <WaveformRecorderView
        ref={ref}
        style={{ height: 56 }}
        onComplete={(e) => console.log(e.uri, e.durationMs, e.samples)}
      />
      <Button title="Ghi âm" onPress={() => ref.current?.start()} />
      <Button title="Dừng" onPress={() => ref.current?.stop()} />
    </View>
  );
}

Phát lại bằng thư viện anh em ​

react-native-waveform-player vẽ cùng kiểu khung đó để phát lại. Truyền onComplete.uri và onComplete.samples vào là trình phát bỏ qua bước giải mã tệp. Xem Dữ liệu xuất và trình phát.

Phát hành theo giấy phép MIT.