[Web mobile Browser] Error: Bad state: Not connected to an application.

[Kiruel]

Which API doesn't behave as documented, and how does it misbehave?
When using the example app from just_audio/examples and build for chrome. Then open the url in safari in a simulation iPhone via the localhost:PORT the audio do not play. See error message below from Safari Technology Preview.

Minimal reproduction project
Provide a link here using one of two options:
The example

To Reproduce (i.e. user steps, not code)
Steps to reproduce the behavior:

1. Run the example on chrome.
2. Open the Url (localhost:PORT) in safari on iOS simulator device on the same machine.
3. Click on "Play" button
4. See error below from Safari Technology Preview

Error messages

Error from backend:

Error: Bad state: Not connected to an application.

Stack Trace:
#0      DevHandler._handleConnection.<anonymous closure> (package:dwds/src/handlers/dev_handler.dart:271:13)
#1      _rootRunUnary (dart:async/zone.dart:1407:47)
#2      _CustomZone.runUnary (dart:async/zone.dart:1308:19)
#3      _CustomZone.runUnaryGuarded (dart:async/zone.dart:1217:7)
#4      _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:339:11)
#5      _BufferingStreamSubscription._add (dart:async/stream_impl.dart:271:7)
#6      _ForwardingStreamSubscription._add (dart:async/stream_pipe.dart:123:11)
#7      _MapStream._handleData (dart:async/stream_pipe.dart:218:10)
#8      _ForwardingStreamSubscription._handleData (dart:async/stream_pipe.dart:153:13)
#9      _rootRunUnary (dart:async/zone.dart:1415:13)
#10     _CustomZone.runUnary (dart:async/zone.dart:1308:19)
#11     _CustomZone.runUnaryGuarded (dart:async/zone.dart:1217:7)
#12     _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:339:11)
#13     _BufferingStreamSubscription._add (dart:async/stream_impl.dart:271:7)
#14     _SyncStreamControllerDispatch._sendData (dart:async/stream_controller.dart:784:19)
#15     _StreamController._add (dart:async/stream_controller.dart:658:7)
#16     _StreamController.add (dart:async/stream_controller.dart:606:5)
#17     new WebSocketImpl.fromSocket.<anonymous closure> (package:web_socket_channel/src/copy/web_socket_impl.dart:730:21)
#18     _rootRunUnary (dart:async/zone.dart:1407:47)
#19     _CustomZone.runUnary (dart:async/zone.dart:1308:19)
#20     _CustomZone.runUnaryGuarded (dart:async/zone.dart:1217:7)
#21     _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:339:11)
#22     _BufferingStreamSubscription._add (dart:async/stream_impl.dart:271:7)
#23     _SinkTransformerStreamSubscription._add (dart:async/stream_transformers.dart:63:11)
#24     _EventSinkWrapper.add (dart:async/stream_transformers.dart:13:11)
#25     _WebSocketProtocolTransformer._messageFrameEnd (package:web_socket_channel/src/copy/web_socket_impl.dart:319:23)
#26     _WebSocketProtocolTransformer.add (package:web_socket_channel/src/copy/web_socket_impl.dart:218:46)
#27     _SinkTransformerStreamSubscription._handleData (dart:async/stream_transformers.dart:111:24)
#28     _rootRunUnary (dart:async/zone.dart:1407:47)
#29     _CustomZone.runUnary (dart:async/zone.dart:1308:19)
#30     _CustomZone.runUnaryGuarded (dart:async/zone.dart:1217:7)
#31     _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:339:11)
#32     _BufferingStreamSubscription._add (dart:async/stream_impl.dart:271:7)
#33     _SyncStreamControllerDispatch._sendData (dart:async/stream_controller.dart:784:19)
#34     _StreamController._add (dart:async/stream_controller.dart:658:7)
#35     _StreamController.add (dart:async/stream_controller.dart:606:5)
#36     _Socket._onData (dart:io-patch/socket_patch.dart:2447:41)
#37     _rootRunUnary (dart:async/zone.dart:1415:13)
#38     _CustomZone.runUnary (dart:async/zone.dart:1308:19)
#39     _CustomZone.runUnaryGuarded (dart:async/zone.dart:1217:7)
#40     _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:339:11)
#41     _BufferingStreamSubscription._add (dart:async/stream_impl.dart:271:7)
#42     _SyncStreamControllerDispatch._sendData (dart:async/stream_controller.dart:784:19)
#43     _StreamController._add (dart:async/stream_controller.dart:658:7)
#44     _StreamController.add (dart:async/stream_controller.dart:606:5)
#45     new _RawSocket.<anonymous closure> (dart:io-patch/socket_patch.dart:1936:33)
#46     _NativeSocket.issueReadEvent.issue (dart:io-patch/socket_patch.dart:1379:14)
#47     _microtaskLoop (dart:async/schedule_microtask.dart:40:21)
#48     _startMicrotaskLoop (dart:async/schedule_microtask.dart:49:5)
#49     _runPendingImmediateCallback (dart:isolate-patch/isolate_patch.dart:118:13)
#50     _RawReceivePort._handleMessage (dart:isolate-patch/isolate_patch.dart:185:5)

Expected behavior
Should play the audio even on mobile browser devices like safari in a mobile device.

Desktop (please complete the following information):

• OS: 14.0 (23A344)
• Browser Chrome

Smartphone (please complete the following information):

• Device: iPhone 15 Pro Max
• OS: iOS17

Flutter SDK version

➜  example git:(minor) flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.16.7, on macOS 14.0 23A344 darwin-arm64, locale en-FR)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.1)
[✓] VS Code (version 1.85.1)
[✓] Connected device (4 available)
[✓] Network resources

• No issues found!

[ryanheise]

There have been previous reports about the limitations of Safari on iOS. It is not an immediate priority for me given that there is a native iOS implementation which serves most purposes, but would welcome any contributors who want to specifically look at the iOS Safari behaviour.

[Kiruel]

Hi, thanks for the quick response. I'm currently looking for a fix.

[Kiruel]

Ok I comeback with some answers.

I finally fix the problem from the simulation, a simple flutter clean and restart the simulation. Then the audio comeback. I try to render only html with AudioElement and got the same problem. So I really don't know why the simulation was doing that.

One thing too is that I deploy this web app to a firebase hosting. And I got no audio too because firebase hosting need this config for each file (via network) to be able to "allow" the file:

firebase.json in the root directory of the project:

{
  "hosting": {
    "public": "build/web",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "**/*.@(jpg|jpeg|gif|png|ttf|json|mp3|flac)", // Here the mp3 and flac sources
        "headers": [
          {
            "key": "Access-Control-Allow-Origin",
            "value": "*"
          },
          {
            "key": "Access-Control-Request-Headers",
            "value": "*"
          }
        ]
      }
    ]
  }
}

Hope it will be a good legacy for people struggle like me. Have a nice day and thanks for the package again @ryanheise .

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs, or use StackOverflow if you need help with just_audio.