React Native Waveform Player

Tiếng Việt

English
简体中文

Tiếng Việt

English
简体中文

Giao diện

React Native Waveform PlayerTin nhắn thoại, vẽ hoàn toàn native

Một Fabric component phát mọi file âm thanh local hoặc remote, kèm nút play, waveform có animation để tua, nhãn thời gian và nút tốc độ. Swift trên iOS, Kotlin trên Android, không có JavaScript trong vòng lặp phát và vẽ.

Bắt đầu
Đây là gì?
Tài liệu API
0:090:151.5x

Waveform native

Các thanh bo tròn được giải mã từ chính file âm thanh ngay trên thiết bị, có thanh placeholder khi đang tải và playhead tô đầy thanh hiện tại đến đúng từng pixel.

Tùy biến giao diện

Tua và đổi tốc độ

Nhấn giữ rồi kéo ở bất kỳ đâu trên waveform để tua, kể cả khi nằm trong ScrollView. Chạm vào nút tốc độ để xoay vòng qua danh sách tốc độ của riêng bạn.

Tốc độ và phát lại

Controlled hoặc uncontrolled

Để component tự quản lý trạng thái phát và tốc độ, hoặc điều khiển chúng từ state của bạn qua props playing và speed.

Controlled mode

Phát trong nền

Mặc định sẽ tạm dừng khi app chuyển xuống nền. Bật playInBackground để tiếp tục phát; trang hướng dẫn có đủ phần thiết lập cho iOS và Android.

Phát trong nền

Event và phương thức ref

onLoad, onPlayerStateChange, onTimeUpdate, onSeek và onEnd, cùng play, pause, toggle, seekTo và setSpeed trên ref.

Sự kiện

React Native thuần và Expo

Fabric component cho New Architecture. Chạy được trong Expo development build và với expo prebuild, không chạy trong Expo Go.

Cài đặt

Cài đặt ​

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

Xem Cài đặt để biết yêu cầu hệ thống và chi tiết cho Expo.

Hiển thị một tin nhắn thoại ​

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

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

Thử ngay trên trình duyệt ​

Bản mô phỏng trên web của component native, phát một đoạn âm thanh ngắn được tạo ngay trong trình duyệt. Bố cục và hành vi bám theo bản iOS; trên thiết bị, giao diện được vẽ bằng native.

Đổi màu, kích thước thanh và nhiều thứ khác trong playground tùy biến giao diện.

Xem trên thiết bị thật ​

App ví dụ trên iOS với bốn trình phát tin nhắn thoại theo các kiểu khác nhau
iOS
App ví dụ trên Android với bốn trình phát tin nhắn thoại theo các kiểu khác nhau
Android

Cần ghi âm nữa? ​

Thư viện này chỉ phát và hiển thị âm thanh. Nếu bạn cần ghi tin nhắn thoại với waveform trực tiếp, hãy xem thư viện anh em react-native-waveform-recorder.

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