τ on web.

τ on Web

τ is now supported by Flutter Web (with some limitations). Please go to there to have informations on how to setup your App for web.

You can play with this live demo on the web.

Installation

To use Flutter Sound in a web application, you can either :

Static reference

Add those 4 lines at the end of the <head> section of your index.html file :

  <script src="assets/packages/flutter_sound_web/js/flutter_sound/flutter_sound.js"></script>
  <script src="assets/packages/flutter_sound_web/js/flutter_sound/flutter_sound_player.js"></script>
  <script src="assets/packages/flutter_sound_web/js/flutter_sound/flutter_sound_recorder.js"></script>
  <script src="assets/packages/flutter_sound_web/js/howler/howler.js"></script>

or Dynamic reference

Add those 4 lines at the end of the <head> section of your index.html file :

  <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>

Please read this to understand how you can specify the interval of the versions you are interested by.

Player

  • τ can play buffers with startPlayerFromBuffer(), exactly like with other platforms. Please refer to the codecs compatibility table
  • τ can play remote URL with startPlayer(), exactly like with other platforms. Again, refer to the codecs compatibility table
  • Playing from a Dart Stream with startPlayerFromStream()is not yet implemented.
  • Playing with UI is obviously not implemented, because we do not have control to the lock screen inside a web app.
  • τ does not have control of the audio-focus.

The web App does not have access to any file system. But you can store an URL into your local SessionStorage, and use the key as if it was an audio file. This is compatible with the τ recorder.

Recorder

τ on web cannot have access to any file system. You can use startRecorder() like others platforms, but the recorded data will be stored inside an internal HTTP object. When the recorder is stopped, startRecorder stores the URL of this object into your local sessionStorage.

Please refer to the codecs compatibility table : τ Recorder does not work on Safari nor iOS.

await startRecorder(codec: opusWebM, toFile: 'foo'); // the LocalSessionStorage key `foo` will contain the URL of the recorded object
...
await stopRecorder();
await startPlayer('foo'); // ('foo' is the LocalSessionStorage key of the recorded sound URL object)

Limitations :

  • Recording to a Dart Stream is not yet implemented
  • τ does not have access to the audio focus
  • τ does not provide the audio peak level in the Recorder Progress events.

FFmpeg

Actually, τ on Web does not support FFmpeg. We are still actually not sure if we should support it or if the code weight would be too high for a Web App.

CORS

Web Browsers have a security system which is called CORS. See here.

If you try to play a remote sound and have a security alert, it can mean that your server did not put the correct Header and that you must check the behavior of your server.

For example, to run correctly the Demo App, and play a remote AAC sound which is stored on the canardoux.xyz host, I had to add :

Header set Access-Control-Allow-Origin "*"

in the configuration file of my Apache2 server. (see here)

After adding this parameter, it is now possible to do :

  • call the example app
  • Enter the “Demo example”
  • Select “media = Remote URL”
  • Select “Codec = AAC”
  • Play

This will play correctly the remote AAC file.