> ## Documentation Index
> Fetch the complete documentation index at: https://audio-app-kit-docs.upgrade-api.int.bragi-dev.cloud/llms.txt
> Use this file to discover all available pages before exploring further.

# Events

## Events

All events are being dispatched from Audio App Kit to the window object. In order to listen for events, an event listener needs to be created.

Each event is of type `CustomEvent` and it contains the payload within `event.detail` property.

### Importing Events

<CodeGroup>
  ```typescript Typescript
  import { AudioAppKitEvents } from '@bragiai/audio-app-kit';
  // Usage: AudioAppKitEvents.streaming.ON_PLAYLISTS;
  ```

  ```javascript Javascript (CommonJS)
  const { AudioAppKit } = require('@bragiai/audio-app-kit');
  // Usage: AudioAppKit.events.streaming.ON_PLAYLISTS;
  ```

  ```javascript Javascript (ESM)
  import { AudioAppKit } from '@bragiai/audio-app-kit';
  // Usage: AudioAppKit.events.streaming.ON_PLAYLISTS;
  ```
</CodeGroup>

### List of Events

### Configuration Availability Changed

Listen for events when the configuration availability changes:

<CodeGroup>
  ```typescript Typescript
  window.addEventListener(AudioAppKitEvents.streaming.ON_CONFIG_AVAILABILITY_CHANGE, ((event: CustomEvent) => {
    // Handle event
  }) as EventListener);
  ```

  ```javascript Javascript
  window.addEventListener(AudioAppKit.events.streaming.ON_CONFIG_AVAILABILITY_CHANGE, event => {
    // Handle event
  });
  ```

  ```javascript Payload Example
  {
    isANCAvailable: true;
    isTransparencyAvailable: false;
    isEqualizerAvailable: true;
    isShuffleAvailable: true;
    isRepeatAvailable: true;
  }
  ```
</CodeGroup>

### Categories Received

Listen for events when the list of categories has been received.

<CodeGroup>
  ```typescript Typescript
  window.addEventListener(AudioAppKitEvents.streaming.ON_CATEGORIES, ((event: CustomEvent) => {
    // Handle event
  }) as EventListener);
  ```

  ```javascript Javascript
  window.addEventListener(AudioAppKit.events.streaming.ON_CATEGORIES, event => {
    // Handle event
  });
  ```

  ```javascript Payload Example
  {
    categories: [
      {
        id: 'music';
        title: 'Music';
      },
      {
        id: 'podcasts';
        title: 'Podcasts';
      }
    ]
  }
  ```
</CodeGroup>

### Playlists Received

Listen for events when the list of playlists has been received.

<CodeGroup>
  ```typescript Typescript
  window.addEventListener(AudioAppKitEvents.streaming.ON_PLAYLISTS, ((event: CustomEvent) => {
    // Handle event
  }) as EventListener);
  ```

  ```javascript Javascript
  window.addEventListener(AudioAppKit.events.streaming.ON_PLAYLISTS, event => {
    // Handle event
  });
  ```

  ```javascript Payload Example
  {
    playlists: [
      {
        id: 'b8b2790d-02b7-48c0-b50d-f5de63715887';
        title: 'Gravity';
        imageUrl: 'https://example.com/playlist.png';
      }
    ]
  }
  ```
</CodeGroup>

### Equalizer Presets Received

Listen for events when the list of equalizer presets has been received.

<CodeGroup>
  ```typescript Typescript
  window.addEventListener(AudioAppKitEvents.streaming.ON_EQUALIZER_PRESETS, ((event: CustomEvent) => {
    // Handle event
  }) as EventListener);
  ```

  ```javascript Javascript
  window.addEventListener(AudioAppKit.events.streaming.ON_EQUALIZER_PRESETS, event => {
    // Handle event
  });
  ```

  ```javascript Payload Example
  {
    presets: ['flat', 'treble', 'bass', 'bassBoost', 'vocal', 'podcast', 'rock', 'movie', 'music', 'custom']
  }
  ```
</CodeGroup>

### User Profile Received

Listen for events when the user profile has been received.

<CodeGroup>
  ```typescript Typescript
  window.addEventListener(AudioAppKitEvents.streaming.ON_USER_PROFILE, ((event: CustomEvent) => {
    // Handle event
  }) as EventListener);
  ```

  ```javascript Javascript
  window.addEventListener(AudioAppKit.events.streaming.ON_USER_PROFILE, event => {
    // Handle event
  });
  ```

  ```javascript Payload Example
  {
    imageUrl: 'https://example.com/user.png',
    isPremium: true
  }
  ```
</CodeGroup>

### Shortcut Config Received

Listen for events when the initial shortcut config is received.

<CodeGroup>
  ```typescript Typescript
  window.addEventListener(AudioAppKitEvents.streaming.ON_SHORTCUT_CONFIG, ((event: CustomEvent) => {
    // Handle event
  }) as EventListener);
  ```

  ```javascript Javascript
  window.addEventListener(AudioAppKit.events.streaming.ON_SHORTCUT_CONFIG, event => {
    // Handle event
  });
  ```

  ```javascript Payload Example
  {
    playlistId: '81755f03-9a82-47f6-be0c-d7fa986e4352',
    isTransparencyEnabled: false,
    isAncEnabled: true,
    isShuffleEnabled: true,
    isRepeatEnabled: true,
    equalizerType: 'flat'
  }
  ```
</CodeGroup>