スタートガイド
インストール手順と、このプラグインの完全なMarkdownガイドを含むセットアッププロンプトをコピーします。
Set up this Capacitor plugin in the project.
Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-native-audio`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/native-audio/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.
インストール
「インストール」セクションAIアシストによるセットアップでプラグインをインストールできます。以下のコマンドを使用して、お使いのAIツールに Capgo のスキルを追加してください:
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins次に、以下のプロンプトを使用します:
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-native-audio` plugin in my project.手動セットアップを希望する場合は、以下のコマンドを実行してプラグインをインストールし、下記のプラットフォーム別の手順に従ってください:
bun add @capgo/capacitor-native-audiobunx cap syncインポート
「インポート」セクションimport { NativeAudio } from '@capgo/capacitor-native-audio';クイックスタート
「クイックスタート」セクション一度の設定で、クリップのプリロードからUIフィードバックの再生まで可能です。 playOnce() 「再生して終わり」のサウンドを簡単に鳴らせます。
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.configure({ focus: true, showNotification: false });await NativeAudio.playOnce({ assetPath: 'public/sounds/tap.mp3', volume: 0.8 });例: 音楽用セッション
「例:ミュージックスタイルのセッション」というタイトルのセクションawait NativeAudio.preload({ assetId: 'episode-1', assetPath: 'https://cdn.example.com/episode.m3u8', isUrl: true,});await NativeAudio.play({ assetId: 'episode-1' });await NativeAudio.addListener('currentTime', ({ assetId, time }) => updateScrubber(assetId, time));例: オーディオセッションの解放
「例:オーディオセッションの解放」セクション他のプラグインがオーディオの排他的制御を必要とする場合は、再生を停止して以下を呼び出してください: deinitPlugin() これにより、前のセッションが復元されます。
await NativeAudio.stop({ assetId: 'episode-1' });await NativeAudio.deinitPlugin();よくある落とし穴
「よくある落とし穴」セクション- Now Playing と mixing の違い:
showNotification: trueiOS では、バックグラウンド再生を中断する再生カテゴリに切り替わります。 - Android バックグラウンド: 有効化するには
backgroundPlaybackREADME に記載されている必要なフォアグラウンドサービスと権限の設定を完了してから行ってください。 - Web版のリスナー: Webでは再生状態のリスナーイベントが発行されません。これらに依存するUIにはガード処理を入れてください。
API の概要
「API 概要」セクションconfigure
「configure」セクションオーディオプレイヤーの設定
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.configure({ focus: false, background: false, ignoreSilent: false, showNotification: false, backgroundPlayback: false,});preload
「preload」セクションオーディオファイルのロード
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.preload({ assetPath: 'path/to/file', assetId: 'asset-id-123',});playOnce
「playOnce」セクションオーディオファイルを一度だけ再生(自動クリーンアップ付き)
通知音やUIフィードバックなど、手動での状態管理を必要としない 短時間のオーディオ再生に特化したメソッドです。
主な機能:
- Fire-and-forget: 事前のプリロード、再生、停止、アンロードの手間が不要
- 自動クリーンアップ: 再生完了後にアセットを自動的にアンロード
- オプションのファイル削除: 再生後にローカルファイルを削除可能(一時ファイルに便利)
- assetIdを返却: 必要に応じて再生制御(一時停止、停止など)も可能
ユースケース:
- 通知音
- UI効果音(ボタンクリック、アラート)
- 一度だけ再生される短いオーディオクリップ
- 削除が必要な一時的なオーディオファイル
通常の play() との比較:
play(): 手動でのpreload、play、unloadが必要playOnce(): 1回の呼び出しですべて自動的に処理
import { NativeAudio } from '@capgo/capacitor-native-audio';
// Simple one-shot playbackawait NativeAudio.playOnce({ assetPath: 'audio/notification.mp3' });
// Play and delete the file after completionawait NativeAudio.playOnce({ assetPath: 'file:///path/to/temp/audio.mp3', isUrl: true, deleteAfterPlay: true});
// Get the assetId to control playbackconst { assetId } = await NativeAudio.playOnce({ assetPath: 'audio/long-track.mp3', autoPlay: true});// Later, you can stop it manually if neededawait NativeAudio.stop({ assetId });isPreloaded
「isPreloaded」セクションオーディオファイルがpreload済みか確認する
import { NativeAudio } from '@capgo/capacitor-native-audio';
const result = await NativeAudio.isPreloaded({ assetPath: 'path/to/file', assetId: 'asset-id-123',});console.log(result);play
「play」セクションオーディオファイルを再生する
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.play({ assetId: 'asset-id-123' });pause
「pause」セクションオーディオファイルを一時停止
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.pause({ assetId: 'asset-id-123' });resume
「resume」セクションオーディオファイルの再生を再開
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.resume({ assetId: 'asset-id-123' });loop
「loop」セクションオーディオファイルを停止
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.loop({ assetId: 'asset-id-123' });オーディオファイルを停止
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.stop({ assetId: 'asset-id-123' });unload
「unload」セクションオーディオファイルをアンロードする
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.unload({ assetId: 'asset-id-123' });setVolume
「setVolume」セクションオーディオファイルの音量を設定する
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.setVolume({ assetId: 'asset-id-123', volume: 0.5,});setRate
「setRate」セクションオーディオファイルの再生速度を設定する
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.setRate({ assetId: 'asset-id-123', rate: 1,});setCurrentTime
「setCurrentTime」セクションオーディオファイルの再生位置を設定する
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.setCurrentTime({ assetId: 'asset-id-123', time: 10,});getCurrentTime
“getCurrentTime” セクションオーディオファイルの現在再生時間を取得する
import { NativeAudio } from '@capgo/capacitor-native-audio';
const result = await NativeAudio.getCurrentTime({ assetId: 'asset-id-123' });console.log(result);getDuration
“getDuration” セクションオーディオファイルの再生時間を秒単位で取得する
import { NativeAudio } from '@capgo/capacitor-native-audio';
const result = await NativeAudio.getDuration({ assetId: 'asset-id-123' });console.log(result);isPlaying
“isPlaying” セクションオーディオファイルが再生中かどうかを確認する
import { NativeAudio } from '@capgo/capacitor-native-audio';
const result = await NativeAudio.isPlaying({ assetId: 'asset-id-123' });console.log(result);clearCache
“clearCache” セクションリモートオーディオファイルのキャッシュをクリアする
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.clearCache();setDebugMode
「setDebugMode」セクションデバッグモードのログ設定
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.setDebugMode({ enabled: true });deinitPlugin
「deinitPlugin」セクションプラグインを初期化解除し、元のオーディオセッション設定を復元します このメソッドは再生中のすべてのオーディオを停止し、プラグインが行ったオーディオセッションの変更をすべて元に戻します 他のオーディオプラグインとの互換性を確保する必要がある場合に使用します
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.deinitPlugin();型リファレンス
「型リファレンス」セクションConfigureOptions
「ConfigureOptions」セクションexport interface ConfigureOptions { /** * focus the audio with Audio Focus */ focus?: boolean; /** * Play the audio in the background */ background?: boolean; /** * Ignore silent mode, works only on iOS setting this will nuke other audio apps */ ignoreSilent?: boolean; /** * Show audio playback in the notification center (iOS and Android) * When enabled, displays audio metadata (title, artist, album, artwork) in the system notification * and Control Center (iOS) or lock screen. * * **Important iOS Behavior:** * Enabling this option changes the audio session category to `.playback` with `.default` mode, * which means your app's audio will **interrupt** other apps' audio (like background music from * Spotify, Apple Music, etc.) instead of mixing with it. This is required for the Now Playing * info to appear in Control Center and on the lock screen. * * **Trade-offs:** * - `showNotification: true` → Shows Now Playing controls, but interrupts other audio * - `showNotification: false` → Audio mixes with other apps, but no Now Playing controls * * Use this when your app is the primary audio source (music players, podcast apps, etc.). * Disable this for secondary audio like sound effects or notification sounds where mixing * with background music is preferred. * * @see https://github.com/Cap-go/capacitor-native-audio/issues/202 */ showNotification?: boolean; /** * Enable background audio playback (Android only) * * When enabled, audio will continue playing when the app is backgrounded or the screen is locked. * The plugin will skip the automatic pause/resume logic that normally occurs when the app * enters the background or returns to the foreground. * * **Important Android Requirements:** * To use background playback on Android, your app must: * 1. Declare the required permissions in `AndroidManifest.xml`: * - `<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />` * - `<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK" />` * - `<uses-permission android:name="android.permission.WAKE_LOCK" />` * 2. Start a Foreground Service with a media-style notification before backgrounding * (the plugin does not automatically create or manage the foreground service) * 3. Use `showNotification: true` to display playback controls in the notification * * **Usage Example:** * ```typescript * await NativeAudio.configure({ * backgroundPlayback: true, * showNotification: true * }); * // Start your foreground service here * // Then preload and play audio as normal * ``` * * @default false * @platform Android * @since 8.2.0 */ backgroundPlayback?: boolean;}PreloadOptions
「PreloadOptions」セクションexport interface PreloadOptions { /** * Path to the audio file, relative path of the file, absolute url (file://) or remote url (https://) * Supported formats: * - MP3, WAV (all platforms) * - M3U8/HLS streams (iOS and Android) */ assetPath: string; /** * Asset Id, unique identifier of the file */ assetId: string; /** * Volume of the audio, between 0.1 and 1.0 */ volume?: number; /** * Audio channel number, default is 1 */ audioChannelNum?: number; /** * Is the audio file a URL, pass true if assetPath is a `file://` url * or a streaming URL (m3u8) */ isUrl?: boolean; /** * Metadata to display in the notification center when audio is playing. * Only used when `showNotification: true` is set in `configure()`. * * See {@link ConfigureOptions.showNotification} for important details about * how this affects audio mixing behavior on iOS. * * @see NotificationMetadata */ notificationMetadata?: NotificationMetadata; /** * Custom HTTP headers to include when fetching remote audio files. * Only used when isUrl is true and assetPath is a remote URL (http/https). * Example: { 'x-api-key': 'abc123', 'Authorization': 'Bearer token' } * * @since 7.10.0 */ headers?: Record<string, string>;}PlayOnceOptions
“PlayOnceOptions” セクションexport interface PlayOnceOptions { /** * Path to the audio file, relative path of the file, absolute url (file://) or remote url (https://) * Supported formats: * - MP3, WAV (all platforms) * - M3U8/HLS streams (iOS and Android) */ assetPath: string; /** * Volume of the audio, between 0.1 and 1.0 * @default 1.0 */ volume?: number; /** * Is the audio file a URL, pass true if assetPath is a `file://` url * or a streaming URL (m3u8) * @default false */ isUrl?: boolean; /** * Automatically start playback after loading * @default true */ autoPlay?: boolean; /** * Delete the audio file from disk after playback completes * Only works for local files (file:// URLs), ignored for remote URLs * @default false * @since 7.11.0 */ deleteAfterPlay?: boolean; /** * Metadata to display in the notification center when audio is playing. * Only used when `showNotification: true` is set in `configure()`. * * See {@link ConfigureOptions.showNotification} for important details about * how this affects audio mixing behavior on iOS. * * @see NotificationMetadata * @since 7.10.0 */ notificationMetadata?: NotificationMetadata; /** * Custom HTTP headers to include when fetching remote audio files. * Only used when isUrl is true and assetPath is a remote URL (http/https). * Example: { 'x-api-key': 'abc123', 'Authorization': 'Bearer token' } * * @since 7.10.0 */ headers?: Record<string, string>;}PlayOnceResult
“PlayOnceResult” セクションexport interface PlayOnceResult { /** * The internally generated asset ID for this playback * Can be used to control playback (pause, stop, etc.) before completion */ assetId: string;}AssetPlayOptions
“AssetPlayOptions” セクションexport interface AssetPlayOptions { /** * Asset Id, unique identifier of the file */ assetId: string; /** * Time to start playing the audio, in seconds */ time?: number; /** * Delay to start playing the audio, in seconds */ delay?: number;
/** * Volume of the audio, between 0.1 and 1.0 */ volume?: number;
/** * Whether to fade in the audio */ fadeIn?: boolean;
/** * Whether to fade out the audio */ fadeOut?: boolean;
/** * Fade in duration in seconds. * Only used if fadeIn is true. * Default is 1s. */ fadeInDuration?: number;
/** * Fade out duration in seconds. * Only used if fadeOut is true. * Default is 1s. */ fadeOutDuration?: number;
/** * Time in seconds from the start of the audio to start fading out. * Only used if fadeOut is true. * Default is fadeOutDuration before end of audio. */ fadeOutStartTime?: number;}AssetPauseOptions
“AssetPauseOptions” セクションexport interface AssetPauseOptions { /** * Asset Id, unique identifier of the file */ assetId: string;
/** * Whether to fade out the audio before pausing */ fadeOut?: boolean;
/** * Fade out duration in seconds. * Default is 1s. */ fadeOutDuration?: number;}AssetResumeOptions
“AssetResumeOptions” セクションexport interface AssetResumeOptions { /** * Asset Id, unique identifier of the file */ assetId: string;
/** * Whether to fade in the audio during resume */ fadeIn?: boolean;
/** * Fade in duration in seconds. * Default is 1s. */ fadeInDuration?: number;}Assets
“Assets” セクションexport interface Assets { /** * Asset Id, unique identifier of the file */ assetId: string;}AssetStopOptions
「AssetStopOptions」セクションexport interface AssetStopOptions { /** * Asset Id, unique identifier of the file */ assetId: string;
/** * Whether to fade out the audio before stopping */ fadeOut?: boolean;
/** * Fade out duration in seconds. * Default is 1s. */ fadeOutDuration?: number;}AssetVolume
「AssetVolume」セクションexport interface AssetVolume { /** * Asset Id, unique identifier of the file */ assetId: string; /** * Volume of the audio, between 0.1 and 1.0 */ volume: number; /** * Time over which to fade to the target volume, in seconds. Default is 0s (immediate). */ duration?: number;}AssetRate
「AssetRate」セクションexport interface AssetRate { /** * Asset Id, unique identifier of the file */ assetId: string; /** * Rate of the audio, between 0.1 and 1.0 */ rate: number;}AssetSetTime
「AssetSetTime」セクションexport interface AssetSetTime { /** * Asset Id, unique identifier of the file */ assetId: string; /** * Time to set the audio, in seconds */ time: number;}Source of Truth
「Source Of Truth」セクションこのページはプラグインの src/definitions.tsから生成されています。upstream で公開 API が変更されたら、再度 sync を実行してください。
Getting Startedの続きを進める
「Getting Started からの続き」セクション使用している場合 スタートガイド ネイティブメディアとインターフェースの挙動を計画するには、次と連携させてください @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 を使用する際のネイティブ機能については、 @capgo/capacitor-video-player @capgo/capacitor-video-player. の実装の詳細については