跳转至正文
@capgo/capacitor-native-audio 已重命名 已从 @capgo/native-audio 重命名为 @capgo/capacitor-native-audio. 媒体 开源

Native Audio Capacitor 插件

使用原生音频引擎低延迟播放短音频文件,适用于游戏和应用

安装

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

指南

如何在 Capacitor 中使用 Native Audio

在设备上测试

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

Native Audio 插件预览 QR code

使用 @capgo/capacitor-native-audio

用于原生音频引擎的原生插件。

安装

npm install @capgo/capacitor-native-audio
npx cap sync

插件暴露的内容

  • configure - 配置音频播放器。
  • preload - 加载音频文件。
  • playOnce - 播放一次音频文件并自动清理。
  • isPreloaded - 检查音频文件是否已预加载。

用法示例

configure

配置音频播放器。

import { NativeAudio } from '@capgo/capacitor-native-audio';

await NativeAudio.configure({
  focus: false,
  background: false,
  ignoreSilent: false,
  showNotification: false,
  backgroundPlayback: false,
});

preload

加载音频文件。

import { NativeAudio } from '@capgo/capacitor-native-audio';

await NativeAudio.preload({
  assetPath: 'path/to/file',
  assetId: 'asset-id-123',
});

playOnce

播放一次音频文件并自动清理。

import { NativeAudio } from '@capgo/capacitor-native-audio';

// Simple one-shot playback
await NativeAudio.playOnce({ assetPath: 'audio/notification.mp3' });

// Play and delete the file after completion
await NativeAudio.playOnce({
  assetPath: 'file:///path/to/temp/audio.mp3',
  isUrl: true,
  deleteAfterPlay: true
});

// Get the assetId to control playback
const { assetId } = await NativeAudio.playOnce({
  assetPath: 'audio/long-track.mp3',
  autoPlay: true
});
// Later, you can stop it manually if needed
await NativeAudio.stop({ assetId });

isPreloaded

检查音频文件是否已预加载。

import { NativeAudio } from '@capgo/capacitor-native-audio';

const result = await NativeAudio.isPreloaded({
  assetPath: 'path/to/file',
  assetId: 'asset-id-123',
});
console.log(result);

完整参考

继续阅读 使用 @capgo/capacitor-native-audio

如果你正在使用 使用 @capgo/capacitor-native-audio 来规划原生媒体和界面行为,并将其与 @capgo/capacitor-native-audio 了解 @capgo/capacitor-native-audio 的实现细节, 快速入门 有关“入门指南”中的实现细节, 使用 @capgo/capacitor-live-activities 用于使用 @capgo/capacitor-live-activities 时的原生能力, @capgo/capacitor-live-activities 关于 @capgo/capacitor-live-activities 中的实现细节,以及 使用 @capgo/capacitor-video-player 有关“使用 @capgo/capacitor-video-player.”中的原生能力

常见问题

Native Audio 插件常见问题

如何在 Capacitor 应用中安装 Native Audio 插件?

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

@capgo/capacitor-native-audio 是否支持 React、Vue 和 Angular?

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

@capgo/capacitor-native-audio 支持哪个 Capacitor 版本?

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

@capgo/capacitor-native-audio 是免费开源的吗?

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

我可以在不经过 App Store 审核的情况下,更新使用了 Native Audio 的 code 吗?

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

无需等待 App 审核,即可发布 Native Audio 的变更

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

开始使用 Capgo