阅读 91

react-native之react-native-track-play播放器入门

引用react-native-track-play的话,react-native-track-play是为音乐应用程序创建的完整的音频模块。提供音频播放,外部媒体控件,chromecast支持,背景模式等等!更详细的介绍可到react-native-track-play官方文档

TrackPlayer是原生系统对外暴露的模块。从源码可知:

import { Platform, AppRegistry, DeviceEventEmitter, NativeEventEmitter, NativeModules } from 'react-native';
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';

const { TrackPlayerModule: TrackPlayer } = NativeModules;
复制代码

基本使用

1、首先初始化播放器

const option = {
  minBuffer:15,  // 需要缓冲的最短时间(以秒为单位)
  maxBuffer:50   // 需要缓冲的最长时间(以秒为单位)
  playBuffer:2.5,  // 开始播放需要缓冲的最短时间(以秒为单位)
  backBuffer:0,  // 以秒为单位的时间,应保留在当前播放头时间之后的缓冲区中。
  maxCacheSize:0  最大缓存大小(以千字节为单位)
}
await TrackPlayer.setupPlayer(options);
复制代码

以上参数是比较常用的,更加具体的请参考react-native-track-play官方文档

2、在初始化完成之后,应该有个flag来判断播放器有没有初始化完成

let isInit = false;
初始化完成之后改变flag的值,即在await TrackPlayer.setupPlayer之后执行
insInit = true;
复制代码

3、初始化想要播放的music,一首music就是一个track

const track = {
    title: '错位时空',
    artist: '艾辰',
    artwork: require('../../assets/album-arts/death-bed.jpg'),
    url: require('../../assets/songs/cuoWei.mp3'),
    id: '1',
    duration: 212,
  },

复制代码

对于track更加详细的信息可查看react-native-track-play官方文档

4、更新组件的配置。

TrackPlayer.updateOptions({
    stopWithApp: true, // 应用关闭时是否将销毁播放器
    jumpInterval: 5,  // 前进/后退按钮的时间间隔(以秒为单位)
    capabilities: [
      CAPABILITY_PLAY,
      CAPABILITY_PAUSE,
      CAPABILITY_SKIP_TO_NEXT,
      CAPABILITY_SKIP_TO_PREVIOUS,
      CAPABILITY_JUMP_BACKWARD,
      CAPABILITY_JUMP_FORWARD, 
    ], // 启用的媒体控件(下图的控件按钮)
    playIcon: require('../../../assets/music/play.png'), // 启用的媒体控件图标(经过测试,好像不可用)
    pauseIcon: require('../../../assets/music/pause.png'), // 启用的媒体控件图标(经过测试,好像不可用)
    stopIcon: require('../../../assets/music/stop.png'), // 启用的媒体控件图标(经过测试,好像不可用)
    previousIcon: require('../../../assets/music/prev.png'), // 启用的媒体控件图标(经过测试,好像不可用)
    nextIcon: require('../../../assets/music/next.png'), // 启用的媒体控件图标(经过测试,好像不可用)
});
复制代码

以上参数是比较常用的,更加具体的请参考react-native-track-play官方文档。 如果想通过这里的按钮操作音乐的状态(比如前进、下一首、播放等等),我们还需要在入口文件里注册TrackPlayer.registerPlaybackService(() => require('./service.js'));service.js的内容如下:

// 根据自己的需要进行更改
import {
  addEventListener,
  play,
  pause,
  destroy,
  skipToNext,
  skipToPrevious,
  seekTo,
  getPosition,
} from 'react-native-track-player';

module.exports = async function () {
  addEventListener('remote-play', () => play());

  addEventListener('remote-pause', () => pause());

  addEventListener('remote-stop', () => destroy());

  addEventListener('remote-next', () => skipToNext());

  addEventListener('remote-previous', async (param) => skipToPrevious());
  addEventListener('remote-jump-forward', async ({interval}) => {
    const position = await getPosition();
    seekTo(position + interval);
  });
  addEventListener('remote-jump-backward', async ({interval}) => {
    const position = await getPosition();
    seekTo(position - interval);
  });
  addEventListener('remote-seek', ({position}) => seekTo(position));
};

复制代码

5、创建track之后,将其添加到播放队列中

await TrackPlayer.add([track])
复制代码

6、加载媒体文件后,可以获得有关它的信息

  • 获取播放器的状态 TrackPlayer.getState()
STATE_NONE:0,  // 当前未加载
STATE_READY:1, // 准备开始
STATE_PLAYING:2, // 当前正在播放的状态
STATE_PAUSED:3, // 当前已暂停的状态
STATE_STOPPED:4, // 当前正在停止的状态
STATE_BUFFERING:5,// 当前正在缓冲的状态(处于“播放”状态)
STATE_CONNECTING:6,// 当前正在缓冲的状态(处于“暂停”状态)
复制代码
  • 获取当前曲目的ID TrackPlayer.getCurrentTrack();
  • 从队列中获取track对象 TrackPlayer.getTrack(trackId);
  • 获取播放器的位置(以秒为单位) TrackPlayer.getPosition();可用于进度条显示
  • 获取播放器的缓冲位置(以秒为单位) TrackPlayer.getBufferedPosition();可用于进度条显示
  • 获取当前曲目的持续时间(以秒为单位) TrackPlayer.getDuration();可用于进度条显示
注意注意:这react-native-track-player是一个流媒体库,这意味着它会缓慢缓冲曲目,并且不知道确切的结束时间。此函数返回的持续时间是通过各种技巧确定的,可能不准确,也可能根本不可用(测试获取为零)。你应该不信任此功能。您应该从数据库中检索持续时间,并将其输入到Track Object中的duration参数。
复制代码
  • 获取整个track队列 TrackPlayer.getQueue();
  • 获取播放器的音量(0到1之间的数字) TrackPlayer.getVolume();
  • 获取播放速率,其中1是常规速度。 TrackPlayer.getRate();

7、操控音乐的播放暂停等状态(通过ui)

  • 播放或恢复当前曲目 TrackPlayer.play();
  • 暂停当前曲目 TrackPlayer.pause();
  • 停止当前曲目 TrackPlayer.stop();
  • 重置停止当前曲目并清除队列 TrackPlayer.reset();
  • 调到当前曲目中的指定时间位置 TrackPlayer.seekTo(12.5);
  • 设置播放器的音量 TrackPlayer.setVolume(0.5);
  • 设置播放速率 TrackPlayer.setRate(1.0);

8、切换音乐上一首或者下一首等等(通过ui)

  • 跳到队列中的曲目 TrackPlayer.skip(trackId);
  • 跳至队列中的下一首曲目(下一曲) TrackPlayer.skipToNext();
  • 跳至队列中的上一个曲目(上一曲) TrackPlayer.skipToPrevious();
  • 从队列中删除一个或多个轨道 TrackPlayer.remove([trackId1, trackId2]);
文章分类
前端
文章标签