React Native 音频播放器开发指南

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/195500.html

1. react-native-track-player 的突出特性
• 对开发者友好的播放器状态管理
• 简单的播放列表管理
• 性能优先的本地库核心
2. 平台支持和灵活的平台特定配置
3. react-native-track-player 教程
• 将库集成到 React Native 项目中
4. 创建一个简单的音轨播放器
5. 可视化管理播放列表
6. 处理播放和播放器状态
7. 可视化播放和播放器状态
8. 如何循环和随机播放列表项
9. 使用轨道播放器事件
10. 使用后台模式
11. 如何存储播放列表
12. 最后

但是，你还不能用这个迷你播放器来控制播放列表。原因是库触发远程事件处理程序，而不是改变音轨播放器状态。这种情况为开发者提供了处理远程事件的灵活性。

你还记得我们在演示应用的代码库中有一个 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-player 库的功能。 react-native-track-player 库让你创建和管理可播放的音乐播放列表

或者，你可以使用 react-native-sound 库通过 JavaScript 播放音乐并自行处理播放列表——然后，需要根据 react-native-sound 事件编写整个播放列表队列的实现。尽管肯定可以开发出这样的实现，但您可能会面临应用程序性能的问题，因为您同时处理播放事件和 JavaScript 中的播放列表状态。

以上就是 React Native 轨迹播放器开发指南的详细内容，更多请关注其它相关文章！

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/