AudioPlayers 5.2.0 failed to play firebase storage url on Web

alanguodev commented 12 months ago

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

AudioPlayers 5.10.0 firebase storage url plays well in Android but fails to play in Flutter web. Error: AudioPlayers Exception: AudioPlayerException( UrlSource(url: https://firebasestorage.googleapis.com/v0/b/paddle-quiz-app.appspot.com/o/tts%2Fen-US%2Fgoogle%2Fneural2%2Fdefault%2Fbe70ef344b7f3df2216421a36467b9a3.mp3?alt=media&token=f08af17f-7ddb-44ce-8ccf-cb105ed528f6), PlatformException(WebAudioError, Failed to set source. For troubleshooting, see https://github.com/bluefireteam/audioplayers/blob/main/troubleshooting.md, MediaError: MEDIA_ELEMENT_ERROR: Format error (Code: 4), null) Error: PlatformException(WebAudioError, Failed to set source. For troubleshooting, see https://github.com/bluefireteam/audioplayers/blob/main/troubleshooting.md, MediaError: MEDIA_ELEMENT_ERROR: Format error (Code: 4), null)

Expected behaviour

Play the same as in Android.

Steps to reproduce

Execute flutter run on the code sample
...
...

Code sample

```dart void main() { } ```

Affected platforms

web

Platform details

No response

AudioPlayers Version

5.10.0

Build mode

No response

Audio Files/URLs/Sources

No response

Screenshots

No response

Logs

my relevant logs

Full Logs

``` my full logs or a link to a gist ``` Flutter doctor: ``` Output of: flutter doctor -v ```

Related issues / more information

No response

Working on PR

no way

Shubham-VE commented 12 months ago

For me, the player was working fine earlier but then it began to give this error. Android Studio Console:

AudioPlayers Exception: AudioPlayerException(
    UrlSource(url: https://firebasestorage.googleapis.com/v0/b/agzone-teams.appspot.com/o/users%2FvKVjvQGeQHORqKWCcceQ6jyFn843%2Faudio%2F2023-11-14%2013_43_03.297.webm?alt=media&token=a2631ea6-dd43-4d38-90af-77bd516845a4), 
    PlatformException(WebAudioError, Failed to set source. For troubleshooting, see https://github.com/bluefireteam/audioplayers/blob/main/troubleshooting.md, MediaError: MEDIA_ELEMENT_ERROR: Format error (Code: 4), null)
Error: PlatformException(WebAudioError, Failed to set source. For troubleshooting, see https://github.com/bluefireteam/audioplayers/blob/main/troubleshooting.md, MediaError: MEDIA_ELEMENT_ERROR: Format error (Code: 4), null)

dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 327:10  createErrorWithStack
dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 337:28            _throw
dart-sdk/lib/core/errors.dart 120:5                                           throwWithStackTrace
dart-sdk/lib/async/zone.dart 1386:11                                          callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                              _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                               _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:15           <fn>

Chrome console:

Failed to load resource: the server responded with a status of 400 ()
js_primitives.dart:30 AudioPlayers Exception: AudioPlayerException( UrlSource(url: https://firebasestorage.googleapis.com/v0/b/agzone-teams.appspot.com/o/users%2FvKVjvQGeQHORqKWCcceQ6jyFn843%2Faudio%2F2023-11-14%2013_43_03.297.webm?alt=media&token=a2631ea6-dd43-4d38-90af-77bd516845a4),  PlatformException(WebAudioError, Failed to set source. For troubleshooting, see https://github.com/bluefireteam/audioplayers/blob/main/troubleshooting.md, MediaError: MEDIA_ELEMENT_ERROR: Format error (Code: 4), null)
errors.dart:327 Uncaught (in promise) Error: PlatformException(WebAudioError, Failed to set source. For troubleshooting, see https://github.com/bluefireteam/audioplayers/blob/main/troubleshooting.md, MediaError: MEDIA_ELEMENT_ERROR: Format error (Code: 4), null)

    at Object.createErrorWithStack (errors.dart:327:10)
    at Error._throw (core_patch.dart:337:28)
    at Error.throwWithStackTrace (errors.dart:120:5)
    at async._AsyncCallbackEntry.new.callback (zone.dart:1386:11)
    at Object._microtaskLoop (schedule_microtask.dart:40:11)
    at _startMicrotaskLoop (schedule_microtask.dart:49:5)
    at async_patch.dart:181:15

I am not sure if this is due to Flutter upgrade(v3.1.10 to v3.13.7 for me) or the package version upgrade as I noticied this error a bit late.

Shubham-VE commented 12 months ago

@alanguodev Adding this resolved the issue for me, I am using audioplayers: ^5.2.0:

dependency_overrides:
  audioplayers:
    git:
      url: https://github.com/bluefireteam/audioplayers.git
      path: 'packages/audioplayers'
  audioplayers_platform_interface:
    git:
      url: https://github.com/bluefireteam/audioplayers.git
      path: 'packages/audioplayers_platform_interface'
  audioplayers_web:
    git:
      url: https://github.com/bluefireteam/audioplayers.git
      path: 'packages/audioplayers_web'
  audioplayers_linux:
    git:
      url: https://github.com/bluefireteam/audioplayers.git
      path: 'packages/audioplayers_linux'
  audioplayers_android:
    git:
      url: https://github.com/bluefireteam/audioplayers.git
      path: 'packages/audioplayers_android'
  audioplayers_darwin:
    git:
      url: https://github.com/bluefireteam/audioplayers.git
      path: 'packages/audioplayers_darwin'
  audioplayers_windows:
    git:
      url: https://github.com/bluefireteam/audioplayers.git
      path: 'packages/audioplayers_windows'

Gustl22 commented 12 months ago

@alanguodev we don't have a version 5.10.0 yet.

Gustl22 commented 12 months ago

@alanguodev the url is playing fine on the current master version of AudioPlayers: https://bluefireteam.github.io/audioplayers/

zaprogrammer commented 10 months ago

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

AudioPlayers 5.10.0 firebase storage url plays well in Android but fails to play in Flutter web. Error: AudioPlayers Exception: AudioPlayerException( UrlSource(url: https://firebasestorage.googleapis.com/v0/b/paddle-quiz-app.appspot.com/o/tts%2Fen-US%2Fgoogle%2Fneural2%2Fdefault%2Fbe70ef344b7f3df2216421a36467b9a3.mp3?alt=media&token=f08af17f-7ddb-44ce-8ccf-cb105ed528f6), PlatformException(WebAudioError, Failed to set source. For troubleshooting, see https://github.com/bluefireteam/audioplayers/blob/main/troubleshooting.md, MediaError: MEDIA_ELEMENT_ERROR: Format error (Code: 4), null) Error: PlatformException(WebAudioError, Failed to set source. For troubleshooting, see https://github.com/bluefireteam/audioplayers/blob/main/troubleshooting.md, MediaError: MEDIA_ELEMENT_ERROR: Format error (Code: 4), null)

Expected behaviour

Play the same as in Android.

Steps to reproduce

Execute flutter run on the code sample

...

...

Code sample

Code sample

Affected platforms

web

Platform details

No response

AudioPlayers Version

5.10.0

Build mode

No response

Audio Files/URLs/Sources

No response

Screenshots

No response

Logs
my relevant logs
Full Logs

Related issues / more information

No response

Working on PR

no way

@alanguodev Can you share the rules on this bucket ? I am trying to host a mp3 file on a Storage bucket but the player throw the same error you had on the web only, not mobile.

My rules are:


service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read;
      allow write: if request.auth != null;
    }
  }
}

MaroPotter commented 8 months ago

Any updates? It's already 3 months

Gustl22 commented 8 months ago

@MaroPotter can you provide reproducible steps and state your audioplayers version and flutter doctor?

MaroPotter commented 8 months ago

@Gustl22 audioplayers: ^4.1.0 Flutter doctor: [✓] Flutter (Channel stable, 3.16.9, on macOS 14.1 23B2073 darwin-arm64, locale en-GB) [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [✓] Xcode - develop for iOS and macOS (Xcode 15.2) [✓] Chrome - develop for the web [✓] Android Studio (version 2023.1) [✓] VS Code (version 1.86.2) [✓] Connected device (2 available) [✓] Network resources • No issues found!

When I start to play the audio in Chrome I get an error in 'Future play' method of audioplayer: "AudioPlayers Exception: AudioPlayerException( UrlSource(url: https://www.chosic.com/wp-content/uploads/2020/05/Scott_Joplin_-_04_-_The_Entertainer_1902_piano_roll(chosic.com).mp3), PlatformException(4, MEDIA_ELEMENT_ERROR: Format error, null, null)"

When I run it on all other devices it works correctly.

Gustl22 commented 8 months ago

@MaroPotter well, have you tried the latest version 5.2.1?

MaroPotter commented 8 months ago

@Gustl22 I've just updated to the latest version and yes, the error still persists (only on Chrome as well).

abdgul99 commented 8 months ago

@MaroPotter well, have you tried the latest version 5.2.1?

I also have the same issue on chrome its fine on android and on ios but when its come to web(chrome) its showing me this error AudioPlayers Exception: AudioPlayerException( UrlSource(url: https://firebasestorage.googleapis.com/v0/b/*************edited************37), PlatformException(WebAudioError, Failed to set source. For troubleshooting, see https://github.com/bluefireteam/audioplayers/blob/main/troubleshooting.md, MediaError: MEDIA_ELEMENT_ERROR: Format error (Code: 4), null) PlatformException(WebAudioError, Failed to set source. For troubleshooting, see https://github.com/bluefireteam/audioplayers/blob/main/troubleshooting.md, MediaError: MEDIA_ELEMENT_ERROR: Format error (Code: 4), null) music playing NotSupportedError: The element has no supported sources.

sorane commented 7 months ago

If using Firebase Storage, Configured CORS?

Gustl22 commented 7 months ago

Thanks @sorane, yes it's a CORS issue. As described here you guys have to set the CORS rules in your Server / Firebase: https://github.com/bluefireteam/audioplayers/blob/main/troubleshooting.md#web-cors-policy

For development you can also disable the CORS security feature via flutter run -d chrome --web-browser-flag="--disable-web-security".

Playing audio works on other platforms (native apps), because they don't suffer from data leaks e.g through foreign malicious websites which access your original webpage via cookies, therefore SOP is only needed on web.

aelshaabany-wolf commented 6 months ago

Unfortunately, this issue still exists, even when trying on the example app on the web.

The issue exists only on the web application:

Either running it with CORS disabled. flutter run -d chrome --web-browser-flag="--disable-web-security"
Hosting the application on firebase and allow read for all:
```
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
    allow read;
  allow write: if request.auth != null;
}
}
}
```
I tried hosting the mp3 on aws, firebase storage, or getting a random mp3 file url on the web and use it, all return the same error.

Here is when I tried the scenarios on the example web app:

Gustl22 commented 6 months ago

@aelshaabany-wolf I assume, then you did something wrong. And you cut off the error message with the CORS policy (https://bluefireteam.github.io/audioplayers/):

Also running the example project via flutter run -d chrome --web-browser-flag="--disable-web-security" did work for me. Even running any project with this flag did work, as long you use the tab, where this flag is enabled:

I don't know what exactly to set in AWS, as I didn't ever use it, but there should be an option.

LabGecko commented 4 months ago

Damn. Ditching the lib due to user-blaming.

bluefireteam / audioplayers