Sounds don't play on Web web browser on iOS

[vivchar]

Steps to reproduce:

1. run flutter build web
2. open the web-application on iOS device (possible the same on android web-browser)
3. try to play audio Result: nothing happens Expected result: you should listen audio FYI: it works fine when open web-application via desktop browser.

[ukasz123]

• What type of audio asset are you using? (local asset or remote url?)
• How do you start the web app you've build?
• Have you tried to build and run example application?

[vivchar]

1 I use local wav asset 2 yes, I built the app and deploy on server 3 I tried it now.

/Users/vvv/Documents/Projects/soundpool-master/soundpool/example
bash-3.2$ flutter build web
Running "flutter pub get" in example...                             2.6s
Compiling lib/main.dart for the Web...                             17.0s
bash-3.2$ ls
README.md   android     build       ios     lib     pubspec.lock    pubspec.yaml    sounds      web
bash-3.2$ cd build/web/
bash-3.2$ ls
assets              flutter_service_worker.js   main.dart.js
c-c-1.mp3           index.html          main.dart.js.map
bash-3.2$ git init
Initialized empty Git repository in /Users/vvv/Documents/Projects/soundpool-master/soundpool/example/build/web/.git/
bash-3.2$ git add --all
bash-3.2$ git commit -m 'test'
[master (root-commit) 89867fa] test
 13 files changed, 52892 insertions(+)
 create mode 100644 assets/AssetManifest.json
 create mode 100644 assets/FontManifest.json
 create mode 100644 assets/LICENSE
 create mode 100644 assets/fonts/MaterialIcons-Regular.ttf
 create mode 100644 assets/packages/cupertino_icons/assets/CupertinoIcons.ttf
 create mode 100755 assets/sounds/dices.m4a
 create mode 100755 assets/sounds/do-you-like-it.wav
 create mode 100755 assets/sounds/van-sliding-door-daniel_simon.wav
 create mode 100755 c-c-1.mp3
 create mode 100644 flutter_service_worker.js
 create mode 100755 index.html
 create mode 100644 main.dart.js
 create mode 100644 main.dart.js.map
bash-3.2$ git remote add origin git@github.com:vivchar/soundpool.git
bash-3.2$ git push -u origin master
Enumerating objects: 21, done.
Counting objects: 100% (21/21), done.
Delta compression using up to 6 threads
Compressing objects: 100% (18/18), done.
Writing objects: 100% (21/21), 1.55 MiB | 462.00 KiB/s, done.
Total 21 (delta 0), reused 0 (delta 0)
To github.com:vivchar/soundpool.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.
bash-3.2$ flutter channel
Flutter channels:
  master
  dev
* beta
  stable

https://vivchar.github.io/soundpool/#/ Play button works on my iPhone Play cheering does not work on my iPhone, possible here is a problem with playing wav files

[ukasz123]

Actually, the Play button plays do-you-like-it.wav but second loads c-c-1.mp3 from relative url and in your case it points to https://vivchar.github.io/c-c-1.mp3 (because of this line - it was workaround for CORS issues in development). That ends with 404 (file is not loaded). You can change that line in your code to use correct url and try again. You can try to use your own audio files with the example app to check if they are may cause the problem

[vivchar]

but It works fine when I launch it on my desktop browser. UPD: no it is not work too

[vivchar]

hm, I can't reproduce it on test project, by some reason it works fine on android web browser and on iOS web browser.

But mine project works only on android web browser, iOS web browser does not play audio. Also it works fine on all devices and all desktop web browsers.

Maybe here is some conflict with other dependencies. I don't know.

Possible you will able to find any problem: 1 open this link in iOS web browser https://fitmer.web.app 2 click at first item in list 3 click at the play button 4 wait Result: last 3 seconds you should listen audio

[gotw]

I am having this problem on Safari web browser both on iOS and Mac. I can fix it on Mac Safari by setting Safari->Preferences->Websites->Auto-Play->Allow All Auto-Play for my app's URL. I believe this is the problem: SoundPool audio is played as "Auto-Play" in (at least) Safari. Clearly it should not right?

[ukasz123]

Thank you, @gotw for the suggestion. If what you described is the root cause of the problem then I'd suggest applying solution described here: https://medium.com/@curtisrobinson/how-to-auto-play-audio-in-safari-with-javascript-21d50b0a2765 (I'd still keep that behind kIsWeb flag). Basically you need to wait with loading audio until user taps anything. I'll try to make working example using Mac Safari.

[gotw]

@ukasz123 I believe that was it. I am now hearing audio in Safari on Mac. I would like to see a working example when you make it for further confirmation. Thanks!

[eugenioamato]

1 open this link in iOS web browser https://fitmer.web.app 2 click at first item in list 3 click at the play button 4 wait Result: last 3 seconds you should listen audio

I confirm that there is NO sound on Safari and Chrome under---> Ios 13.6 (Iphone 11)

someone suggested in another channel to implement a trick in the html page https://medium.com/@curtisrobinson/how-to-auto-play-audio-in-safari-with-javascript-21d50b0a2765

but it seems dirty and basically wrong. Got to investigate on how to send a command like Howl.detectUserInitialInteraction(); used in the other package (https://github.com/gmpassos/howler.dart)