시작하기
설치
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-Assisted Setup을 사용하여 플러그인을 설치할 수 있습니다. 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.만약 Manual Setup을 선호한다면, 플러그인을 설치하기 위해 다음 명령어를 실행하고 아래의 플랫폼별 지침을 따르세요:
npm install @capgo/capacitor-native-audionpx cap sync수입
‘수입’ 섹션import { NativeAudio } from '@capgo/capacitor-native-audio';API 개요
‘API 개요’ 섹션configure
‘설정’ 섹션음악 재생기를 설정합니다
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.configure({} as ConfigureOptions);preload
‘준비’ 섹션음악 파일을 로드합니다
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.preload({} as PreloadOptions);playOnce
playOnce자동 재생
자동 재생을 위한 단순한 오디오 재생을 위한 메서드입니다.
기능:
- Fire-and-forget: 오디오 재생을 위한 수동적인 로드, 재생, 중단, 언로드가 필요하지 않습니다.
- Auto-cleanup: 오디오 재생이 완료되면 자원은 자동으로 언로드됩니다.
- Optional file deletion: 재생 후 로컬 파일을 삭제할 수 있습니다 (임시 파일에 유용)
- Returns assetId: 필요할 때 재생을 제어할 수 있습니다 (중단, 중지 등)
사용 사례:
- 알림 소음
- UI 소음 효과 (버튼 클릭, 경고)
- 한 번 재생되는 짧은 오디오 클립
- 임시 오디오 파일이 자동으로 삭제되어야 함
정규 play()와의 비교:
play(): 수동으로 프리로드, 재생, 언로드 단계가 필요합니다playOnce(): 단일 호출로 모든 것을 자동으로 처리합니다
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’ 섹션오디오 파일이 프리로드되었는지 확인
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.isPreloaded({} as PreloadOptions);play
재생음악 파일을 재생합니다.
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.play({} as AssetPlayOptions);pause
일시정지음악 파일을 일시정지합니다.
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.pause({} as AssetPauseOptions);resume
재개음악 파일을 재개합니다.
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.resume({} as AssetResumeOptions);loop
반복음악 파일을 중지합니다.
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.loop({} as Assets);음악 파일을 중지합니다
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.stop({} as AssetStopOptions);unload
Section titled “unload”음악 파일을 해제합니다
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.unload({} as Assets);setVolume
Section titled “setVolume”음악 파일의 볼륨을 설정합니다
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.setVolume({} as AssetVolume);setRate
Section titled “setRate”음악 파일의 속도를 설정합니다
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.setRate({} as AssetRate);setCurrentTime
setCurrentTime음악 파일의 현재 시간을 설정합니다
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.setCurrentTime({} as AssetSetTime);getCurrentTime
getCurrentTime음악 파일의 현재 시간을 가져옵니다
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.getCurrentTime({} as Assets);getDuration
getDuration음악 파일의 길이를 초 단위로 가져옵니다
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.getDuration({} as Assets);isPlaying
isPlaying음악 파일이 재생 중인지 확인합니다
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.isPlaying({} as Assets);clearCache
청소 캐시remote 오디오 파일의 오디오 캐시를 지웁니다
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.clearCache();setDebugMode
설정 제목 “setDebugMode”디버그 모드 로깅을 설정합니다
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.setDebugMode({} as { enabled: boolean });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
자산export interface Assets { /** * Asset Id, unique identifier of the file */ assetId: string;}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
자산 볼륨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
자산 속도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
자산 설정 시간export interface AssetSetTime { /** * Asset Id, unique identifier of the file */ assetId: string; /** * Time to set the audio, in seconds */ time: number;}진실의 근원
원본의 진실이 페이지는 플러그인의 src/definitions.ts. upstream에서 API이 변경될 때 다시 싱크를 실행하세요.
Getting Started에서 계속
Getting Started에서 계속Getting Started을 사용하여 자연스러운 미디어 및 인터페이스 동작을 계획하고 있으면 Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-audio Using @capgo/capacitor-native-audio Using @capgo/capacitor-live-activities Using @capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities, @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, @capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-video-player, and @capgo/capacitor-video-player for the implementation detail in @capgo/capacitor-video-player.