React Native开发带特定控件的音乐播放器需求咨询

react-native-sound 在复杂播放控制场景下确实存在功能局限，推荐使用 react-native-track-player（原生项目首选）或 expo-av（Expo 生态项目首选），两者均支持 Android 和 iOS 双平台，能覆盖你需要的所有功能。

一、核心库选择 #

• react-native-track-player：原生级播放控制库，支持后台播放、播放队列管理、调速、循环模式等，功能全面，适合纯 React Native 原生项目。
• expo-av：Expo 官方音频库，API 更简洁，无需额外配置原生环境，适合基于 Expo 开发的项目。

以下以 react-native-track-player 为例，分步实现需求功能：

二、功能实现步骤 #

1. 安装与初始化 #

先安装依赖：

npm install react-native-track-player
# 或 yarn add react-native-track-player

在 App 启动时初始化播放器并添加播放队列：

import TrackPlayer from 'react-native-track-player';
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // 初始化播放器
    TrackPlayer.setupPlayer().then(() => {
      // 添加播放曲目队列，支持本地/网络音频
      const tracks = [
        {
          id: 'track1',
          url: require('./assets/track1.mp3'),
          title: '曲目1',
          artist: '艺术家A'
        },
        {
          id: 'track2',
          url: 'https://your-audio-host.com/track2.mp3',
          title: '曲目2',
          artist: '艺术家B'
        }
      ];
      TrackPlayer.add(tracks);
    });

    // 组件卸载时销毁播放器
    return () => TrackPlayer.destroy();
  }, []);

  // 后续组件内容...
}

2. 调节播放速度 #

直接调用 setRate 方法，支持 0.5~2 倍速（平台兼容性良好）：

// 设置播放速度，参数为数值（如1.2表示1.2倍速）
const setPlaybackRate = async (rate) => {
  await TrackPlayer.setRate(rate);
};

// 使用示例
// <Button title="1.5x" onPress={() => setPlaybackRate(1.5)} />

3. 播放控制（上一曲、下一曲、播放/暂停） #

利用库内置方法实现基础播放操作：

// 上一曲
const skipToPrevious = async () => {
  await TrackPlayer.skipToPrevious();
};

// 下一曲
const skipToNext = async () => {
  await TrackPlayer.skipToNext();
};

// 播放/暂停切换
const togglePlayPause = async () => {
  const currentState = await TrackPlayer.getState();
  if (currentState === TrackPlayer.STATE_PLAYING) {
    await TrackPlayer.pause();
  } else {
    await TrackPlayer.play();
  }
};

4. 重复播放功能 #

支持三种重复模式，直接调用 setRepeatMode 切换：

import { RepeatMode } from 'react-native-track-player';

// 重复当前曲目
const setRepeatCurrent = () => {
  TrackPlayer.setRepeatMode(RepeatMode.Track);
};

// 重复整个播放队列
const setRepeatQueue = () => {
  TrackPlayer.setRepeatMode(RepeatMode.Queue);
};

// 关闭重复
const setRepeatOff = () => {
  TrackPlayer.setRepeatMode(RepeatMode.Off);
};

三、Expo 项目替代方案（expo-av） #

如果是 Expo 项目，用 expo-av 实现更轻量化：

import { Audio } from 'expo-av';
import { useState, useEffect } from 'react';

function AudioPlayer() {
  const [sound, setSound] = useState(null);

  // 加载音频
  useEffect(() => {
    async function loadAudio() {
      const { sound: newSound } = await Audio.Sound.createAsync(
        require('./assets/track1.mp3')
      );
      setSound(newSound);
    }
    loadAudio();

    return () => {
      sound?.unloadAsync();
    };
  }, []);

  // 设置播放速度（第二个参数true表示保持音调不变）
  const setRate = async () => {
    await sound?.setRateAsync(1.5, true);
  };

  // 重复当前曲目：监听播放结束事件，自动重播
  useEffect(() => {
    sound?.setOnPlaybackStatusUpdate((status) => {
      if (status.didJustFinish && status.isLooping) {
        sound.replayAsync();
      }
    });
  }, [sound]);

  // 切换曲目需重新加载对应音频资源
  return (
    // 控件按钮...
  );
}

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