Play mp3 files located in ApplicationSupportDirectory (NOT asset directory) linked from webview_flutter loaded html page

Question

I have a large number of mp3 files (+3GB) that needs to be included with the app I am writing for Android and iOS to be used offline. Since the Google Play Bundle can not be larger than 2GB, naturally I will need to download these mp3 files at initial app run-time to a local directory. I already have a html webpage written containing all functionalities required for selecting and playing the mp3 files with synchronized screen text and backgrounds. I've also successfully load and tested my webpage offline with webview_flutter, with a limited set of mp3 files loaded in the asset directory. Now that I needed to include all my +3GB of mp3 files, so I've downloaded them to ApplicationSupportDirectory, but it seems webview_flutter is NOT able to play mp3 files from this directory. I’ve try to place them in ApplicationSupportDirectory, ApplicationDocumentsDirectory, or ExternalStorageDirectory, but none of them can be accessed from webview_flutter’s page. I’ve also tried to load my index.html into these non-asset directories, but get file permission error, even with Permission.storage.request() and with declared permission for READ_EXTERNAL_STORAGE, WRITE_EXTERNAL_STORAGE, INTERNET in manifest.xml. Now running out of options, do you know if it is possible to link non-asset files from webpage loaded in webview_flutter? The load string to webview method probably will not work, because I have linked audios and javascripts in the page. Hopefully some of you can point me to a direction. Thank you in advance.

Answer 1

Found my own answer: Need to setup a server between webview_flutter and non-asset directory. I've used the package local_assets_server.dart and used rootDir parameter in the LocalAssetsServer() to call and point to the local Directory path. May need to keep the assetBasePath blank. When the webview_flutter loads from this server, it will load the index.html in this rootDir path.

  _initServer() async{
    final server = new LocalAssetsServer(
      address: InternetAddress.loopbackIPv4,
      assetsBasePath: '',
      rootDir: rootPath,
    );

    print('rootDir for server init to $rootPath');
    final address = await server.serve();
    print('init server address: $address');

    setState(() {
      this.address = address.address;
      port = server.boundPort;
      print('server port: $port');
      isListening = true;
    });
  }