Adding Custom Sound in the Local Notification

I am using Local Notification for showing the notification to the user side. I wanted to add a sound with notification. Below is the definition of Local Notification:

export interface LocalNotification {
    title: string;
    body: string;
    id: number;
    schedule?: LocalNotificationSchedule;
    /**
     * Name of the audio file with extension.
     * On iOS the file should be in the app bundle.
     * On Android the file should be on res/raw folder.
     * Doesn't work on Android version 26+ (Android O and newer), for
     * Recommended format is .wav because is supported by both platforms.
     */
    sound?: string;
    /**
     * Android-only: set a custom statusbar icon.
     * If set, it overrides default icon from capacitor.config.json
     */
    smallIcon?: string;
    /**
     * Android only: set the color of the notification icon
     */
    iconColor?: string;
    attachments?: LocalNotificationAttachment[];
    actionTypeId?: string;
    extra?: any;
    /**
     * iOS only: set the thread identifier for notification grouping
     */
    threadIdentifier?: string;
    /**
     * iOS 12+ only: set the summary argument for notification grouping
     */
    summaryArgument?: string;
    /**
     * Android only: set the group identifier for notification grouping, like
     * threadIdentifier on iOS.
     */
    group?: string;
    /**
     * Android only: designate this notification as the summary for a group
     * (should be used with the `group` property).
     */
    groupSummary?: boolean;
    /**
     * Android only: set the notification channel on which local notification
     * will generate. If channel with the given name does not exist then the
     * notification will not fire. If not provided, it will use the default channel.
     */
    channelId?: string;
    /**
     * Android only: set the notification ongoing.
     * If set to true the notification can't be swiped away.
     */
    ongoing?: boolean;
    /**
     * Android only: set the notification to be removed automatically when the user clicks on it
     */
    autoCancel?: boolean;
}

I found the "sound" attribute in the LocalNotification interface.

I am working on android So I went through the below steps:

1. Creating a "raw" folder under android-> app-> src->main-> res 

2. and add the audio file under the "raw" folder

 

3. Add the sound attribute with the audio file name with the extension.

Note: Audio file name must contain 'a-z' '0-9' and underscore(_). Android does not support anything else in the name of audio files No capital letters as well.

sound: null -> Will Give you default sound.

await LocalNotifications.schedule({
  notifications:[
    {
      title:title,
      body:'Background notification Generation',
      id: 1,
      sound:'notification_sound.mp3',
      extra:{
        data:'Abdgdkagf'
      },
      smallIcon:'notification_icon',
      iconColor:'#0000ff'
    }
  ]
});

So After completing this process, When I built and executed It, I found only the notification showing but no audio sounded. And No error was showing in the console or no debugger was working for me. I have tried to know, what is the problem? why it is not working? After a lot of searching, I focused on the definition and above the sound, there is a comment. 

Doesn't work on Android version 26+ (Android O and newer),

So this will work only till Android O. There is a configuration you can add in the "capacitor.config.json" file for configuring the sound and icon on the Android Platform.

{
  "plugins": {
    "LocalNotifications": {
      "smallIcon": "ic_stat_icon_config_sample",
      "iconColor": "#488AFF",
      "sound": "beep.wav"
    }
  }
}


Remember that Configuration overlaps the settings of individual notification options.

Now The challenge I have is to make it work for all the Android Versions that are available. As soon as I will find that out I will post my solution.

Hope this is helpful. Thank you.

Please read my blog on Local Notification Introduction, if you have not already. Read here

References

Please visit these sites for a detailed understanding of the Local Notification Plugin provided by Ionic Capacitor

https://www.npmjs.com/package/@capacitor/local-notifications

https://capacitorjs.com/docs/apis/local-notifications

 

Add comment