Audio issue while Route Changing

[madeofpendletonwool]

Description

Having an issue with audio controls when used with route-changes. If I attach an audio control as an overlay and play that audio, when the route change occurs the audio will restart. I'm not sure they this is happening since the audio is being added as an overlay. So I don't think the route change should make a difference in the audio or it's progress. I think this is a bug.

Code example to reproduce the issue:

import flet
from flet import AppBar, ElevatedButton, Page, Text, View, colors, ElevatedButton, Audio
import time
import datetime


def main(page: Page):
    page.title = "Routes Example"

    print("Initial route:", page.route)
    audio1 = Audio(
        src="https://luan.xyz/files/audio/ambient_c_motion.mp3", autoplay=True
    )
    page.overlay.append(audio1)

    def route_change(e):

        print("Route change:", e.route)
        page.views.clear()
        page.views.append(
            View(
                "/",
                [
                    AppBar(title=Text("Flet app")),
                    ElevatedButton("Go to settings", on_click=open_settings),
                    Text("This is an app with background audio."),
                    ElevatedButton("Stop playing", on_click=lambda _: audio1.pause()),

                ],
            )
        )
        if page.route == "/settings" or page.route == "/settings/mail":
            page.views.append(
                View(
                    "/settings",
                    [
                        AppBar(title=Text("Settings"), bgcolor=colors.SURFACE_VARIANT),
                        Text("Settings!", style="bodyMedium")
                    ],
                )
            )
        page.update()

    def view_pop(e):
        print("View pop:", e.view)
        page.views.pop()
        top_view = page.views[-1]
        page.go(top_view.route)

    page.on_route_change = route_change
    page.on_view_pop = view_pop

    def open_settings(e):
        page.go("/settings")

    page.go(page.route)

flet.app(target=main, port=8034)

Describe the results you received:

If you run the code above it will start the page and play the audio as expected. But if you click settings, it will take you to a new screen and restart the audio from the beginning.

Describe the results you expected:

I don't think the audio should restart. Clicking settings should in theory continue the audio and not do anything to it at all.

Additional information you deem important (e.g. issue happens only occasionally):
I put this in the help channel on the Discord and we deemed it a bug. I had another person try it and also experience the same issue.

Flet version (pip show flet):

Name: flet
Version: 0.4.2
Summary: Flet for Python - easily build interactive multi-platform apps in Python
Home-page:
Author: Appveyor Systems Inc.
Author-email: hello@flet.dev
License: Apache-2.0
Location: /home/collinp/.local/lib/python3.10/site-packages
Requires: flet-core, httpx, oauthlib, packaging, watchdog, websocket-client, websockets
Required-by:

Operating system:

Pop-OS 22.04, also tried on up to date arch, and Kubuntu 22.04

Additional environment details:
N/A - I tried this on essentially a totally new OS install last night.

[FeodorFitsner]

Could be related to #1324

[madeofpendletonwool]

Definitely, I can for sure see how these are related. Both involve routing to some degree. I'll spend some time trying to gather any additional information I can knowing this. Thanks!

[FeodorFitsner]

The fix has been tested with the following code:

import flet as ft


def main(page: ft.Page):
    page.title = "Routes Example"

    print("Initial route:", page.route)
    audio1 = ft.Audio(
        src="https://luan.xyz/files/audio/ambient_c_motion.mp3", autoplay=False
    )
    page.overlay.append(audio1)

    def route_change(e):
        print("Route change:", e.route)
        page.views.clear()
        page.views.append(
            ft.View(
                "/",
                [
                    ft.AppBar(title=ft.Text("Flet app")),
                    ft.ElevatedButton(
                        "Start playing", on_click=lambda _: audio1.resume()
                    ),
                    ft.ElevatedButton("Go to settings", on_click=open_settings),
                    ft.Text("This is an app with background audio."),
                    ft.ElevatedButton(
                        "Stop playing", on_click=lambda _: audio1.pause()
                    ),
                ],
            )
        )
        if page.route == "/settings" or page.route == "/settings/mail":
            page.views.append(
                ft.View(
                    "/settings",
                    [
                        ft.AppBar(title=ft.Text("Settings")),
                        ft.Text("Settings!", style=ft.TextThemeStyle.BODY_MEDIUM),
                    ],
                )
            )
        page.update()

    def view_pop(e):
        print("View pop:", e.view)
        page.views.pop()
        top_view = page.views[-1]
        page.go(top_view.route)

    page.on_route_change = route_change
    page.on_view_pop = view_pop

    def open_settings(e):
        page.go("/settings")

    page.go(page.route)


ft.app(target=main, port=8550, view=ft.WEB_BROWSER)

Few notes:

• Auto-start won't working in Chrome and Safari because of this issue/limitation. You can see The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. error in browser's console.

[madeofpendletonwool]

Amazing! I will test it and then close. Thank you!

[FeodorFitsner]

The fix will be available in pre-release version of Flet (pip install flet --pre --upgrade) when #1333 is merged.