Chrome doesn't work.

[du220]

🐛 Bug Report

Edge and Firefox play normally. Chrome doesn't work.

Expected behavior

Reproduction steps

Future _speakNumber(String number) async {
NcsProvider goNcs = Provider.of(context, listen: false);
try {
await _flutterTts.setLanguage("en-US");
//await _flutterTts.setVoice({"name": "en-US-Wavenet-D", "locale": "en-US"});
await _flutterTts.awaitSpeakCompletion(true);
//await _flutterTts.setSpeechRate(0.6);
await _flutterTts.setVolume(1.0);
await _flutterTts.setSpeechRate(1.0);
await _flutterTts.setPitch(1.0);

  //await _flutterTts.speak("A12");

  await _flutterTts.speak(number);

  if(goNcs.nRepetitions==2){await _flutterTts.speak(number);}
} catch (e) {
  debugPrint("TTS Error: $e");
}

}

Configuration

Version:
flutter_tts: ^4.2.3

Platform:

• :web Google Chrome::Version 140.0.7339.81 (Official Build) (64-bit)

[du220]

Issue resolution

cause:
https://developer.chrome.com/blog/autoplay

Site Permissions
Chrome lets users allow autoplay manually:
Lock icon → Site settings → Sound → “Allow”
Or in chrome://settings/content/sound
this is controlled by the user, not the app.

[crimesp]

if you wrap your root widget in a stateful widget, you can check if its web, and show a clickable button before attempting any tts or sound, something like:

enum AppState { initial, dbLoaded, waitingOnWebClick, postWebClick, ready }

class _AppRootState extends ConsumerState with WindowListener {
AppState appLoadState = AppState.initial;

static StreamSubscription? appStateSubscription;
final LocalNotificationsManager localNotificationsManager = LocalNotificationsManager();

static int restoreCount = 0;

// static StreamSubscription? ringSubscription;

@OverRide
void initState() {
super.initState();

initialiseApp(context: context);

}

Future initialiseApp({required BuildContext context}) async {
await ConfigureApplication.configure_preDatabase();
setState(() {
appLoadState = AppState.dbLoaded;
});
if ((kIsWeb || kSimulateWeb)) {
setState(() {
appLoadState = AppState.waitingOnWebClick;
});
return;
}
await configurePostDatabaseAndWebClick(context);
}

Future configurePostDatabaseAndWebClick(BuildContext context) async {
await TTSServiceManager.instance.fetchEngineVoices;
await ConfigureApplication.configure_postDatabase(context: context);
configureFGBGEventsForMobile();
setState(() {
appLoadState = AppState.ready;
});
}

@OverRide
Widget build(BuildContext context) {
return Directionality(
textDirection: TextDirection.ltr,
child: switch (appLoadState) {
AppState.initial => const Center(child: RotatingLogo()),
AppState.dbLoaded => const Center(child: RotatingLogo()),
AppState.waitingOnWebClick => Center(child: buildWebTapToStart(context)),
AppState.postWebClick => const Center(child: RotatingLogo()),
AppState.ready => const MediaQueryProviderScope(child: MainApp()),
},
);
}

Widget buildWebTapToStart(BuildContext context) {
return Padding(
padding: EdgeInsets.all(15 * context.sp),
child: Column(
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const AppIconLogo(),
AppTextLogo(),
const Gap(20),
ColourfulPanelIconTextButton(
iconData: iconNotStarted,
label: 'Tap here to start',
onPressed: () async {
// webNeedsUserToClick = false;

                setState(() {
                  appLoadState = AppState.postWebClick;
                });
                unawaited(configurePostDatabaseAndWebClick(context));
              },
              color: RainbowSwatch.green,
            ),
          ],
        ),
      ),
      const Text(
        'Please note:',
        style: TextStyle(fontWeight: FontWeight.bold),
      ),
      const Text('Speech only works on mac & windows desktop.'),
      const Text('Quality varies depending on your browser.'),
      const Text('Use the mobile version for better performance.'),
      GestureDetector(
          onTap: () => launchUrl(
                Uri.parse('https://transitiontimer.com/'),
              ),
          child: Text(
            'Download mobile version here',
            style: TextStyle(color: RainbowSwatch.blue, decoration: TextDecoration.underline),
          )),
      const Gap(50),
    ],
  ),
);

}