iOS lockscreen and control center's play/pause buttons greyed out sometimes in real device with flutter_tts.

[SeungMinKang]

Documented behaviour

A controller for broadcasting the current PlaybackState to the app's UI, media notification and other clients. The state changes broadcast via this stream can be listened to via the Flutter app's UI

Actual behaviour

On iOS emulator, pause function works fine. Tapping the pause button fast, slow, or in the middle of the playing, the control center's play/pause button is on active. But on the real device, buttons in control center's and lockscreen not working properly. When the button is tapped in a short interval, control center's play/pause button always shows inactive state.

Minimal reproduction project

Official example: example_multiple_handlers.dart

Reproduction steps

1. run "example_multiple_handlers.dart" file.
2. change to Text-To-Speech
3. tap the play/pause button in a short interval.
4. check the state of play/pause buttons both on lockscreen, and on control center.

Output of flutter doctor

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.65.0)
[✓] Connected device (3 available)```
### Devices exhibiting the bug
OS:
From iOS 14.8 to iOS 15.3
Device:
iPhone Xs
iPad Air (3rd Gen.)

![533BFE22-7094-4043-A86F-CCC4E6F8FE64_1_102_o](https://user-images.githubusercontent.com/60646039/156993956-d73b8f31-756f-4042-a480-bf410c401721.jpeg)
Plugin works fine on iOS Emulator.

![939F10AA-5BC5-443D-BE4E-700755C6AACD_1_102_o](https://user-images.githubusercontent.com/60646039/156994310-d8fea8ae-e753-41dd-a29a-7f2a54043c42.jpeg)
play/pause button in not in Active state on iOS real device.

[ryanheise]

I'm not 100% clear on the actual behaviour you've described above. Would it be possible to do a screen recording of the bug?

[SeungMinKang]

I'm Sorry, since english is not my first language, my description could be hard to understand. Here are the videos about the bugs.

https://user-images.githubusercontent.com/60646039/157148200-904cf6fc-47e3-4cc5-8534-e9346352c90c.mov

In iOS emulator, when a play/pause button is clicked on the UI screen, it is normally activated in lockscreen.

https://user-images.githubusercontent.com/60646039/157148185-02f3b9b6-1369-4cc1-b280-ff4d779ad2b6.mov

But in the real device, when you click the play/pause button quickly, the play/pause button is disabled on the lock screen.

[ryanheise]

Thanks for doing that. It seems from your second video that the button is disabled not only for a quick play/pause but also for the longer play/pause, or am I misinterpreting that?

[SeungMinKang]

I tested it again, and there seems to be a bug when the button pauses at the beginning of playback.

[itss-sid]

I am also having the same issue, after pausing the audio player the play button gets disabled, any suggestion?

[838]

@ryanheise We also have the same issue, in order at least to make the control center play/pause button intractable we always add the MediaControl.play and MediaControl.play in playbackState.controls when play() or pause() method is called. But this will also cause that when pressing the play button from the app the control center button does not get updated :(.

https://user-images.githubusercontent.com/3314171/189870026-0be0ff8d-5f33-4d54-8493-3c8e8454a3df.mov

[ryanheise]

Does this only affect text-to-speech?

If it works for regular audio, then a solution may be to have a silent mp3 file to play alongside this to get the buttons to behave. That would be similar to the workaround currently used on the Android side.

[838]

@ryanheise Actually in both tts and mp3 audioHander we do this:

     controls: [
        // We have to add both play/pause controls on iOS to make sure the button does not get
        // disabled or grayed out on playback toggle.
        if (Platform.isIOS || !state.playing) MediaControl.play,
        if (Platform.isIOS || state.playing) MediaControl.pause,
      ],

We do it only for ios to make sure both play and pause buttons won't be visible on androd's notification center.

[ryanheise]

But presumably you use a different audio_session configuration in order to support TTS and it is possible that the presence of that in your app could affect things, too. I would be interested to know whether this also happens in apps without any TTS code.

[838]

@ryanheise We use the default speech configuration if this is the one you mean.

AudioSession.instance.then((session) {
      session.configure(const AudioSessionConfiguration.speech());
    });

[ryanheise]

Can you test with a non-speech configuration and also remove any TTS plugin to verify whether it affects non-TTS configurations as well?

[838]

@ryanheise I have tested both in our app and the example_playlist.dart without any TTS plugin/configuration on a real device and it works pretty fine except there is very short period that the play button gets greyed out when pausing the playback from control center.

https://user-images.githubusercontent.com/3314171/190370820-f1842cf4-7e12-4244-8d1a-9752b3419b70.mov

[ryanheise]

That is very interesting, thanks for confirming that.

I wonder if you could try reintroducing things one by one to see which specific thing breaks it?

For example, if you just add the TTS plugin to your pubspec without doing any code changes, does that break it? Or if you change the audio_session configuration to speech without adding the TTS plugin, does that break it?

[838]

@ryanheise It's me that should thank you for your time and awsome plugin 🙂.

Tested with the example_playlist.dart

If you just add the TTS plugin to your pubspec without doing any code changes, does that break it?

No

If you change the audio_session configuration to speech without adding the TTS plugin, does that break it?

No

Seems that nothing can affect the relation between the non-TTS playback and the Control Center 😅.

[ryanheise]

Hmm, so you're saying then that example_playlist.dart works correctly but example_multiple_handlers.dart doesn't work correctly?

[838]

Yes, but the only thing that does not work in example_multiple_handlers.dart is the update from the TTS-handler to the Control Center, fx. when I pause the TTS inside the app it does not update the Control center. All other functionalities work works very well.

[ryanheise]

I see, no solutions stand out immediately to me, except a couple of guesses at this point. One is to try playing a silent mp3, and the other is to try editing the TTS example to broadcast events more similarly to the audio player example to see if that makes a difference.

[838]

hmm, I'm not sure if the second option will work, becasue in our app the TTS and Mp3 events are very similar.

Let me know if there is anything I have to test 🙂

[ryanheise]

You can try the same experiments I will try above, although you might be able to try them sooner than I can.

[akmittal006]

I am facing the same issue, any solution found so far? @ryanheise @838

[leonidlist]

Facing the same issue, but found that removing video_player package from dependencies, play/pause button in iOS notifications started working as expected.

[lecanhhiep]

@leonidlist I don't use video_player but also faced the same issue.

[muonroi]

Hi you can share me code use audio_service with flutter_tts. Thanks @838