I'm facing an issue in flutter web view, audio is playing in the background I want to stop it when the home button is pressed. webpage is made with HTML,CSS and js. https://readnplay.co/wp-content/uploads/books/with text box/How to be an otter/

this is a book that is present on the app

return Scaffold(
  floatingActionButton: Padding(
    padding: const EdgeInsets.all(8.0),
    child: FloatingActionButton(
      onPressed: () {
        // BookButton._interstitialAd?.dispose();
        if (randomNumber >= 9) {
          SystemChrome.setPreferredOrientations(
              [DeviceOrientation.landscapeLeft]);
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => const NewsLetterPage(),
            ),
          );
        } else {
          SystemChrome.setPreferredOrientations(
              [DeviceOrientation.landscapeLeft]);
          Navigator.pop(context);
        }
      },
      child: const Icon(Icons.arrow_back),
    ),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.miniStartTop,
  body: Stack(
    children: [
      WebView(
        initialUrl: widget.url,
        javascriptMode: JavascriptMode.unrestricted,
        onPageFinished: (finish) {
          setState(() {
            _isLoading = false;
          });
        },
      ),
      _isLoading
          ? Center(
              child: Lottie.asset("images/30206-loading.json"),
            )
          : Stack(),
    ],
  ),
);

} } audio code:

var aid = document.getElementById('audio01');

  $('.music').bind('touchstart click', function(e) {
    e.preventDefault();
    if (aid.paused) {
      aid.play();
      $(this).css("background-image", "url(images/music.png)");
    } else {
      aid.pause();
      $(this).css("background-image", "url(images/music_s.png)");
    }
  });

CodePudding user response：

You've got a few options:

1. If you have control over the webpage, you can use JavaScript to pause the audio when the tab is no longer active
2. If you need to do this programmatically in Flutter, you should be able to use evaluateJavascript to execute the pause command
3. If this is only needed when the view is navigated away from and/ or you don't have control over the webpage, then you can destroy the webview onDestroy

Option #1 - Pause audio when page no longer active (JavaScript)

You can detect when a webpage changes state to background, using the visibilitychange event.

For example:

document.addEventListener('visibilitychange', event => {
  if (document.visibilityState === 'visible') {
    // Resume music
    backgroundMusic.play();
  } else {
    // Pause music
    backgroundMusic.pause();
  }
});

Option #2 - Execute pause command within webview

Or, in Flutter you should be able to execute JavaScript on your web view to pause the music

_webviewController.evaluateJavascript("window.backgroundMusic.pause()");

Option #3 - Destroy webview when no longer needed

If you intend to stop the music when the view is navigated away from, then you could kill the webview all together. For example:

public void destroyWebView() {
    myWebView.removeAllViews();
    myWebView.clearHistory();
    myWebView.loadUrl("about:blank");
    myWebView.onPause();
    myWebView.removeAllViews();
    myWebView.destroyDrawingCache();
    myWebView.destroy();
    myWebView = null;
}