React Native Track Player 多轨进度管理指南

最新推荐文章于 2025-06-11 09:14:44 发布

翟江哲Frasier

最新推荐文章于 2025-06-11 09:14:44 发布

阅读量293

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00293/article/details/148577729

React Native Track Player 多轨进度管理指南

react-native-track-player A fully fledged audio module created for music apps. Provides audio playback, external media controls, background mode and more! 项目地址: https://gitcode.com/gh_mirrors/re/react-native-track-player

前言

在音频播放应用开发中，当需要同时管理多个音轨的播放进度时，开发者往往会遇到一些技术挑战。本文将深入探讨如何在使用 React Native Track Player（以下简称 RNTP）时，正确实现多音轨进度跟踪功能。

常见误区

许多开发者初次接触 RNTP 时，可能会尝试以下错误方法：

错误假设：认为可以在多个音轨组件中直接使用 useProgress 钩子来获取各自进度
实际表现：所有音轨组件显示相同的进度值
原因分析：useProgress 只关注当前正在播放音轨的进度，无法区分不同音轨

这种误解源于对 RNTP 进度更新机制的不完全理解。此外，当应用在后台运行时，这种方法也无法获取进度更新。

正确实现方案

核心思路

要实现多音轨进度管理，需要：

在 RNTP 外部存储各音轨进度
定期更新存储的进度数据
从存储中读取进度而非直接从 RNTP 获取

技术选型

本文示例使用 Zustand 状态管理库，因其具有以下优势：

轻量级且易于使用
支持状态持久化
提供响应式更新机制

实现步骤

1. 创建进度存储

首先建立 Zustand 存储来管理音轨进度：

// src/store.ts
import create from 'zustand';
import type { SetState } from 'zustand/vanilla';

type ProgressStateStore = {
  map: Record<string, number>;
  setProgress: (id: string, progress: number) => void;
};

export const useProgressStateStore = create<ProgressStateStore>(
  (set: SetState<ProgressStateStore>) => ({
    map: {},
    setProgress: (id: string, progress: number) => set((state) => {
      state.map[id] = progress;
    }),
  })
);

2. 创建进度读取钩子

为方便读取特定音轨进度，创建自定义钩子：

// src/hooks/useTrackProgress.ts
import { useCallback } from 'react';
import { useProgressStateStore } from '../store';

export const useTrackProgress = (id: string | number): number => {
  return useProgressStateStore(useCallback(state => {
    return state.map[id.toString()] || 0;
  }, [id]));
};

3. 监听进度更新

在播放服务中设置进度更新监听器：

// src/services/PlaybackService.ts
import TrackPlayer, { Event } from 'react-native-track-player';
import { useProgressStateStore } from '../store';

const setProgress = useProgressStateStore.getState().setProgress;

export const PlaybackService = async function() {
  TrackPlayer.addEventListener(Event.PlaybackProgressUpdated, async ({ position, track }) => {
    const currentTrack = await TrackPlayer.getTrack(track);
    setProgress(currentTrack.id, position);
  });
};

重要提示：确保在 TrackPlayer.updateOptions 中配置了 progressUpdateEventInterval 参数，以控制进度更新频率。

4. 在组件中使用进度

最后在音轨列表项组件中显示进度：

// src/components/TrackListItem.tsx
import type { Track } from 'react-native-track-player';
import { useTrackProgress } from '../hooks/useTrackProgress';

export interface TrackListItemProps {}

export const TrackListItem: React.FC<TrackListItemProps> = (track: Track) => {
  const progress = useTrackProgress(track.id);
  return (
    <Text>Progress: {progress}</Text>
  );
};