React Native Track Player 入门指南：构建专业的音频播放应用-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00878/article/details/148577720

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

前言

React Native Track Player 是一个功能强大的音频播放库，专为 React Native 应用设计。它为开发者提供了完整的音频播放解决方案，包括播放控制、队列管理、通知中心集成等核心功能。本文将带你从零开始，掌握这个库的基本使用方法。

环境准备

在开始之前，请确保你的 React Native 项目已经正确配置了 React Native Track Player 库。这个库支持 iOS 和 Android 平台，但需要分别进行一些原生配置。

基础设置

注册播放服务

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

// 在注册主组件之后调用
TrackPlayer.registerPlaybackService(() => require('./service'));

然后创建一个服务文件（service.js），目前只需一个空函数：

module.exports = async function() {
    // 服务需要被注册才能工作
    // 具体事件处理将在后续章节介绍
}

初始化播放器

在使用任何播放功能前，必须先初始化播放器：

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

await TrackPlayer.setupPlayer();
// 播放器现在可以使用了

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

播放控制基础

添加音频到播放队列

首先创建一个音频轨道对象，然后添加到队列中：

const track = {
    url: 'http://example.com/song.mp3', // 支持网络、本地文件和app内资源
    title: '歌曲名称',
    artist: '艺术家',
    album: '专辑名称',
    artwork: 'http://example.com/cover.jpg', // 封面图
    duration: 180 // 时长(秒)
};

await TrackPlayer.add([track]); // 可以一次添加多个轨道

基本播放控制

TrackPlayer.play();  // 播放
TrackPlayer.pause(); // 暂停
TrackPlayer.stop();  // 停止

// 跳转到指定位置(秒)
TrackPlayer.seekTo(30); 

// 设置音量(0-1)
TrackPlayer.setVolume(0.7);

队列管理

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

// 下一首/上一首
await TrackPlayer.skipToNext();
await TrackPlayer.skipToPrevious();

// 从队列中移除轨道
await TrackPlayer.remove([trackIndex1, trackIndex2]);

// 获取当前队列
const queue = await TrackPlayer.getQueue();

播放状态监控

获取当前播放信息

const state = await TrackPlayer.getState(); // 播放状态
const currentTrack = await TrackPlayer.getCurrentTrack(); // 当前轨道索引
const trackInfo = await TrackPlayer.getTrack(currentTrack); // 轨道详情
const position = await TrackPlayer.getPosition(); // 当前播放位置
const duration = await TrackPlayer.getDuration(); // 轨道总时长

使用进度钩子

React Native Track Player 提供了方便的进度钩子：

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

function ProgressBar() {
    const progress = useProgress(); // 自动更新的进度对象
    
    return (
        <View>
            <Text>{Math.floor(progress.position)}秒</Text>
            <Slider 
                value={progress.position}
                maximumValue={progress.duration}
            />
        </View>
    );
}

播放器配置

你可以自定义播放器的各种行为：

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

TrackPlayer.updateOptions({
    capabilities: [
        Capability.Play,
        Capability.Pause,
        Capability.SkipToNext,
        Capability.SkipToPrevious,
    ],
    
    // Android通知栏紧凑模式下显示的按钮
    compactCapabilities: [Capability.Play, Capability.Pause],
    
    // 自定义图标
    playIcon: require('./icons/play.png'),
    pauseIcon: require('./icons/pause.png'),
    // 其他图标...
});

事件监听

监听播放状态变化：

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

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