Getting Started
Copy sebuah prompt pengaturan dengan langkah instalasi dan panduan markdown lengkap untuk plugin ini.
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.
npm install @capgo/capacitor-native-audionpx cap syncimport { NativeAudio } from '@capgo/capacitor-native-audio';API Ringkasan
Bagian berjudul “API Ringkasan”configure
Bagian berjudul “Konfigurasi”Konfigurasi pemutar audio
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.configure({} as ConfigureOptions);Muat file audio
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.preload({} as PreloadOptions);playOnce
Bab berjudul “playOnce”Mainkan file audio sekali dengan pembersihan otomatis
Methode yang dirancang untuk pemutaran audio sederhana dan tunggal, seperti suara peringatan, umpan balik UI, atau klip audio pendek yang tidak memerlukan pengelolaan status manual.
Fitur Utama:
- Mainkan dan lupakan: Tidak perlu memuat, memainkan, menghentikan, atau mengosongkan secara manual
- Pembersihan otomatis: Asset akan diunloading secara otomatis setelah pemutaran selesai
- Penghapusan file opsional: Bisa menghapus file lokal setelah pemutaran (bermanfaat untuk file sementara)
- Mengembalikan assetId: Masih dapat mengontrol pemutaran jika diperlukan (pause, stop, dll.)
Penggunaan Kasus:
- Suara notifikasi
- Efek suara UI (klik tombol, peringatan)
- Klip audio singkat yang bermain sekali
- File audio sementara yang harus dibersihkan
Perbandingan dengan pemutaran biasa():
play(): Memerlukan langkah pra-muat, pemutaran, dan langkah melepas manualplayOnce(): Menghandle segalanya secara otomatis dengan panggilan tunggal
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
Bagian berjudul “isPreloaded”Periksa apakah file audio sudah dimuat
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.isPreloaded({} as PreloadOptions);Mainkan file audio
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.play({} as AssetPlayOptions);Hentikan file audio
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.pause({} as AssetPauseOptions);resume
Bagian judul “lanjutkan”Lanjutkan file audio
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.resume({} as AssetResumeOptions);Hentikan file audio
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.loop({} as Assets);Hentikan file audio
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.stop({} as AssetStopOptions);Melepas file audio
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.unload({} as Assets);setVolume
Bagian berjudul “atur volume”Atur volume file audio
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.setVolume({} as AssetVolume);Atur kecepatan file audio
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.setRate({} as AssetRate);setCurrentTime
Bagian berjudul “setCurrentTime”Atur waktu saat ini file audio
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.setCurrentTime({} as AssetSetTime);getCurrentTime
Bagian berjudul “getCurrentTime”Ambil waktu saat ini file audio
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.getCurrentTime({} as Assets);getDuration
Bagian berjudul “getDuration”Ambil durasi file audio dalam detik
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.getDuration({} as Assets);isPlaying
Bagian berjudul “isPlaying”Periksa apakah file audio sedang bermain
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.isPlaying({} as Assets);clearCache
Bagian berjudul “clearCache”Hapus cache audio untuk file audio remote
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.clearCache();setDebugMode
Bagian berjudul “setDebugMode”Atur mode debug logging
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.setDebugMode({} as { enabled: boolean });deinitPlugin
Bagian berjudul “deinitPlugin”Deinisialisasi plugin dan kembalikan pengaturan sesi audio asli Methode ini menghentikan semua audio yang bermain dan mengembalikan perubahan sesi audio yang dibuat oleh plugin Gunakan ini ketika Anda perlu memastikan kompatibilitas dengan plugin audio lainnya
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.deinitPlugin();Referensi Tipe
Referensi TipeConfigureOptions
Konfigurasi Opsiexport 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
Bagian Titled “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
Bagian Titled “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
Bagian Titled “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
Bagian Titled “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
Bagian Titled “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
Bagian berjudul “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
Bagian berjudul “Assets”export interface Assets { /** * Asset Id, unique identifier of the file */ assetId: string;}AssetStopOptions
Bagian berjudul “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
Bagian berjudul “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
Bagian berjudul “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
Bagian berjudul “AssetSetTime”export interface AssetSetTime { /** * Asset Id, unique identifier of the file */ assetId: string; /** * Time to set the audio, in seconds */ time: number;}Sumber Kebenaran
Bagian berjudul “Sumber Kebenaran”Halaman ini dihasilkan dari plugin’s src/definitions.ts. Jalankan ulang sinkronisasi ketika publik API berubah di atas
Teruskan dari Getting Started
Bagian berjudul “Teruskan dari Getting Started”Jika Anda menggunakan Getting Started untuk merencanakan perilaku media dan interface native, hubungkannya dengan Menggunakan @capgo/capacitor-native-audio untuk kemampuan native di Menggunakan @capgo/capacitor-native-audio, Menggunakan @capgo/capacitor-live-activities untuk kemampuan asli dalam Menggunakan @capgo/capacitor-live-activities, @capgo/capacitor-live-activities untuk detail implementasi dalam @capgo/capacitor-live-activities, Menggunakan @capgo/capacitor-video-player untuk kemampuan asli dalam Menggunakan @capgo/capacitor-video-player, dan @capgo/capacitor-video-player untuk detail implementasi dalam @capgo/capacitor-video-player.