React Native Track Player: 完全ガイド

React Native アプリの開発者はさまざまなアプリを構築しており、その中には音楽プレイリストの実装が含まれるものもあります。React Native を使用してオーディオ プレーヤーを構築する予定がある場合は、間違いなく、ユーザーに表示されるか、特定の環境で音楽トラックを再生するバックグラウンド サービスとして実行される、管理可能な音楽トラックのキューを含むプレイリストの実装が必要になります。注文。

通常、音楽プレイリストは、選択した音楽トラックを再生する音楽プレーヤーの実装に接続されます。Windows Update エラー 0x800b0003 を修正する方法? ユーザーの観点からは、プレイリスト内の音楽トラックを追加、削除、シャッフル、並べ替えできる必要があります。開発者の観点から見ると、dpi コンバーターとは何ですか? 推奨される 5 DPI コンバーター ソフトウェアまた、プログラムでプレイリストを更新できる必要があります。

React Native でプレイリストを作成および管理するには、いくつかの方法があります。サードパーティのライブラリがなくてもプレイリストとプレーヤーをゼロから作成できますが、時間がかかります。プライバシーを保護するために Windows 11 をセットアップする方法は? また、ライブラリを使用して音楽トラックを再生し、音楽プレーヤー イベントに基づいて音楽キューをゼロから開発することもできます。Windows 10 で Gmail のダーク モードを有効にする方法 フル機能のミュージック トラック プレーヤー ライブラリを使用することで、開発プロセスをさらにスピードアップできます。

このライブラリは、Windows 10 で見つからない Rockalldll.dll を React Native で修正するための完全に機能する API を提供しますか? でプレイリスト ベースの音楽アプリケーションを作成します。Windows 10 のスクロールの問題を修正するには? Windows 10 のスクロール バーが勝手に動かなくなるのはなぜですか?このチュートリアルでは、Windows 10 で YouTube のコメント履歴を表示する方法を教えてください。再生リストが表示されるミュージック プレーヤーを実装して、機能を説明します。Spotify で指定されたユーザーが有効なプロファイルを持っていない問題を修正する方法? react-native-track-playerreact-native-track-player

一足先：

• react-native-track-player の優れた機能

• react-native-track-player チュートリアル

react-native-track-player の優れた機能

ハンズオン チュートリアルを開始する前に、ライブラリの機能を確認しましょう。

このライブラリには、音楽アプリケーションを構築するための次の便利な機能があります。

開発者が使いやすいプレーヤーの状態管理

ライブラリは、次の 2 つの論理モジュールで構成されています。

1. 音楽プレーヤーモジュール

2. プレイリストの実装

音楽プレーヤー モジュールは、プレイリスト内のトラックを再生します。このライブラリは、音楽プレーヤーの状態を制御し、プレーヤー イベントをサブスクライブするための関数と React Hooks を提供します。これらの開発者にとって使いやすいプレーヤー状態管理機能により、プレーヤー UI の統合を簡単に追跡できます。さらに、イベントベースの React Hooks により、React の状態管理要件の複雑さが軽減されます。

シンプルなプレイリスト管理

このライブラリは、音楽トラックのキューを管理するためのシンプルな API を開発者に提供します。一目瞭然の機能を使用して、音楽トラックをプログラムで追加、削除、繰り返し、スキップできます。このライブラリを使用して、独自のプレイリスト ベースの音楽プレーヤーを簡単に作成できます。

パフォーマンス優先のネイティブ ライブラリ コア

プレイリストの管理と再生のために、このライブラリは 2 つのネイティブ モジュールを使用します。

• KotlinAudio: Android 向けトラック プレーヤーの実装

• SwiftAudioEx: iOS 用トラック プレーヤーの実装

JavaScript の実装は、音楽再生とプレイリスト管理のために上記のネイティブ モジュールを呼び出すため、このライブラリは、音楽アプリケーションにネイティブ パフォーマンスを提供することに専念しています。プレイリストは、パフォーマンスを向上させるために最適なネイティブ データ構造に格納されます (Kotlin の LinkedList など)。反応ネイティブ トラック プレーヤー

このライブラリは、開発者が使いやすい一貫した非同期 API を提供するため、React Native アプリケーション コードベースで最新のパターンを簡単に使用できます。非同期/待機

プラットフォームのサポートと柔軟なプラットフォーム固有の構成

このライブラリは、Android、iOS、および Windows プラットフォームで利用できます。WinRT メディア再生 API を使用して Windows で音楽コンテンツを再生するため、このパッケージを使用して最新の Windows アプリケーションを構築できます。

Track Player ライブラリは、一般的なクロスプラットフォーム API を提供するだけで開発者を制限することはありません。高度なユース ケース向けにプラットフォーム固有の構成を提供します。たとえば、Android の通知パネルのプレーヤー アイコンを変更できます。

react-native-track-player チュートリアル

次に、プレイリストを使用して音楽プレーヤー アプリケーションを開発することで、ライブラリの使用方法を学習します。音楽プレーヤー アプリケーションを作成するときに、追加のサンプル コード スニペットをいくつか示して、ライブラリ API 機能をさらに説明します。反応ネイティブ トラック プレーヤー

ライブラリを React Native プロジェクトに統合する

パッケージのインストールから始めます。まず、新しい React Native プロジェクトを作成して、音楽プレーヤーをビルドします: react-native-track-player

npx 反応ネイティブ初期化 MusicTrackPlayer

cdミュージックトラックプレーヤー

次に、新しく作成したアプリケーションを実行して、すべてが機能していることを確認します。

npx 反応ネイティブ実行アンドロイド

＃ - - また - -

npx 反応ネイティブ run-ios

次に、ライブラリをインストールします。

npm install react-native-track-player

＃ - - また - -

yarn add react-native-track-player

このサンプルアプリは Android で開発しているので、上記のコマンドを実行するだけでライブラリをセットアップできます。ただし、iOS では、ネイティブの依存関係を手動でインストールする必要があります。

cd ios && ポッドのインストール

アプリケーションを再度ビルドして実行し、パッケージのインストール ステータスを確認します。

注: Android では、Gradle ビルド タスクが失敗した場合は、 でこれを確認してください。詳細については、このリファレンスを参照してください。:app:checkDebugAarMetadatacompileSdkVersion = 33android/build.gradle

シンプルなトラック プレーヤーを作成する

Audio Track Player ライブラリで音楽を再生してみましょう。プレイリストの UI コンポーネントを実装する前に、プログラムでプレイリストを作成して、プレイリスト管理 API について学習します。

まず、アプリケーションのソース ディレクトリに という新しいディレクトリを作成し、これらの音楽トラック (Pixabay Musicassets からの 3 つの MP3 オーディオ ファイル) をそこにダウンロードします。

ダウンロードした MP3 ファイルを再生するためにトラック プレーヤー インスタンスを初期化する前に、いくつかのサービスを定義して、トラック プレーヤー インスタンスを構成、初期化、および制御できるようにする必要があります。trackPlayerServices.js という名前の新しいファイルを作成し、次のコードを追加します。

TrackPlayer をインポートします。{

AppKilledPlaybackBehavior、

容量、

リピートモード、

イベント

'react-native-track-player' から;

な

非同期関数のエクスポート setupPlayer() {

let isSetup = false;

試す {

TrackPlayer.getCurrentTrack(); を待ちます。

isSetup = true;

}

キャッチ {

TrackPlayer.setupPlayer(); を待ちます。

await TrackPlayer.updateOptions({

アンドロイド: {

appKilledPlaybackBehavior:

AppKilledPlaybackBehavior.StopPlaybackAndRemoveNotification、

}、

機能: [

能力.遊び、

機能.一時停止、

Capability.SkipToNext、

Capability.SkipToPrevious、

Capability.SeekTo、

]、

コンパクト機能: [

能力.遊び、

機能.一時停止、

Capability.SkipToNext、

]、

progressUpdateEventInterval: 2,

});

な

isSetup = true;

}

ついに {

リターン isSetup;

}

}

な

非同期関数のエクスポート addTracks() {

await TrackPlayer.add([

{

id: '1',

URL: require('./assets/fluidity-100-ig-edit-4558.mp3'),

タイトル: '流動性',

アーティスト: 'tobylane',

持続時間: 60,

}

]);

await TrackPlayer.setRepeatMode(RepeatMode.Queue);

}

な

非同期関数をエクスポートするplaybackService() {

// TODO: リモート イベント ハンドラをアタッチする

}

上記のコードは、次の 3 つのサービスを実装しています。

1. setupPlayer: 複数のプレーヤー機能とデフォルトの動作 (つまり、アプリケーションの終了動作) を使用して、トラック プレーヤーのインスタンスを 1 回だけ初期化します。

2. addTracks: バンドルされたリソースから現在のプレイリストにトラックを追加します

3. playbackService: このサービスは、リモート イベントを受け取ります。プレイ サービス イベントについては次のセクションで説明するので、この関数は空白のままにします。

ここでは、関数 require を介してアプリケーション バンドルから MP3 ファイルを読み込みます。このライブラリは、http プロトコルを介したリモート オーディオ ファイルのロードと、プロトコルを介したローカル オーディオ ファイルのロードをサポートしています。

次に、上記の関数を PlaybackService に再生イベント ハンドラーとして登録する必要があります。ファイルで次のコードを使用します: index.js

import { AppRegistry } from 'react-native';

「react-native-track-player」から TrackPlayer をインポートします。

'./App' からアプリをインポートします。

import { name as appName } from './app.json';

import {playbackService} from './trackPlayerServices';

な

AppRegistry.registerComponent(appName, () => アプリ);

TrackPlayer.registerPlaybackService(() => 再生サービス);

トラック プレーヤー サービスの準備ができたので、アプリケーション UI の構築を開始できます。次のコードをファイルに追加します: App.js

import React, { useEffect, useState } from 'react';

輸入 {

セーフエリアビュー、

スタイルシート、

意見、

ボタン、

活動指標、

} 'react-native' から;

「react-native-track-player」から TrackPlayer をインポートします。

import { setupPlayer, addTracks } from './trackPlayerServices';

な

関数 App() {

な

const [isPlayerReady, setIsPlayerReady] = useState(false);

な

useEffect(() => {

非同期関数のセットアップ() {

let isSetup = await setupPlayer();

な

const queue = await TrackPlayer.getQueue();

if(isSetup && queue.length <= 0) {

addTracks(); を待ちます。

}

な

setIsPlayerReady(isSetup);

}

な

設定（）;

}、[]);

な

if(!isPlayerReady) {

戻る （

<SafeAreaView style={styles.container}>

<ActivityIndi​​cator size="大" color="#bbb"/>

</セーフエリアビュー>

);

}

な

戻る （

<SafeAreaView style={styles.container}>

<Button title="再生" color="#777" onPress={() => TrackPlayer.play()}/>

</セーフエリアビュー>

);

}

な

const スタイル = StyleSheet.create({

容器： {

フレックス: 1,

justifyContent: 'センター',

パディング: 20,

背景色: '#112'

}、

});

な

デフォルトのアプリをエクスポートします。

上記の App コンポーネントは、useEffect を介して setupPlayer サービスを呼び出し、ネイティブ トラック プレーヤーを初期化します。addTracks 次に、現在のプレイリストが空の場合、サービスを呼び出してプレイリストを初期化します。このコンポーネントは、次の条件付きレンダリング ロジックを使用します。

• プレーヤーの準備ができていない場合 (セットアップが進行中)、ロード アニメーションをレンダリングします。

• プレーヤーのセットアップ プロセスが成功した場合、再生

再生ボタンは、トラック キューの再生を開始する関数を呼び出します。上記のアプリケーション コードを実行し、再生ボタンを押します。プレイリストが始まります！以下のプレビューを参照してください: TrackPlayer.play

次のコードを使用して、addTracks サービス用にダウンロードしたすべての音楽トラックを再生します。

非同期関数のエクスポート addTracks() {

await TrackPlayer.add([

{

id: '1',

URL: require('./assets/fluidity-100-ig-edit-4558.mp3'),

タイトル: '流動性',

アーティスト: 'tobylane',

持続時間: 60,

}、

{

id: '2',

URL: require('./assets/penguinmusic-modern-chillout-future-calm-12641.mp3'),

タイトル: 'モダン チルアウト',

アーティスト: 'ペンギンミュージック',

持続時間: 66,

}、

{

id: '3',

URL: require('./assets/powerful-beat-121791.mp3'),

タイトル：「パワフルビート」、

アーティスト: 'ペンギンミュージック',

持続時間: 73,

}

]);

await TrackPlayer.setRepeatMode(RepeatMode.Queue);

}

由于该模式，播放列表将在结束时重新开始。RepeatMode.Queue

管理播放列表在前面的示例代码中，我们使用了将新音乐曲目添加到播放列表的功能。同样，您可以使用以下功能来管理当前播放列表：TrackPlayer.add

• TrackPlayer.remove：按曲目索引删除音乐曲目

• TrackPlayer.skip：按给定索引跳转到音乐曲目

• TrackPlayer.next：转到下一首音乐曲目

• TrackPlayer.previous：转到上一个音乐曲目

• TrackPlayer.reset：清除当前播放列表并停止播放音乐

在官方文档中浏览所有支持的播放列表管理功能。

按下播放按钮后 ，使用热重载功能一一执行以下函数调用，以熟悉播放列表管理功能：

TrackPlayer.remove(0)

TrackPlayer.skip(2)

TrackPlayer.next()

TrackPlayer.previous()

TrackPlayer.reset()

可视化可管理的播放列表

让我们在实际场景中使用上面的播放列表管理功能。我们可以开始改进示例应用程序，将其变成基于播放列表的音乐播放器。

第一步，让我们创建一个 React 组件来显示当前播放列表并让用户播放喜欢的音乐曲目。为简单起见，在本教程中，我们将在我们的文件中开发所有组件，但请确保在开发生产级应用程序时将您的应用程序正确分解为单独的源文件。App.js

首先，将以下导入行添加到：App.js

import {

SafeAreaView,

StyleSheet,

Text,

View,

Button,

FlatList,

ActivityIndicator,

TouchableOpacity,

} from 'react-native';

import TrackPlayer, {

useTrackPlayerEvents,

Event,

State

} from 'react-native-track-player';

接下来，将Playlist组件实现添加到源文件中：

function Playlist() {

const [queue, setQueue] = useState([]);

const [currentTrack, setCurrentTrack] = useState(0);

async function loadPlaylist() {

const queue = await TrackPlayer.getQueue();

setQueue(queue);

}

useEffect(() => {

loadPlaylist();

}, []);

useTrackPlayerEvents([Event.PlaybackTrackChanged], async (event) => {

if(event.state == State.nextTrack) {

let index = await TrackPlayer.getCurrentTrack();

setCurrentTrack(index);

}

});

function PlaylistItem({index, title, isCurrent}) {

function handleItemPress() {

TrackPlayer.skip(index);

}

return (

<TouchableOpacity onPress={handleItemPress}>

<Text

style={ {...styles.playlistItem,

...{backgroundColor: isCurrent ? '#666' : 'transparent'}}}>

{title}

</Text>

</TouchableOpacity>

);

}

return(

<View>

<View style={styles.playlist}>

<FlatList

data={queue}

renderItem={({item, index}) => <PlaylistItem

index={index}

title={item.title}

isCurrent={currentTrack == index }/>

}

/>

</View>

</View>

);

}

在这里，我们使用FlatList组件渲染当前播放列表。该FlatList组件使用queue状态变量加载当前播放列表的详细信息。同时，useEffect调用将当前播放列表捕获到.TrackPlayer.getQueuequeue

播放列表 UI 还会突出显示当前音乐曲目，因此我们将当前音乐曲目索引存储在currentTrack状态变量中。一旦用户按下列表项，我们就要求曲目播放器实例通过调用该函数来播放选定的曲目。我们通过库 Hook跟踪更改。TrackPlayer.skipcurrentTrackuseTrackPlayerEvents

<Playlist/>接下来，在组件内添加App，如以下代码片段所示：

return (

<SafeAreaView style={styles.container}>

<Playlist/>

<Button title="Play" color="#777" onPress={() => TrackPlayer.play()}/>

</SafeAreaView>

);

将以下样式定义添加到您的样式表中：

playlist: {

marginTop: 40,

marginBottom: 40

},

playlistItem: {

fontSize: 16,

paddingTop: 4,

paddingBottom: 4,

paddingLeft: 8,

paddingRight: 8,

borderRadius: 4

},

运行应用程序。现在，您可以按下并选择音乐曲目。等到音乐曲目结束——播放列表组件将自动设置下一个当前音乐曲目，如下面的预览所示：

处理播放和播放器状态

之前，我们调用函数开始播放曲目队列。我们在构建音乐应用时，经常需要暂停、控制播放速度、调节音乐音量、跳转到当前音乐曲目的特定位置。除了播放操作之外，该库还允许您使用以下功能控制播放和播放器状态：TrackPlayer.playreact-native-track-player

• TrackPlayer.pause：暂停当前播放曲目；您可以使用该功能再次播放TrackPlayer.play

• TrackPlayer.seekTo：根据输入的秒数跳转到特定位置

• TrackPlayer.setRate：改变播放速度

• TrackPlayer.setVolume：设置音乐播放器音量

以上函数影响当前播放/播放器状态。您还可以在调用上述函数之前获取播放/播放器状态。下面是一些我们经常需要的getter：

• TrackPlayer.getState: 返回当前播放状态

• TrackPlayer.getVolume: 返回当前音量

注意：如前所述，该库提供了一个异步 API，因此您必须使用令牌await从已解析的承诺中提取返回的数据。从官方文档中浏览所有支持的播放状态控制功能。

按下播放 按钮后，通过热重载一一执行以下函数调用，以熟悉播放器/播放状态函数：

TrackPlayer.pause()

TrackPlayer.seekTo(10)

TrackPlayer.setRate(0.5)

TrackPlayer.setVolume(0.2)

可视化播放和播放器状态

现在，我们将使用上述函数为我们的音乐播放器添加一个控制框。用户可以使用控制箱按钮播放/暂停、转到上一个音乐曲目和转到下一个音乐曲目。我们将使用该包来构建控制框图标按钮。react-native-vector-icons

首先按照官方安装指南安装并重建项目。然后，在您的文件中添加以下导入：App.js

import TrackPlayer, {

useTrackPlayerEvents,

usePlaybackState,

Event,

State

} from 'react-native-track-player';

import Icon from 'react-native-vector-icons/FontAwesome';

现在，更新现有Playlist组件并添加新Controls组件源：

function Playlist() {

const [queue, setQueue] = useState([]);

const [currentTrack, setCurrentTrack] = useState(0);

async function loadPlaylist() {

const queue = await TrackPlayer.getQueue();

setQueue(queue);

}

useEffect(() => {

loadPlaylist();

}, []);

useTrackPlayerEvents([Event.PlaybackTrackChanged], (event) => {

if(event.state == State.nextTrack) {

TrackPlayer.getCurrentTrack().then((index) => setCurrentTrack(index));

}

});

function PlaylistItem({index, title, isCurrent}) {

function handleItemPress() {

TrackPlayer.skip(index);

}

return (

<TouchableOpacity onPress={handleItemPress}>

<Text

style={ {...styles.playlistItem,

...{backgroundColor: isCurrent ? '#666' : 'transparent'}}}>

{title}

</Text>

</TouchableOpacity>

);

}

return(

<View>

<View style={styles.playlist}>

<FlatList

data={queue}

renderItem={({item, index}) => <PlaylistItem

index={index}

title={item.title}

isCurrent={currentTrack == index }/>

}

/>

</View>

<Controls/>

</View>

);

}

function Controls({ onShuffle }) {

const playerState = usePlaybackState();

async function handlePlayPress() {

if(await TrackPlayer.getState() == State.Playing) {

TrackPlayer.pause();

}

else {

TrackPlayer.play();

}

}

return(

<View style={ {flexDirection: 'row',

flexWrap: 'wrap', alignItems: 'center'}}>

<Icon.Button

name="arrow-left"

size={28}

backgroundColor="transparent"

onPress={() => TrackPlayer.skipToPrevious()}/>

<Icon.Button

name={playerState == State.Playing ? 'pause' : 'play'}

size={28}

backgroundColor="transparent"

onPress={handlePlayPress}/>

<Icon.Button

name="arrow-right"

size={28}

backgroundColor="transparent"

onPress={() => TrackPlayer.skipToNext()}/>

</View>

);

}

这里我们使用一个图标按钮来切换播放/暂停状态，条件如下：

await TrackPlayer.getState() == State.Playing

从组件中移除之前的播放按钮，App因为它不再需要了：

return (

<SafeAreaView style={styles.container}>

<Playlist/>

</SafeAreaView>

);

运行应用程序。现在，您可以使用控制框：

该库提供了useProgressHook 来跟踪音乐曲目进度。默认情况下，此 Hook 每秒轮询一次跟踪进度，但您可以根据需要配置间隔（即）。useProgress(200)

创建一个新组件以使用 Hook 显示音乐曲目进度useProgress：

function TrackProgress() {

const { position, duration } = useProgress(200);

function format(seconds) {

let mins = (parseInt(seconds / 60)).toString().padStart(2, '0');

let secs = (Math.trunc(seconds) % 60).toString().padStart(2, '0');

return `${mins}:${secs}`;

}

return(

<View>

<Text style={styles.trackProgress}>

{ format(position) } / { format(duration) }

</Text>

</View>

);

}

上面的组件使用曲目持续时间TrackProgress以格式显示当前曲目进度。mm:ss

添加另一个组件以显示当前音乐曲目信息：

function Header() {

const [info, setInfo] = useState({});

useEffect(() => {

setTrackInfo();

}, []);

useTrackPlayerEvents([Event.PlaybackTrackChanged], (event) => {

if(event.state == State.nextTrack) {

setTrackInfo();

}

});

async function setTrackInfo() {

const track = await TrackPlayer.getCurrentTrack();

const info = await TrackPlayer.getTrack(track);

setInfo(info);

}

return(

<View>

<Text style={styles.songTitle}>{info.title}</Text>

<Text style={styles.artistName}>{info.artist}</Text>

</View>

);

}

在这里，我们使用useTrackPlayerEventsHook 在当前曲目发生变化时更新当前曲目详细信息。接下来，将useProgressHook 添加到导入列表中：

import TrackPlayer, {

useTrackPlayerEvents,

usePlaybackState,

useProgress,

Event,

State

} from 'react-native-track-player';

现在，将上述组件呈现在App：

return (

<SafeAreaView style={styles.container}>

<Header/>

<TrackProgress/>

<Playlist/>

</SafeAreaView>

);

将以下样式定义添加到您的样式表中：

trackProgress: {

marginTop: 40,

textAlign: 'center',

fontSize: 24,

color: '#eee'

},

songTitle: {

fontSize: 32,

marginTop: 50,

color: '#ccc'

},

artistName: {

fontSize: 24,

color: '#888'

},

运行应用程序。现在，您将看到带有音乐曲目的详细信息、曲目进度、播放列表和控制框组件：

您可以通过使用 添加搜索栏来改进音乐曲目播放器，但我们不会在本教程中深入介绍集成。通过以下步骤可以轻松添加搜索栏：react-native-sliderreact-native-slider

1. useProgress使用Hook更新滑块

2. 为滑块附加一个事件处理程序并调用以更改播放状态TrackPlayer.seekTo

如何循环和随机播放播放列表项目

您可以使用我们之前测试过的源代码转到上一个或下一个音乐曲目。自从我们在服务中使用该模式以来，播放列表将在播放列表结束时重新开始（循环）。您可以通过函数使用循环当前曲目。尝试自己在控制框中添加一个播放列表重复模式选择器按钮！RepeatMode.QueueaddTracksRepeatMode.TrackTrackPlayer.setRepeatMode

如果您需要随机播放播放列表怎么办？本机播放列表随机播放功能仍然是一个正在进行的功能请求（问题 #1711），但目前，我们可以在 JavaScript 端实现播放列表随机播放。

首先，在组件中实现播放列表随机播放Playlist：

async function handleShuffle() {

let queue = await TrackPlayer.getQueue();

await TrackPlayer.reset();

queue.sort(() => Math.random() - 0.5);

await TrackPlayer.add(queue);

loadPlaylist()

}

return(

<View>

<View style={styles.playlist}>

<FlatList

data={queue}

renderItem={({item, index}) => <PlaylistItem

index={index}

title={item.title}

isCurrent={currentTrack == index }/>

}

/>

</View>

<Controls onShuffle={handleShuffle}/>

</View>

);

在这里，我们提取当前队列，对其进行随机播放，然后通过该handleShuffle函数将其重新加载到播放列表。接下来，为洗牌添加一个新的图标按钮：

function Controls({ onShuffle }) {

const playerState = usePlaybackState();

async function handlePlayPress() {

if(await TrackPlayer.getState() == State.Playing) {

TrackPlayer.pause();

}

else {

TrackPlayer.play();

}

}

return(

<View style={ {flexDirection: 'row',

flexWrap: 'wrap', alignItems: 'center'}}>

<Icon.Button

name="arrow-left"

size={28}

backgroundColor="transparent"

onPress={() => TrackPlayer.skipToPrevious()}/>

<Icon.Button

name={playerState == State.Playing ? 'pause' : 'play'}

size={28}

backgroundColor="transparent"

onPress={handlePlayPress}/>

<Icon.Button

name="arrow-right"

size={28}

backgroundColor="transparent"

onPress={() => TrackPlayer.skipToNext()}/>

<Icon.Button

name="random"

size={28}

backgroundColor="transparent"

onPress={onShuffle}/>

</View>

);

}

运行该应用程序后，您可以使用随机播放功能：

添加一个按钮来自己播放随机音乐曲目！同样，您可以重新排序播放列表项并通过操纵曲目播放器队列来创建多个播放列表。播放列表管理操作将有效地工作，因为该库使用适当的数据结构在本机端处理播放列表。

使用跟踪播放器事件

我们已经在上述组件中使用了一些轨道播放器事件。例如，在Header组件中，我们使用useTrackPlayerEventsHook 来检测音乐曲目变化事件。

该库允许您为两种事件类型附加函数：

1. 应用内事件：这些事件在应用内自动发生或由用户启动，即播放/暂停事件。库提供useTrackPlayerEvents和usePlaybackStateHooks 来订阅这些应用内事件

2. 远程事件：这些事件由操作系统发起，即当用户按下通知区域迷你播放器的播放 按钮时，库会调度该事件。我们将在下一节讨论处理远程事件Event.RemoteNext

您可以从官方文档中浏览所有支持的事件详细信息。

使用后台模式

用户通常在使用音乐应用程序时同时处理多项任务。例如，移动用户可能会在听音乐的同时使用消息传递应用程序。

音乐应用程序通常即使在后台模式下也会播放当前播放列表，但如果用户想播放下一首歌曲怎么办？用户可以按下通知面板中的下一步 按钮，而不是再次打开音乐播放器应用程序。

运行示例应用程序并检查通知栏。您会看到一个小型的、特定于平台的播放器组件，如下所示：

但是，您还不能用这个迷你播放器控制播放列表。原因是库触发远程事件处理程序而不是更改轨道播放器状态。这种情况为开发人员提供了按照他们的意愿处理远程事件的灵活性。

您还记得我们在演示应用程序代码库的某处发表过评论吗？这就是我们将 附加到库的地方——但我们还没有为远程事件实现操作。TODO:playbackService

使用以下代码playbackService根据远程事件控制轨道播放器：

export async function playbackService() {

TrackPlayer.addEventListener(Event.RemotePause, () => {

console.log('Event.RemotePause');

TrackPlayer.pause();

});

TrackPlayer.addEventListener(Event.RemotePlay, () => {

console.log('Event.RemotePlay');

TrackPlayer.play();

});

TrackPlayer.addEventListener(Event.RemoteNext, () => {

console.log('Event.RemoteNext');

TrackPlayer.skipToNext();

});

TrackPlayer.addEventListener(Event.RemotePrevious, () => {

console.log('Event.RemotePrevious');

TrackPlayer.skipToPrevious();

});

}

即使应用程序在后台播放，上述服务也会执行。播放/播放器事件应该在后台模式下按预期工作——换句话说，该库支持后台模式而无需自定义调整！react-native-track-player

运行该应用程序，在音乐播放器上打开另一个应用程序，然后使用通知区域的迷你播放器播放下一首音乐曲目——一切都会正常进行。

在 Android 上，音乐播放器应用会删除通知区域的迷你播放器并在终止时停止播放音乐，但您可以通过在服务中使用以下设置来避免此行为setupPlayer：

await TrackPlayer.updateOptions({

android: {

appKilledPlaybackBehavior:

AppKilledPlaybackBehavior.ContinuePlayback,

},

// ---

如何存储播放列表

在本教程中，我们使用硬编码播放列表进行演示。但是，在制作音乐应用程序中，您可能需要以更易于管理的方式存储播放列表。考虑以下用于存储播放列表信息的选项：

• 如果您的应用程序自动从设备存储中获取音乐文件（即使用，请考虑将播放列表缓存在应用程序首选项或临时文件中react-native-fs)

• 如果您让用户管理播放列表，您还可以缓存播放列表并提供导出/导入播放列表的功能

• 如果您的音乐应用程序是远程音乐播放器（例如 Spotify），您无疑可以将播放列表存储在服务器中并提供用于播放列表管理的 CRUD API

结论

在本教程中，我们开发了一个基于播放列表的音乐曲目播放器来学习库功能。该库允许您创建和管理可播放的音乐播放列表。react-native-track-playerreact-native-track-player

或者，您可以使用库来播放音乐并使用 JavaScript 自己处理播放列表——然后，您将必须为基于事件的整个播放列表队列实现编写代码。即使您肯定可以开发这样的实现，您也可能会遇到应用程序性能问题，因为您在 JavaScript 中同时处理播放事件和播放列表状态。react-native-soundreact-native-sound

该库处理本机端的所有内容，并将事件分派给 JavaScript 以供 UI 更新使用。因此，使用可播放的音乐播放列表管理可以提高您的工作效率，并为您提供性能优先、生产就绪的解决方案。react-native-track-playerreact-native-track-player