Delayed sounds are not playing only on web with iOS devices

[JonasJW]

Checklist

• [x] I read the troubleshooting guide before raising this issue
• [x] I made sure that the issue I am raising doesn't already exist

Current bug behaviour

When I try to play a sound, wrapped in a delayed Future, no audio is played (See Code sample below). This only happens on web when running in the iOS Safari browser. Everything works just fine on other browsers or other platforms.

Expected behaviour

Should play the sound.

Steps to reproduce

Use the following simple code snippet as your main.dart. Make sure to install the audioplayers package and set a sound file (unfortunately I can't upload my sound because Github apparently doesn't support mp3).

Start a web server or run the app on chrome.

Simultaneously start an iOS Simulator, open Safari, and open the web application.

Once the app is running, click on the FloatingActionButton and observe that no sound is played after 10 seconds.

When doing the same outside of the iOS Simulator, the Audio is player as expected.

Code sample

    import 'package:audioplayers/audioplayers.dart';
    import 'package:flutter/material.dart';

    void main() {
      runApp(const MyApp());
    }

    class MyApp extends StatelessWidget {
      const MyApp({super.key});

      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }

    class MyHomePage extends StatefulWidget {
      const MyHomePage({super.key, required this.title});

      final String title;

      @override
      State<MyHomePage> createState() => _MyHomePageState();
    }

    class _MyHomePageState extends State<MyHomePage> {
      final player = AudioPlayer();
      AssetSource tick5 = AssetSource("sounds/tick5.mp3");

      void playAudio() async {
        // await player.play(tick5, volume: 1);
        Future.delayed(Duration(seconds: 10)).then((value) async {
          await player.play(tick5, volume: 1);

        });
      }

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: playAudio,
            child: const Icon(Icons.play_arrow),
          ),
        );
      }
    }

Environment information

• audioplayers version: ^2.0.0

Platform 1: web

• OS name and version: iOS
• Device: iPhone 14 Pro Max Simulator

• build mode: debug

• error peculiarities (optional):

Platforms tested without any issue (optional): web on desktop and android browsers, android and iOS

• test peculiarities:

More information

[Gustl22]

See #813 and #1336. Are you interested in fixing this in a Pull Request?

[JonasJW]

I will do further research into this soon. If I find a fix I will try to do a PR. This issue is very frustrating as it is so specific with only being on iOS devices on web, therefore not easy to debug but I will try my best.

[jbryanh]

You may refer to this first: https://stackoverflow.com/questions/75226411/getting-a-non-user-tap-sound-to-play-on-ios-mobile-web

web sounds on mobile can only start on a user tap. You'll need to start your play, pause, then restart if you want to delay it.