React Native Track Player 3.1 入门指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00251/article/details/148577477

React Native Track Player 3.1 入门指南

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 应用设计。它提供了完整的音频播放控制功能，包括播放队列管理、播放状态控制、进度跟踪等。本文将详细介绍如何从零开始使用这个库。

环境准备

在开始之前，请确保你的 React Native 开发环境已经配置完成。本文假设你已经有一个可以运行的 React Native 项目。

初始化设置

注册播放服务

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

// 在注册主组件后添加
TrackPlayer.registerPlaybackService(() => require('./service'));

创建服务文件

创建一个 service.js 文件，内容如下：

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

初始化播放器

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

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

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

注意：在 setupPlayer 完成前不要调用其他 TrackPlayer 方法，以避免不稳定情况。

播放控制基础

添加播放队列

首先创建一个包含音频信息的 track 对象，然后将其添加到播放队列：

const track = {
    url: 'http://example.com/song.mp3', // 网络音频
    title: '歌曲名称',
    artist: '艺术家',
    album: '专辑名称',
    artwork: 'http://example.com/cover.jpg', // 封面图片
    duration: 240 // 时长(秒)
};

// 也可以加载本地文件
const localTrack = {
    url: require('./local-song.mp3'), // 应用内音频文件
    title: '本地歌曲',
    artwork: require('./local-cover.jpg')
};

// 添加到队列
await TrackPlayer.add([track, localTrack]);

播放控制方法

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

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

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

// 重置播放器
TrackPlayer.reset();

队列管理

// 跳转到指定索引的歌曲
await TrackPlayer.skip(2);

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

// 移除队列中的歌曲
await TrackPlayer.remove([0, 1]); // 移除前两首

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

播放状态监控

获取当前状态

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

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

// 获取当前播放的歌曲信息
const currentTrackIndex = await TrackPlayer.getCurrentTrack();
const currentTrack = await TrackPlayer.getTrack(currentTrackIndex);

// 获取播放进度
const position = await TrackPlayer.getPosition();
const duration = await TrackPlayer.getDuration();

事件监听

可以监听各种播放事件来响应状态变化：

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

// 在组件中使用
useTrackPlayerEvents([Event.PlaybackTrackChanged], async event => {
    if (event.nextTrack != null) {
        const track = await TrackPlayer.getTrack(event.nextTrack);
        console.log('切换到新歌曲:', track.title);
    }
});

进度显示

使用 useProgress hook 可以轻松获取并自动更新播放进度：

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

function ProgressBar() {
    const progress = useProgress();
    
    return (
        <View>
            <Text>已播放: {progress.position.toFixed(0)}秒</Text>
            <Text>总时长: {progress.duration.toFixed(0)}秒</Text>
            <Slider 
                value={progress.position}
                maximumValue={progress.duration}
            />
        </View>
    );
}

播放器配置

可以自定义播放器的各种选项，包括控制按钮、图标等：

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

TrackPlayer.updateOptions({
    // 控制按钮功能
    capabilities: [
        Capability.Play,
        Capability.Pause,
        Capability.SkipToNext,
        Capability.SkipToPrevious,
    ],
    
    // Android 通知栏图标
    playIcon: require('./play-icon.png'),
    pauseIcon: require('./pause-icon.png'),
    icon: require('./notification-icon.png')
});