Tau: [BUG] onloaderror when playing from URI on Flutter web on iOS web browsers

[dbaltrui]

Flutter Sound Version :

• Released

• ^7.5.1+2

• FULL

• Result of the command "flutter pub deps | grep flutter_sound"
  |-- flutter_sound 7.5.1+2
  | |-- flutter_sound_platform_interface 7.5.1+2
  | |-- flutter_sound_web...
  |-- flutter_sound_web 7.5.1+2
  | |-- flutter_sound_platform_interface...

---

Severity

• Sound does not play in mobile iOS web browser, but plays fine in desktop web browser and Android web browser.

---

Platforms you faced the error

• iOS mobile web browser, both Chrome and Safari (confirmed Android mobile web browser Chrome works fine)

---

Logs

Result of chrome://inspect on iOS mobile Chrome browser only says "onloaderror". No mechanisms exist in the package to get further details.

---

Screenshots

None

---

Describe the bug
Playing audio from URI works fine on desktop web browser and Android mobile web browser, but fails silently on iOS mobile web browser.

To Reproduce
Steps to reproduce the behavior:

1. Try to play audio fromURI in flutter for web app on iOS web browser:
   await playerModule.startPlayer(
   fromURI: webAudioFilePath,
   codec: codec,
   sampleRate: tSTREAMSAMPLERATE,
   whenFinished: () {
   print('Play finished');
   setState(() {});
   });

Expected behavior
Audio should play like it does on desktop web browser flutter for web app.

---

Additional context**

My guess is that it may have something to do with the codec or tSTREAMSAMPLERATE due to other code comments in the package to that effect. File I'm trying to play is an .m4a that is stored in the app assets (loading from rootBundle also doesn't work, but that's a separate issue).

Thanks for any help you can provide. Love the package! It's the only one I've found that actually works reliably with assets on both native and web right now.

[Larpoux]

I will look to that after lunch.

[Larpoux]

If you want to play an asset, you do not use fromURI, but fromDataBuffer :

        Uint8List dataBuffer = (await rootBundle.load(webAudioFilePath).buffer.asUint8List();
        await playerModule.startPlayer
        (
              fromDataBuffer: dataBuffer,
              codec: aacADTS,
              whenFinished: () 
              {
                         print('Play finished');
                         setState(() {});
              }
        );

[dbaltrui]

Thank you for the quick response. Yes, I used the buffer approach at first, but it was taking way too long to load the audio on web. The fromURI approach loads faster, so I would prefer that method if this bug can be fixed.

[Larpoux]

Which bug ? The demo example works fine one Flutter Web, when you specify :

• Media -> asset
• codec -> aac ADTS

[Larpoux]

If you want to download the file from a remote host, you can use fromURI.

[dbaltrui]

fromURI does not work for me on Flutter web when opening the Flutter website on an iOS device using Chrome or Safari.

[Larpoux]

What is your remote file ? public ?

[dbaltrui]

Yes, public, and it opens fine on the Flutter website on Android devices using Chrome.

[Larpoux]

What is your remote URL ?

[dbaltrui]

derussy.app is the site. Drilling down into any of the landmarks and trying to play the audio should work on any desktop or Android browser. iOS fails.

[Larpoux]

Maybe you can look to this

[Larpoux]

Perhaps a problem with CORS

[dbaltrui]

Yes, might be CORS. I'll check the Firebase Hosting CORS setting. Not sure why it would work on Android and Desktop and not iOS, though.

[Larpoux]

right.

[Larpoux]

If Android OK, you should double check the Codec of your remote file.
iOS (webKit) is bull shit.

[Larpoux]

may I have your URL ?

[dbaltrui]

derussy.app

[dbaltrui]

An example audio file URL: https://derussy.app/assets/assets/Landmark1-APCSS/landmark1-audio.m4a

[Larpoux]

This is a WWW site. Not an audio file

[Larpoux]

Thank you

[Larpoux]

OK. I changed the remote URI of the Demo example, with your URI.
It works fine. (on firefox).

[dbaltrui]

Firefox on an iOS device?

[Larpoux]

NO, sorry. I am going to try on ios now.

[dbaltrui]

I updated the Firebase hosting CORS settings and it's still not working on iOS Chrome. Also just tested on iOS Firefox, no joy there either.

[Larpoux]

This is not a problem with CORS. It works fine on firefox.

Probably a problem with Webkit. I am going to look on Safari.
I hate Apple.Webkit is really bad.

[dbaltrui]

I'm with you on the Apple.Webkit.
In the case of this bug, I am suspicious of the codec (kIsWeb is Codec.opusWebM) and tSTREAMSAMPLERATE (44000) combination.

[Larpoux]

Is your remote example opusWebm or aacADTS ?

[Larpoux]

remote file

[dbaltrui]

It's a .m4a file. I'm not strong on audio codecs; is there some way for me to verify?

[dbaltrui]

In my code, I leave the codec assignment as it was in the example:
Codec _codec = (kIsWeb) ? Codec.opusWebM : Codec.aacADTS;
My guess is that it's trying to use opusWebM, which seems... suspicious.

[Larpoux]

You can use ffmpeg to check your file.
Personally I use MediaInfo.app under Macos, but I think this very simple utility is not free.

[dbaltrui]

I misspoke earlier, only one of my files was m4a, all the rest are mp3. I will make them all uniform, but both formats are experiencing the same problem.
Using Quicktime, I now see that the formats are listed as MPEG Layer 3 (mp3) and 44100 Hz. Perhaps the tSTREAMSAMPLERATE being set to 44000 is causing the problem?

[Larpoux]

Not necessary. SampleRate is used only for PCM.

[Larpoux]

Both AAC and MP3 are supposed to be supported by Webkit.

I am having some difficulty to build the Demo for Webkit.
Please wait a moment

[Larpoux]

Do not use opusWebm on iOS or Safari.

• OPUS-WEBM is a really great codec, but not supported under Webkit.
  I will try to change that in the future.

• MP3 is a bad Codec (need a license for encoders), but is supported by everybody for players. Probably a good choice if you do not want to encode mp3 in your App

• AAC-ADTS and AAC-MP4 are better codecs than MP3. But they are less used . Probably good choices, too.

[Larpoux]

I am having troubles with your remote audio file. Even on Firefox on a Macintosh.

I am going to figure what is bad with your file.
Please wait.

[dbaltrui]

Thank you for the advice on the codecs. The file is now playing properly on iOS Chrome after changing the codec to Codec.aacADTS:

await playerModule.startPlayer(
fromURI: webAudioFilePath,
codec: Codec.aacADTS,
sampleRate: tSTREAMSAMPLERATE,
whenFinished: () {
print('Play finished');
setState(() {});
});

Perhaps a note / comment in the example to mention the compatibility would help others. I definitely appreciate your prompt engagement.

[dbaltrui]

FYI, I removed the .m4a file that I linked to before and changed it to .mp3. It is now the following link in case you want to keep troubleshooting:

https://derussy.app/assets/assets/Landmark1-APCSS/landmark1-audio.mp3

[Larpoux]

I will setup tools so that all τ users will be able to share their experiences without having to dive inside into the too many issues.

[dbaltrui]

You've done incredible work with these tools; thank you so much for creating the foundation upon which we can build the things we dream up.

[Larpoux]

The real father of Flutter Sound is my friend @hyochan . Thanks to him.

[Larpoux]

I added a paragraph in this guide