Primeros pasos
Copia un prompt de configuración con los pasos de instalación y la guía completa en markdown para este plugin.
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.
Instalar
Sección titulada “Instalación”Puedes usar nuestro setup asistido por IA para instalar el plugin. Añade las skills de Capgo a tu herramienta de IA con el siguiente comando:
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-pluginsLuego usa el siguiente prompt:
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-native-audio` plugin in my project.Si prefieres la configuración manual, instala el plugin ejecutando estos comandos y sigue las instrucciones de cada plataforma:
bun add @capgo/capacitor-native-audiobunx cap syncImportar
Sección titulada “Importar”import { NativeAudio } from '@capgo/capacitor-native-audio';Inicio rápido
Sección titulada “Inicio rápido”Configura una vez, precarga un clip y reproduce feedback en la UI con playOnce() para sonidos tipo "fire and forget".
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 });Ejemplo: sesión de estilo musical
Sección titulada “Ejemplo: sesión de estilo musical”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));Ejemplo: liberar la sesión de audio
Sección titulada “Ejemplo: liberar la sesión de audio”Cuando otro plugin necesite control exclusivo de audio, detén la reproducción y llama a deinitPlugin() para restaurar la sesión anterior.
await NativeAudio.stop({ assetId: 'episode-1' });await NativeAudio.deinitPlugin();Errores comunes
Sección titulada “Errores comunes”- Reproducción vs. mezcla:
showNotification: trueen iOS cambia a una categoría de reproducción que interrumpe la música de fondo. - Android en segundo plano: habilitar
backgroundPlaybacksolo después de iniciar el foreground service requerido y los permisos del README. - Listeners en web: los eventos de estado de reproducción no se emiten en web; protege la UI que dependa de ellos.
Resumen de API
Sección titulada “Resumen de API”configure
Sección titulada “configure”Configurar el reproductor de audio
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.configure({ focus: false, background: false, ignoreSilent: false, showNotification: false, backgroundPlayback: false,});preload
Sección titulada “preload”Cargar un archivo de audio
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.preload({ assetPath: 'path/to/file', assetId: 'asset-id-123',});playOnce
Sección titulada “playOnce”Reproducir un audio una vez con limpieza automática
Método diseñado para reproducción de audio simple y única, como sonidos de notificación, feedback de la UI u otros clips cortos que no requieren gestión manual de estado.
Características clave:
- Fire-and-forget: Sin necesidad de preload, play, stop o unload manual
- Auto-cleanup: El asset se descarga automáticamente tras la reproducción
- Borrado opcional de archivos: Permite borrar archivos locales tras la reproducción (útil para temporales)
- Devuelve assetId: Permite controlar la reproducción si es necesario (pause, stop, etc.)
Casos de uso:
- Sonidos de notificación
- Efectos de sonido de la UI (clics, alertas)
- Clips de audio cortos de una sola reproducción
- Archivos de audio temporales que deben limpiarse
Comparación con el play() convencional:
play(): Requiere pasos manuales de preload, play y unloadplayOnce(): Gestiona todo automáticamente con una sola llamada
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
Sección titulada “isPreloaded”Comprobar si un archivo de audio está precargado
import { NativeAudio } from '@capgo/capacitor-native-audio';
const result = await NativeAudio.isPreloaded({ assetPath: 'path/to/file', assetId: 'asset-id-123',});console.log(result);Reproducir un archivo de audio
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.play({ assetId: 'asset-id-123' });Pausar un archivo de audio
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.pause({ assetId: 'asset-id-123' });Reanudar un archivo de audio
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.resume({ assetId: 'asset-id-123' });Detener un archivo de audio
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.loop({ assetId: 'asset-id-123' });Detener un archivo de audio
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.stop({ assetId: 'asset-id-123' });Liberar un archivo de audio
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.unload({ assetId: 'asset-id-123' });setVolume
Sección titulada “setVolume”Ajustar el volumen de un archivo de audio
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.setVolume({ assetId: 'asset-id-123', volume: 0.5,});setRate
Sección titulada “setRate”Ajustar la velocidad de un archivo de audio
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.setRate({ assetId: 'asset-id-123', rate: 1,});setCurrentTime
Sección titulada “setCurrentTime”Establecer el tiempo actual de un archivo de audio
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.setCurrentTime({ assetId: 'asset-id-123', time: 10,});getCurrentTime
Sección titulada “getCurrentTime”Obtener el tiempo actual de un archivo de audio
import { NativeAudio } from '@capgo/capacitor-native-audio';
const result = await NativeAudio.getCurrentTime({ assetId: 'asset-id-123' });console.log(result);getDuration
Sección titulada “getDuration”Obtener la duración de un archivo de audio en segundos
import { NativeAudio } from '@capgo/capacitor-native-audio';
const result = await NativeAudio.getDuration({ assetId: 'asset-id-123' });console.log(result);isPlaying
Sección titulada “isPlaying”Check if an audio file is playing
import { NativeAudio } from '@capgo/capacitor-native-audio';
const result = await NativeAudio.isPlaying({ assetId: 'asset-id-123' });console.log(result);clearCache
Sección titulada “clearCache”Limpiar el caché de audio para archivos remotos
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.clearCache();setDebugMode
Sección titulada “setDebugMode”Configurar el registro de modo debug
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.setDebugMode({ enabled: true });deinitPlugin
Sección titulada “deinitPlugin”Desinicializa el plugin y restaura la configuración original de la sesión de audio Este método detiene todo el audio en reproducción y revierte cualquier cambio en la sesión de audio realizado por el plugin Úsalo cuando necesites asegurar la compatibilidad con otros plugins de audio
import { NativeAudio } from '@capgo/capacitor-native-audio';
await NativeAudio.deinitPlugin();Referencia de tipos
Sección titulada “Referencia de tipos”ConfigureOptions
Sección titulada “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
Sección titulada “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
Sección titulada “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
Sección titulada “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
Sección titulada “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
Sección titulada “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
Sección titulada “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;}export interface Assets { /** * Asset Id, unique identifier of the file */ assetId: string;}AssetStopOptions
Sección titulada “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
Sección titulada “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
Sección titulada “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
Sección titulada “AssetSetTime”export interface AssetSetTime { /** * Asset Id, unique identifier of the file */ assetId: string; /** * Time to set the audio, in seconds */ time: number;}Fuente de verdad
Sección titulada “Fuente de verdad”Esta página se genera a partir del plugin src/definitions.ts. Vuelve a ejecutar el sync cuando el API público cambie en upstream.
Continúa desde Getting Started
Sección titulada “Continúa desde Primeros pasos”Si estás usando Primeros pasos para planificar el comportamiento de los medios nativos y la interfaz, conéctalo con Uso de @capgo/capacitor-native-audio para la capacidad nativa en el uso de @capgo/capacitor-native-audio, Uso de @capgo/capacitor-live-activities para la capacidad nativa en Uso de @capgo/capacitor-live-activities, @capgo/capacitor-live-activities para los detalles de implementación en @capgo/capacitor-live-activities, Uso de @capgo/capacitor-video-player para la capacidad nativa en Uso de @capgo/capacitor-video-player, y @capgo/capacitor-video-player para el detalle de implementación en @capgo/capacitor-video-player.