Closed platonicsocrates closed 3 years ago
Larpoux
commented
3 years ago Of course it is not possible to manage the lock screen from a Web application. A web application run in a virtual and protected environment. It cannot have access to the real device (the device lock screen)
platonicsocrates
commented
3 years ago @Larpoux Thanks for looping in!
I'm not trying to manage the lock screen - just to play an audio recording in Flutter web. Is this not possible?
Larpoux
commented
3 years ago Yes, sure.
But do not use startPlayerFromTrack(). This verb is used to manage the lock screen.
Just use startPlayer()
platonicsocrates
commented
3 years ago Thanks - but I don't think that API is exposed via:
SoundPlayerUI.fromTrack(
Track(trackPath: 'https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3'),
),How can we use SoundPlayerUI in the way you're suggesting?
Larpoux
commented
3 years ago I am sorry, I do not know very well the Widget UI. You are probably right : the Widget UI is perhaps not correctely handled under Flutter Web.
This is bad ... I am going to add your request to the TODO list.
Larpoux
commented
3 years ago I added your request in : the roadmap
The TODO list is actually full, and we have to make some priorities in the development. You can vote for the tasks that you think important here
platonicsocrates
commented
3 years ago Thanks! For now do you have any idea what the workaround might be?
Larpoux
commented
3 years ago It would be not too difficult to write your own screen.
I do not like WidgetUI, I always prefer to control myself the code. A form using a regular Player, and use "startPlayer()" , "stopPlayer" , "pausePlayer", ... is really simple to do, and you will have a personal touch.
platonicsocrates
commented
3 years ago @Larpoux Thanks for assisting here. However, I've tried even with the your simplest example on Web (https://github.com/dooboolab/flutter_sound/blob/master/flutter_sound/example/lib/simple_playback/simple_playback.dart) and still get the same Error 1:
FS:---> openAudioSession
TypeError: dart.global.newPlayerInstance is not a function
at flutter_sound_player_web.FlutterSoundPlayerWeb.new.initializeMediaPlayer (http://localhost:50980/packages/flutter_sound_web/flutter_sound_player_web.dart.lib.js:63:42)
at initializeMediaPlayer.next (<anonymous>)...
On further investigation, this can be isolated to calling openAudioSession() and is 100% reproducible on web.
Larpoux
commented
3 years ago Did you put the following in the header of your index.html ?
<script src="https://cdn.jsdelivr.net/npm/tau_sound_core@7.4.13/js/flutter_sound/flutter_sound_player.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tau_sound_core@7.4.13/js/flutter_sound/flutter_sound_recorder.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/howler@2/dist/howler.min.js"></script>Unfortunately, I am realizing that the documentation was erroneous.
I have just updated it. here I am really sorry that you spent some times with that. Keeping a documentation in phase with dev. is not something easy.
platonicsocrates
commented
3 years ago Not to worry - thanks for helping out. However, after adding those scripts to the index.html this new error is thrown:
FS:---> openAudioSession
FS:<--- openAudioSession
FS:---> startPlayer
FS:---> stop
stopTimer()
FS:<--- stop
FS:---> _convert
FS:---> needToConvert
FS:<--- needToConvert
FS:<--- _convert
stopTimer()
playAudioFromURL : https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3
ReferenceError: tabFormat is not defined
at FlutterSoundPlayer.playAudioFromURL (https://cdn.jsdelivr.net/npm/tau_sound_core@7.4.13/js/flutter_sound/flutter_sound_player.min.js:7:818)
at FlutterSoundPlayer.startPlayer (https://cdn.jsdelivr.net/npm/tau_sound_core@7.4.13/js/flutter_sound/flutter_sound_player.min.js:7:2161)
at flutter_sound_player_web.FlutterSoundPlayerWeb.new.startPlayer (http://localhost:51582/packages/flutter_sound_web/flutter_sound_player_web.dart.lib.js:121:45)
at startPlayer.next (<anonymous>)
at runBody (http://localhost:51582/dart_sdk.js:38550:34)
at Object._async [as async] (http://localhost:51582/dart_sdk.js:38581:7)
at flutter_sound_player_web.FlutterSoundPlayerWeb.new.startPlayer (http://localhost:51582/packages/flutter_sound_web/flutter_sound_player_web.dart.lib.js:114:20)
at flutter_sound_player.FlutterSoundPlayer.new.<anonymous> (http://localhost:51582/packages/flutter_sound/public/ui/sound_recorder_ui.dart.lib.js:4662:106)
at Generator.next (<anonymous>)
at http://localhost:51582/dart_sdk.js:38530:33
at _RootZone.runUnary (http://localhost:51582/dart_sdk.js:38387:58)
at _FutureListener.thenAwait.handleValue (http://localhost:51582/dart_sdk.js:33377:29)
at handleValueCallback (http://localhost:51582/dart_sdk.js:33925:49)
at Function._propagateToListeners (http://localhost:51582/dart_sdk.js:33963:17)
at _Future.new.[_completeWithValue] (http://localhost:51582/dart_sdk.js:33805:23)
at async._AsyncCallbackEntry.new.callback (http://localhost:51582/dart_sdk.js:33828:35)
at Object._microtaskLoop (http://localhost:51582/dart_sdk.js:38645:13)
at _startMicrotaskLoop (http://localhost:51582/dart_sdk.js:38651:13)
at http://localhost:51582/dart_sdk.js:34178:9
The lines which must be put in your header are :
<script src="https://cdn.jsdelivr.net/npm/tau_sound_core@7.4.13/js/flutter_sound/flutter_sound.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tau_sound_core@7.4.13/js/flutter_sound/flutter_sound_player.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tau_sound_core@7.4.13/js/flutter_sound/flutter_sound_recorder.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/howler@2/dist/howler.min.js"></script>I forgot one line. I need vacations, I think.
platonicsocrates
commented
3 years ago Thanks! But does .aac not work on web?
It's now working with https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3
But when I replace with https://filesamples.com/samples/audio/aac/sample1.aac it then gets stuck onload:
FS:---> openAudioSession
FS:<--- openAudioSession
FS:---> startPlayer
FS:---> stop
stopTimer()
FS:<--- stop
FS:---> _convert
FS:---> needToConvert
FS:<--- needToConvert
FS:<--- _convert
stopTimer()
playAudioFromURL : https://filesamples.com/samples/audio/aac/sample1.aac
FS:<--- startPlayer
onloadI only changed these 2 lines in your example:
void play() async {
await _mPlayer.startPlayer(
fromURI: 'https://filesamples.com/samples/audio/aac/sample1.aac', //changed
codec: Codec.aacADTS, //changed
// codec: Codec.mp3,
whenFinished: () {
setState(() {});
});
setState(() {});
}This .aac file works on mobile with the same config
Larpoux
commented
3 years ago @platonicsocrates ,
I must go away, now. I will be back in 4 hours. Then, if you still have problems, I will have more time to help you.
Do not spend too much time with problems, I will help you. I am very glad that at least someone uses Flutter Sound on Web. Maybe you are the first to use it. 😄
platonicsocrates
commented
3 years ago Thanks - that will be amazing. I'll keep trying and let you know again in 4 hours!
Larpoux
commented
3 years ago Σωκράτης : your problem is not tied with Flutter Sound on web : your sound cannot be played under Android, too. I am going to look what your URI corresponds to. Probably not a remote file but something like WebRTC.
Please, let me look more deeply.
platonicsocrates
commented
3 years ago εὐχᾰρῐστέω
I've tried with a couple of other https aac recordings which I uploaded to Firebase Storage as well after recording with flutter_sound and those haven't been working for me
Larpoux
commented
3 years ago On iOS, your URI is resolved as : http://5.189.150.137:5000/download_audio/https://filesamples.com/samples/audio/aac/sample1.aac
This address cannot be join. I am going to look why it is this weird address
platonicsocrates
commented
3 years ago Thanks for looking into this! Do you have another sample remote aac uri I can try on my end? I can't make any of the .aac files work on web which I recorded with flutter_sound and uploaded to remote.
Larpoux
commented
3 years ago Yes, I can put an AAC file on my "http://www.canardoux.xyz". This is a good idea. But before I want to understand why iOS translate your URI to this weird address.
Sometimes Flutter Sound users cannot play remote file, but most of the time they are not sure that it is a file or a broadcast, or WebRTC, or ... I need to understand.
Larpoux
commented
3 years ago on iOS, if you use the following URI : https://filesamples.com/samples/audio/aac/sample1.aac instead of http://5.189.150.137:5000/download_audio/https://filesamples.com/samples/audio/aac/sample1.aac
then it works fine. (And I really prefer this sound than the stupid .mp3 sound of the remote example of Flutter Sound 😉 ).
Now I am going to see if it is OK on Android and Flutter Web.
Larpoux
commented
3 years ago It works OK on Android
Larpoux
commented
3 years ago On Flutter web, I get the following error :
:63453/#/:1 Access to XMLHttpRequest at 'https://filesamples.com/samples/audio/aac/sample1.aac' from origin
'http://localhost:63453' has been blocked by CORS policy:
The 'Access-Control-Allow-Origin' header has a value 'http://filesamples.com' that is not equal to the supplied origin.This is a security error.
I am going to install a simple AAC file on canardoux.xyz
Larpoux
commented
3 years ago I installed : https://www.canardoux.xyz/tau_sound/web_example/sample.aac
I am going to see if OK on Flutter Web
Larpoux
commented
3 years ago Not good on Flutter web :
Access to XMLHttpRequest at 'https://www.canardoux.xyz/tau_sound/web_example/sample.aac'
from origin 'http://localhost:57720' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.I must understand what is this security error. Perhaps not today. I do not know what time it is for you : are you greek ? (I know, this is indiscreet)
Larpoux
commented
3 years ago I learnt ancient greek when I was young. I do not remember anything about ancient greek. Just that it was a nightmare.
Larpoux
commented
3 years ago The terrible thing with ancient greek (and perhaps modern greek?, I do not know) is that words have prefix and the prefix contract with the word itself. At the end you have a word :
Sometimes I had text that I had to translate and I did not have any idea what this text talked about. A nightmare. But it was a long time ago.
But Socrates did not write anything. This is great for me 🤣
Larpoux
commented
3 years ago I will study this problem about CORS tomorrow : https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS. What is interesting is that the Remote MP3 example works fine on Flutter Web. Perhaps there is something to do on the host side ...
I will post you the result.
platonicsocrates
commented
3 years ago @Larpoux I'm not Greek but studied Ancient Greek too! You're right - sometimes it can get pretty puzzling, but that's also the fun of it when you finally understand what word is lying beneath all the elisions etc.
Thanks for letting me know about CORS - I think that must be it. I'll also try myself - it should be pretty simple now that we know the issue. Just a case of setting the right headers.
Thanks again!
Larpoux
commented
3 years ago I am sorry, I do not know very well the Widget UI. You are probably right : the Widget UI is perhaps not correctely handled under Flutter Web.
This is bad ... I am going to add your request to the TODO list.
This duplicates #579
Larpoux
commented
3 years ago Σωκράτης : Now, I am able to play a remote AAC sound (https://www.canardoux.xyz/tau_sound/web_example/sample.aac) with the Flutter Sound Demo, running on Flutter Web.
I had to add :
Header set Access-Control-Allow-Origin "*"in the configuration file of my Apache2 server. (see here)
You can try :
Now, I will see how it is possible to allow CORS with the development server that we use during the Flutter development.
Note : I checked that Flutter Sound Widget UI works fine under Flutter Web. If you want to use it, no necessary to develop your own UI interface.
Larpoux
commented
3 years ago It seems that it works fine also with Chrome development tools.
Now, you are probably ready to start the development of your own App. I wish you success, Σωκράτης. Come back if more problems.
Larpoux
commented
3 years ago Added this chapter in the documentation
platonicsocrates
commented
3 years ago That's really great, thanks @Larpoux for all your help!
εὐχᾰρῐστέω
Flutter Sound Version :
Released or Beta version ? Released
Version number ? 7.4.13+3
FULL or LITE flavor ? FULL
Result of the command "flutter pub deps | grep flutter_sound" (very important)
Severity
Very severe - Not possible to play audio on web
Platforms you faced the error
Web: Chrome browser
Logs
(This is very important. Most of the time we cannot do anything if we do not have information on your bug)
When render the player with
We get this error (Error 1):
Then when we press the play button we get this error (Error 2):
Describe the bug
SoundPlayerUI.fromTrackfails to play remote audio urlTo Reproduce Steps to reproduce the behavior:
Render widget on Flutter web with:
See Error 1
Click on play button
See Error 2
Expected behavior Player should play audio