react-native-waveform-recorder là gì?
react-native-waveform-recorder là một view React Native ghi âm từ micro và vẽ dạng sóng ngay trong lúc ghi. Đây là nửa "ghi" của tính năng tin nhắn thoại: người dùng ghi âm, có thể nghe lại rồi ghi tiếp, còn bạn nhận về một tệp âm thanh hoàn chỉnh cùng bản tóm tắt độ to gồm 64 cột để hiển thị trong bong bóng chat.
Mọi thứ chạy theo từng khung hình đều là native. Mức âm của micro được đọc bằng Swift (AVAudioRecorder) và Kotlin (MediaRecorder hoặc AudioRecord), các cột được vẽ bởi một view native. JavaScript chỉ gửi lệnh qua ref và nhận sự kiện.
Tính năng
| Tính năng | Xem ở |
|---|---|
| Dạng sóng theo thời gian thực, tùy chỉnh được cột, màu, đồng hồ và vạch giữ chỗ | Props |
| Tạm dừng và ghi tiếp, nghe lại có tua, ghi tiếp sau khi nghe lại | Đoạn ghi, tạm dừng và nghe lại |
| Trượt để hủy và trượt để khóa | Cử chỉ trượt |
| Sự kiện khi im lặng một lúc, có thể tự động dừng | Phát hiện khoảng lặng |
Xuất m4a, aac, wav và opus, kèm 64 cột cho bong bóng chat | Dữ liệu xuất và trình phát |
| Các chunk PCM 16-bit trong lúc ghi | Luồng PCM |
| Ghi âm khi app chạy nền | Lưu ý theo nền tảng |
Nền tảng
| Hỗ trợ | |
|---|---|
| iOS | Có (Swift, AVFoundation). Phiên bản tối thiểu theo bản React Native bạn dùng. |
| Android | Có (Kotlin), từ API 24. Định dạng opus cần API 29. |
| New Architecture (Fabric) | Bắt buộc. Không có bản cho Old Architecture. |
| Expo | Development build và expo prebuild, có config plugin. Không chạy trong Expo Go. |
| Web | Không. Render view này trên web sẽ ném lỗi. |
Ngoài React Native, thư viện không phụ thuộc gói JavaScript nào khác.
Luồng sử dụng
- Render
<WaveformRecorderView>với chiều cao trongstyle, ví dụheight: 56. - Gọi
ref.current?.start()từ nút ghi âm. Thư viện sẽ xin quyền micro trước. - Trong lúc ghi, view vẽ các cột và gọi
onMeter. Bạn có thểpause(),resume(),enterPreview()để nghe lại, hoặccancel(). - Gọi
stop(). View hoàn tất tệp rồi gọionCompletekèm URIfile://, thời lượng, kích thước, định dạng và 64 giá trịsamples. - Hiển thị kết quả bằng react-native-waveform-player, truyền vào URI và
samples.
Giữ lại tệp trước khi hủy hoặc unmount
cancel() và việc gỡ view khỏi màn hình sẽ xóa các tệp ghi âm của phiên. Với bản ghi không qua bước nghe lại rồi ghi tiếp, trong đó có cả tệp mà onComplete đưa cho bạn. Hãy sao chép hoặc di chuyển tệp trong onComplete nếu cần dùng về sau. Xem Dữ liệu xuất và trình phát.
Bước tiếp theo
- Cài đặt: quyền, ghi âm khi chạy nền và config plugin của Expo.
- Bắt đầu nhanh: một màn hình ghi, nghe lại và gửi hoàn chỉnh.
- Demo trên trình duyệt: thử props và sự kiện với micro của chính bạn.