Custom sound push notification does not work (Flutter)

Question

{
  "to": "XXXX",
  "notification": {
    "title": "ASAP Alert",
    "body": "Please open your app"
  },
  "data": {
    "screen": "/Nexpage1",
    "sound": "alarm",
    "click_action": "FLUTTER_NOTIFICATION_CLICK"
  }
}

Above is my payload for the push notification. I have insert the alarm.mp3 file inside the raw folder, however it still does not give me the alarm sound, i have try for alarm.mp3 also, is there anything wrong with the json? of it because of the code on my dart file?

Answer 1

The only guide you will ever need

Android setup

Firstly create an extra notification channel with

  // channel for default notifications
  const AndroidNotificationChannel channel = AndroidNotificationChannel(
      'wave_remote_notifications', // id
      'Wave messages and updates', // title
      description: 'Primary channel for notifications and messages in wave app',
      importance: Importance.max,
    );
   
   // channel for custom sound  
   const AndroidNotificationChannel channelAudio = AndroidNotificationChannel(
      'wave_remote_notifications_priority', // id
      'Wave messages and updates on priority', // title
      description: 'Primary channel for notifications and messages in wave app',
      sound: RawResourceAndroidNotificationSound('mario'),
      importance: Importance.max,
    );
    
    
    // if you use flutter_local_notification 
    
      await flutterLocalNotificationsPlugin
        .resolvePlatformSpecificImplementation<
            AndroidFlutterLocalNotificationsPlugin>()
        ?.createNotificationChannel(channel);
        
    await flutterLocalNotificationsPlugin
        .resolvePlatformSpecificImplementation<
            AndroidFlutterLocalNotificationsPlugin>()
        ?.createNotificationChannel(channelAudio);

you can see we have added RawResourceAndroidNotificationSound('mario')

Now add mp3/wav file into res/raw/yourmp3files.mp3

now notification will work but only for debug mode as this file you added will not be included in release mode

So after that you need to add keep.xml inside res/raw/keep.xml to include yourmp3files.mp3 into build keep.xml

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools"
    tools:keep="@raw/yourmp3files"
    />

iOS setup

You have to add the sound into XCode. You can just drag and drop the audio file (in .caf or .wav supported format ) into the root directory (usually called Runner for Flutter) in XCode

That's all

FCM Payload

final step

{
    "to": "f31vmSf8Qy2N57_33C9cf3:APA91bHBaz7yyRrKQTr_25mLNK2OVlBjdMqM8ux8kQwaeQcsXE6XnOhio7Tp5-CABTFTSbV1vBqqfIVj9Qd9eUdqNi9oojq8FdOWI-l1CU9Xw16-Xb4ZHVTycOM7nIRudIAmMkU6fjbm",
    // "collapse_key": "type_a",
    "priority": "high",
    "notification": {
        "title": "New visitor request",
        "body": "Answer to accept",
        "sound": "mario.wav",
        "android_channel_id": "wave_remote_notifications_priority"
    },
    "data": {
        "title": "New visitor request",
        "body": "Answer to accept ",
        "sound": "mario",
    },
    "content_available": true,
    "apns": {
        "payload": {
            "aps": {
                "mutable-content": 1,
                "content-available": 1
            }
        }
    }
}

Answer 2

after try this solution in Android I still can't change with custom sound. You need .ogg file type to resolve this issue. After changed to .ogg file type, I can change with custom sound. Thanks.

Answer 3

For the people who try to make custom sound for both android and ios good guide here:

For iOS:

To add a custom sound for iOS, add the audio clip for iOS to your project's App_Resources/iOS/ directory (iOS only accepts .wav, .aiff, and .caf extensions).

For Android:

First, add the audio clip to your project's App_Resources/Android/src/main/res/raw/ directory ((Android only accepts .wav, .mp3 and .ogg extensions).

So we can use .wav file in order to use custom sound available for both platform:

"notification": {
            "body": "Test notification",
            "title": "Test Test Test",
            "click_action": "FLUTTER_NOTIFICATION_CLICK",
           
            "sound": "your_custom_sound.wav" 
            "android_channel_id": "channel_id_youcreated",
},

          'to':
              "",
        },

Answer 4

For me I am using the flutter_local_notifications to create the notification channel.

include this function (may create multiple notification channel)

Future<void> _createNotificationChannel(String id, String name,
String description, String sound) async {
final flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
var androidNotificationChannel = AndroidNotificationChannel(
  id,
  name,
  description,
  sound: RawResourceAndroidNotificationSound(sound),
  playSound: true,
);

await flutterLocalNotificationsPlugin
    .resolvePlatformSpecificImplementation<
    AndroidFlutterLocalNotificationsPlugin>()
    ?.createNotificationChannel(androidNotificationChannel);}

call the function in initState: (this created 2 notification channel)

_createNotificationChannel("channel_id_1", "channel_name", "description", "alert");
_createNotificationChannel("channel_id_2", "channel_name", "description", "alarm");

Remember to save the file of alert and alarm in the res/raw in file format of .mp3.

with this payload :

{
"notification": {
    "title": "My First Notification",
    "body": "Hello, I'm push notification"
},
"data": {
    "title": "My First Notification"
},
"android": {
    "notification": {
        "channel_id": "channel_id_1"
    }
},
"to": "device_token"}

Answer 5

Reading this it seems that it should be manage automatically (if you didn't use a notification builder) on Android but you have to specify the .mp3 extension too and put it inside notification field and not data one..

"sound": "alarm.mp3"

iOS behaves very differently under the hood but you can use a custom sound by setting the sound: field in the notification payload too. Anyway .mp3 is not a valid APN notification file format, and you need to specify also the file extention.

"sound": "filename.caf"

Follow Apple documentation in order to forge your custom sound file for your app.

mp3 is not a valid format

Preparing Custom Alert Sounds

Local and remote notifications can specify custom alert sounds to be played when the notification is delivered. You can package the audio data in an aiff, wav, or caf file. Because they are played by the system-sound facility, custom sounds must be in one of the following audio data formats:

• Linear PCM

• MA4 (IMA/ADPCM)

• µLaw

• aLaw

Place custom sound files in your app bundle or in the Library/Sounds folder of your app’s container directory. Custom sounds must be under 30 seconds when played. If a custom sound is over that limit, the default system sound is played instead.

You can use the afconvert tool to convert sounds. For example, to convert the 16-bit linear PCM system sound Submarine.aiff to IMA4 audio in a CAF file, use the following command in the Terminal app:

afconvert /System/Library/Sounds/Submarine.aiff ~/Desktop/sub.caf -d ima4 -f caff -v

For exampole to convert your mp3 file in a caf file you could type in terminal:

afconvert -f caff -d LEI16 alarm.mp3 alarm.caf

Read this doc in order to have a deep inside of all generic and specific notifciation payload fields.

UPDATE

I've tested the Android part and I can confirm that putting your .mp3 file in res/raw/ folder the sound is played as documented and expected.

That's my notification payload:

{
 "to" : "my_device_token",
 "collapse_key" : "type_a",
 "priority" : "high",
 "notification" : {
     "body" : "Test Notification body for custom sound {{datestamp}}",
     "title": "Custom sound alert.mp3",
     "sound": "alert.mp3"
 }
}

I've tested also the iOS version after converting .mp3 file to .caf file in that way:

afconvert -f caff -d LEI16 alert.mp3 alert.caf

the same json payload with the different filename works:

{
 "to" : "my_device_token",
 "collapse_key" : "type_a",
 "priority" : "high",
 "notification" : {
     "body" : "Test Notification body for custom sound {{datestamp}}",
     "title": "Custom sound alert.mp3",
     "sound": "alert.caf"
 }
}

Remember to add the file in your main bundle.

That works if the app is terminated or in background.

If you want to show an alert and play a sound when the app is in foreground you have to manage it on onMessage event like someone already have told you here, or you can use a platform-channel here to build your own notification with a Notification.Builder on Android and a UNNotificationCenter on iOS (for example).

UPDATE

This issue has been solved. See here the official comment:

Hey all 👋

As part of our roadmap (#2582) we've just shipped a complete rework of the firebase_messaging plugin that aims to solve this and many other issues.

If you can, please try out the dev release (see the migration guide for upgrading and for changes) and if you have any feedback then join in the discussion here.

Given the scope of the rework I'm going to go ahead and close this issue in favor of trying out the latest plugin.

Thanks everyone 🤓

Answer 6

ShadowSheep did a good job at answering this question, but there's one thing I want to clarify for trying to get the iOS sounds to work.

You have to add the sound into XCode (which is where ShadowSheep speaks of including the asset inside of the main bundle). You can just drag and drop the audio file (in .caf or other supported format mentioned above) into the root directory (usually called Runner for Flutter) in XCode:

If you have done this and follow the setup described in the above question/answer, you should be in business.