Commencer

1. Installez le package

   npm

   npm i @capgo/capacitor-volume-buttons

   pnpm

   pnpm add @capgo/capacitor-volume-buttons

   yarn

   yarn add @capgo/capacitor-volume-buttons

   bun

   bun add @capgo/capacitor-volume-buttons

2. Synchronisation avec les projets natifs

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

Utilisation

import { VolumeButtons } from '@capgo/capacitor-volume-buttons';

// Listen for volume button presses
VolumeButtons.addListener('volumeButtonPressed', (event) => {
  console.log('Volume button pressed:', event.direction);

  if (event.direction === 'up') {
    console.log('Volume up pressed');
    // Handle volume up
  } else if (event.direction === 'down') {
    console.log('Volume down pressed');
    // Handle volume down
  }
});

// Remove all listeners when done
await VolumeButtons.removeAllListeners();

API Référence

addListener(‘volumeButtonPressed’, rappel)

Écoutez les événements de pression sur le bouton de volume.

const handle = VolumeButtons.addListener('volumeButtonPressed', (event) => {
  console.log('Direction:', event.direction); // 'up' or 'down'
});

// Remove specific listener
await handle.remove();

Données d’événement :

• direction : “haut’ | ‘down’` - Direction de la pression sur le bouton

supprimerAllListeners()

Supprimez tous les auditeurs enregistrés.

await VolumeButtons.removeAllListeners();

###getPluginVersion()

Obtenez la version du plugin.

const { version } = await VolumeButtons.getPluginVersion();
console.log('Plugin version:', version);

Exemple complet

import { VolumeButtons } from '@capgo/capacitor-volume-buttons';

export class VolumeButtonController {
  private listener: any;

  async initialize() {
    this.listener = VolumeButtons.addListener(
      'volumeButtonPressed',
      this.handleVolumeButton.bind(this)
    );

    console.log('Volume button listener initialized');
  }

  private handleVolumeButton(event: { direction: 'up' | 'down' }) {
    switch (event.direction) {
      case 'up':
        this.handleVolumeUp();
        break;
      case 'down':
        this.handleVolumeDown();
        break;
    }
  }

  private handleVolumeUp() {
    console.log('Volume up pressed');
    // Your custom logic for volume up
    // e.g., navigate forward, increase brightness, etc.
  }

  private handleVolumeDown() {
    console.log('Volume down pressed');
    // Your custom logic for volume down
    // e.g., navigate backward, decrease brightness, etc.
  }

  async cleanup() {
    if (this.listener) {
      await this.listener.remove();
    }
    await VolumeButtons.removeAllListeners();
    console.log('Volume button listener cleaned up');
  }
}

Cas d’utilisation

Capture photo/vidéo

Utilisez les boutons de volume comme déclencheurs de l’obturateur de l’appareil photo :

VolumeButtons.addListener('volumeButtonPressed', async (event) => {
  // Any volume button triggers camera
  await capturePhoto();
});

Navigation dans les pages

Naviguez dans le contenu avec les boutons de volume :

let currentPage = 0;

VolumeButtons.addListener('volumeButtonPressed', (event) => {
  if (event.direction === 'up') {
    currentPage++;
    showPage(currentPage);
  } else {
    currentPage = Math.max(0, currentPage - 1);
    showPage(currentPage);
  }
});

Contrôle des médias

Contrôler la lecture multimédia :

VolumeButtons.addListener('volumeButtonPressed', (event) => {
  if (event.direction === 'up') {
    skipForward();
  } else {
    skipBackward();
  }
});

Contrôles du jeu

Utilisez les boutons de volume pour les actions de jeu :

VolumeButtons.addListener('volumeButtonPressed', (event) => {
  if (event.direction === 'up') {
    player.jump();
  } else {
    player.crouch();
  }
});

## meilleures pratiques

1. Nettoyer les auditeurs Supprimez toujours les écouteurs lorsque votre composant se démonte :

   useEffect(() => {
     const listener = VolumeButtons.addListener('volumeButtonPressed', handler);
   
     return () => {
       listener.remove();
     };
   }, []);

2. Fournir un retour visuel Montrez aux utilisateurs que les boutons de volume sont utilisés pour les commandes personnalisées :

   VolumeButtons.addListener('volumeButtonPressed', (event) => {
     showNotification(`Volume ${event.direction} pressed`);
     performAction(event.direction);
   });

3. Pensez à l’accessibilité N’oubliez pas que certains utilisateurs s’appuient sur les boutons de volume pour contrôler réellement le volume. Proposer des contrôles alternatifs.

4. Presses rapides anti-rebond Évitez les doubles pressions accidentelles :

   let lastPress = 0;
   const DEBOUNCE_MS = 300;
   
   VolumeButtons.addListener('volumeButtonPressed', (event) => {
     const now = Date.now();
     if (now - lastPress < DEBOUNCE_MS) {
       return; // Ignore rapid presses
     }
     lastPress = now;
     handlePress(event.direction);
   });

5. Documentez le comportement Expliquez clairement aux utilisateurs que les boutons de volume ont des fonctionnalités personnalisées :

   function showVolumeButtonHelp() {
     alert('Use Volume Up/Down buttons to navigate pages');
   }

## Remarques sur la plate-forme

iOS

• Fonctionne sur iOS 10.0+
• Boutons de volume détectés de manière fiable
• L’interface utilisateur du volume du système peut encore apparaître brièvement

Android

• Fonctionne sur Android 5.0 (API 21)+
• Nécessite que l’application soit au premier plan
• Certains appareils peuvent avoir un léger retard

###Web

• Non pris en charge sur la plateforme Web
• Les auditeurs ne tireront pas

Dépannage

Les événements ne se déclenchent pas :

• Assurez-vous que l’application est ciblée
• Vérifiez que les auditeurs sont correctement enregistrés
• Vérifiez que le plugin est installé et synchronisé

Les changements de volume du système interfèrent :

• C’est un comportement attendu - le plugin détecte les pressions mais n’empêche pas les changements de volume du système
• Pensez à une UX qui fonctionne parallèlement aux changements de volume

Déclenchement de plusieurs événements :

• Implémenter l’anti-rebond pour gérer les presses rapides
• Vérifiez l’enregistrement des auditeurs en double