如何在React Native中基于Wave Surfer实现类WhatsApp音频播放器

可用npm包 #

• react-native-wave-player：封装了波形渲染与音频播放控制的一体化组件，适配React Native环境
• react-native-sound：负责音频的加载、播放、暂停、进度调整等核心音频操作
• react-native-gesture-handler：用于实现波形滑动调整进度的手势交互（还原WhatsApp的拖动跳转体验）

实现步骤 #

1. 安装依赖 #

执行以下命令安装所需包：

npm install react-native-wave-player react-native-sound react-native-gesture-handler
# 或使用yarn
yarn add react-native-wave-player react-native-sound react-native-gesture-handler

iOS平台需额外执行 npx pod-install 完成原生依赖配置

2. 基础播放器组件实现 #

以下是一个可直接复用的基础组件，包含波形渲染、播放控制、进度同步功能：

import React, { useState, useEffect, useRef } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import WavePlayer from 'react-native-wave-player';
import Sound from 'react-native-sound';

const WhatsAppAudioPlayer = ({ audioUrl }) => {
  const [isPlaying, setIsPlaying] = useState(false);
  const [duration, setDuration] = useState(0);
  const [currentTime, setCurrentTime] = useState(0);
  const soundRef = useRef(null);
  const wavePlayerRef = useRef(null);

  useEffect(() => {
    Sound.setCategory('Playback');
    const sound = new Sound(audioUrl, '', (error) => {
      if (error) {
        console.error('音频加载失败:', error);
        return;
      }
      setDuration(sound.getDuration());
      soundRef.current = sound;
    });

    return () => {
      soundRef.current?.release();
    };
  }, [audioUrl]);

  const togglePlay = () => {
    if (!soundRef.current) return;
    
    if (isPlaying) {
      soundRef.current.pause();
      wavePlayerRef.current.pause();
    } else {
      soundRef.current.play((success) => {
        if (!success) {
          console.error('播放失败');
          setIsPlaying(false);
        }
      });
      wavePlayerRef.current.play();
    }
    setIsPlaying(!isPlaying);
  };

  const onProgressChange = (time) => {
    setCurrentTime(time);
    soundRef.current?.setCurrentTime(time);
  };

  return (
    <View style={styles.container}>
      <WavePlayer
        ref={wavePlayerRef}
        audioUrl={audioUrl}
        isPlaying={isPlaying}
        onProgressChange={onProgressChange}
        waveColor="#e0e0e0"
        progressColor="#25D366"
        style={styles.waveform}
      />
      <View style={styles.controls}>
        <TouchableOpacity onPress={togglePlay} style={styles.playButton}>
          <Text style={styles.playText}>{isPlaying ? '暂停' : '播放'}</Text>
        </TouchableOpacity>
        <Text style={styles.timeText}>
          {Math.floor(currentTime)}s / {Math.floor(duration)}s
        </Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 16,
    backgroundColor: '#f8f8f8',
    borderRadius: 8,
    marginVertical: 8,
  },
  waveform: {
    height: 60,
    marginBottom: 12,
  },
  controls: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  playButton: {
    backgroundColor: '#25D366',
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 20,
  },
  playText: {
    color: '#fff',
    fontWeight: '500',
  },
  timeText: {
    color: '#666',
    fontSize: 12,
  },
});

export default WhatsAppAudioPlayer;

3. 进阶优化（贴近WhatsApp体验） #

• 滑动波形跳转：结合react-native-gesture-handler的PanGestureHandler监听滑动手势，计算拖动距离对应的音频进度，调用setCurrentTime同步
• 自动隐藏控制按钮：播放时隐藏播放按钮，仅显示进度；暂停时恢复显示
• 波形样式微调：调整waveColor、progressColor、波形线宽等参数，匹配WhatsApp的视觉风格
• 播放结束重置：监听react-native-sound的播放结束回调，重置isPlaying状态与波形进度

内容的提问来源于stack exchange，提问作者Pulkit soni