React Native Track Player 入门指南：构建专业音频播放应用

最新推荐文章于 2025-06-11 09:15:02 发布

原创最新推荐文章于 2025-06-11 09:15:02 发布

· 259 阅读

版权

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 是一个功能强大的音频播放库，专为 React Native 应用设计，提供了完整的音频播放控制、队列管理、通知控制等专业功能。本文将带你从零开始掌握这个库的基本使用方法。

环境准备与初始化

注册播放服务

首先需要在应用启动时注册播放服务，这一步通常在应用的入口文件（如 index.js）中完成：

// 在注册主组件后立即注册播放服务
TrackPlayer.registerPlaybackService(() => require('./service'));

对应的 service.js 文件暂时可以保持简单结构：

module.exports = async function() {
    // 服务必须注册，但具体逻辑将在"接收事件"部分实现
}

初始化播放器

初始化播放器是使用任何功能前必须完成的步骤：

import TrackPlayer from 'react-native-track-player';

async function setupPlayer() {
    try {
        await TrackPlayer.setupPlayer();
        console.log('播放器初始化完成');
    } catch (error) {
        console.error('播放器初始化失败:', error);
    }
}

注意：在 setupPlayer 完成前调用其他功能可能导致不稳定。

音频管理与播放控制

创建音频轨道

音频轨道是一个包含音频元数据的 JavaScript 对象，支持多种来源：

const localTrack = {
    url: require('./local-audio.mp3'),  // 从应用包加载
    title: '本地音频',
    artist: '本地艺术家',
    duration: 180  // 单位：秒
};

const remoteTrack = {
    url: 'https://example.com/audio.mp3',  // 从网络加载
    title: '网络音频',
    artwork: 'https://example.com/cover.jpg',  // 封面图
    duration: 240
};

const fileSystemTrack = {
    url: 'file:///path/to/audio.mp3',  // 从文件系统加载
    title: '文件系统音频'
};

管理播放队列

将多个轨道添加到播放队列：

await TrackPlayer.add([localTrack, remoteTrack, fileSystemTrack]);

播放控制基础

// 开始播放
TrackPlayer.play();

// 暂停播放
TrackPlayer.pause();

// 停止播放（保留队列）
TrackPlayer.stop();

// 重置播放器（清空队列）
TrackPlayer.reset();

// 跳转到指定位置（秒）
TrackPlayer.seekTo(30.5);

// 设置音量（0.0-1.0）
TrackPlayer.setVolume(0.75);

播放状态与信息获取

获取当前状态

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

const currentState = await TrackPlayer.getState();
if (currentState === State.Playing) {
    console.log('正在播放');
}

获取当前轨道信息

const currentTrackIndex = await TrackPlayer.getCurrentTrack();
const currentTrack = await TrackPlayer.getTrack(currentTrackIndex);
console.log(`当前播放: ${currentTrack.title} - ${currentTrack.artist}`);

获取播放进度

const position = await TrackPlayer.getPosition();
const duration = await TrackPlayer.getDuration();
console.log(`已播放 ${position} 秒，总时长 ${duration} 秒`);

高级队列控制

// 跳转到指定轨道
await TrackPlayer.skip(trackIndex);

// 下一曲
await TrackPlayer.skipToNext();

// 上一曲
await TrackPlayer.skipToPrevious();

// 从队列中移除轨道
await TrackPlayer.remove([0, 2]); // 移除第1和第3个轨道

// 获取整个队列
const queue = await TrackPlayer.getQueue();

事件监听与响应

通过事件监听可以实现更动态的UI响应：

import { Event, useTrackPlayerEvents } from 'react-native-track-player';

function TrackInfoDisplay() {
    const [currentTitle, setTitle] = useState('');
    
    useTrackPlayerEvents([Event.PlaybackTrackChanged], async (event) => {
        if (event.nextTrack != null) {
            const track = await TrackPlayer.getTrack(event.nextTrack);
            setTitle(track.title);
        }
    });
    
    return <Text>{currentTitle}</Text>;
}

实时进度更新

使用内置的 useProgress hook 可以轻松实现进度条：

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

function ProgressBar() {
    const { position, duration } = useProgress(200); // 200ms更新一次
    
    return (
        <View>
            <Text>
                {formatTime(position)} / {formatTime(duration)}
            </Text>
            <Slider
                value={position}
                maximumValue={duration}
                onSlidingComplete={(value) => TrackPlayer.seekTo(value)}
            />
        </View>
    );
}

播放器配置

配置播放器的外观和行为：

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

TrackPlayer.updateOptions({
    capabilities: [
        Capability.Play,
        Capability.Pause,
        Capability.SkipToNext,
        Capability.SkipToPrevious,
        Capability.SeekTo,
    ],
    compactCapabilities: [Capability.Play, Capability.Pause],
    notificationIcon: require('./notification-icon.png')
});