跳转至正文

媒体会话 Capacitor 插件

从锁屏和通知中心控制媒体播放

安装

bun add @capgo/capacitor-media-session bunx cap sync
npm、pnpm 或 yarn
  • npm install @capgo/capacitor-media-session
  • pnpm add @capgo/capacitor-media-session
  • yarn add @capgo/capacitor-media-session

指南

如何在 Capacitor 中使用 Media Session

在设备上测试

下载 Capgo App,然后扫描二维码 code。

Media Session 插件预览二维码 code

使用 @capgo/capacitor-media-session

Capacitor 插件,用于暴露设备的媒体会话控制功能。

安装

bun add @capgo/capacitor-media-session
bunx cap sync

bunx cap sync 将插件的原生 code 复制到你的原生项目中。每次升级插件后都要重新运行。

导入

import { MediaSession } from '@capgo/capacitor-media-session';

API 概览

方法 描述
setMetadata 设置当前播放媒体的元数据。
setPlaybackState 更新媒体会话的播放状态。
setActionHandler 为媒体会话操作注册处理器。
setPositionState 更新当前活动媒体会话的位置状态。

示例

setMetadata()

设置当前播放媒体的元数据。

import { MediaSession } from '@capgo/capacitor-media-session';

await MediaSession.setMetadata({ album: 'album' });

setPlaybackState()

更新媒体会话的播放状态。

import { MediaSession } from '@capgo/capacitor-media-session';

await MediaSession.setPlaybackState({ playbackState: 'none' });

setActionHandler()

为媒体会话操作注册处理器。

import { MediaSession } from '@capgo/capacitor-media-session';

await MediaSession.setActionHandler({ action: 'play' }, (details) => {
  console.log(details);
});

setPositionState()

更新当前活动媒体会话的位置状态。

import { MediaSession } from '@capgo/capacitor-media-session';

await MediaSession.setPositionState({
  duration: 1000,
  playbackRate: 1,
  position: 10,
});

完整参考文档

继续阅读“使用 @capgo/capacitor-media-session”

如果你正在使用 使用 @capgo/capacitor-media-session 要规划 dashboard 和 API 操作,请将其连接到 @capgo/capacitor-media-session 了解 @capgo/capacitor-media-session 中的实现细节, 快速入门 有关“入门指南”中的实现细节, API 概览 关于 API Overview 中的实现细节, 简介 关于简介中的实现细节,以及 API 密钥 关于 API Keys 中的实现细节。

常见问题

Media Session 插件常见问题

如何在 Capacitor 应用中安装 Media Session 插件?

运行 "bun add @capgo/capacitor-media-session" (或 "npm install @capgo/capacitor-media-session"),然后运行 "bunx cap sync" 使 iOS 和 Android 项目同步原生 code。最后在你的应用 code 中从 "@capgo/capacitor-media-session" 导入即可。

@capgo/capacitor-media-session 是否支持 React、Vue 和 Angular?

支持。Media Session 是一个 Capacitor 包,因此它适用于任何在 Capacitor 中运行的 Web 框架,包括 Ionic、React、Vue、Angular、Svelte 以及原生 JavaScript。

@capgo/capacitor-media-session 支持哪个版本的 Capacitor?

Capgo 插件遵循 Capacitor 的主版本号:请使用与 Capacitor 主版本号一致的插件主版本(例如插件 v8 对应 Capacitor 8)。GitHub README 中的兼容性表列出了仍在维护的版本。

@capgo/capacitor-media-session 是免费开源的吗?

是的。code 的源码已在 GitHub 公开,地址为 https://github.com/Cap-go/capacitor-media-session/,并且你可以通过 npm 免费安装该包。欢迎提交 Bug 反馈和 Pull Request。

我能否在无需经过 App Store 审核的情况下,更新使用了 Media Session 的 code?

安装或升级插件会改动原生 code,因此需要重新做一次商店构建。之后,调用该插件的 JavaScript、HTML 和 CSS 改动就能通过 Capgo live updates 立即发布。

无需等待应用审核即可发布 Media Session 变更

只要插件已包含在你的商店版本中,Capgo live updates 就能在几分钟内把 JavaScript、HTML 和 CSS 的改动推送给用户。

开始使用 Capgo