Best way to sync several audio widgets?

[piottigonzalo]

Hi I'm struggling to make a simple app that plays several tracks that should play in sync, at start everything works fine, but I have a feature to change playback rate and there is were things get out-of-sync between tracks. I've tried using the on_seek_complete callback to try to wait until all the widgets are in the same position with no luck.
What is the best way to ensure tracks keep on sync? or is it something not really possible

thanks!

[FeodorFitsner]

Can you provide a code sample to illustrate the issue?

[piottigonzalo]

sure!

import flet as ft
import flet_audio as fa
import os
import logging
import numpy as np
import scipy.io.wavfile as wavfile
from src.logging_config import setup_logging

setup_logging()
test_logger = logging.getLogger("test_stem_player")

def generate_sine_waves():
    # Create directory for synthetic waves
    os.makedirs("synthetic_waves", exist_ok=True)

    # Parameters
    sample_rate = 44100  # Hz
    duration = 10  # seconds
    frequencies = [220, 330, 440, 550]  # Hz for different "stems"

    for i, freq in enumerate(frequencies):
        t = np.linspace(0, duration, int(sample_rate * duration), False)
        wave = 0.5 * np.sin(2 * np.pi * freq * t)  # Amplitude 0.5 to avoid clipping
        wave = (wave * 32767).astype(np.int16)  # Convert to 16-bit PCM
        filename = f"synthetic_waves/sine_{freq}hz.wav"
        wavfile.write(filename, sample_rate, wave)
        print(f"Generated {filename}")

class AudioPlayer:
    def __init__(self, page):
        self.page = page
        self.current_rate = 1.0
        self.position_texts = []
        self.audios = []
        self.stems = []

        generate_sine_waves()
        path = "synthetic_waves"
        self.stems = [f for f in os.listdir(path) if f.endswith('.wav')]

        for i, stem in enumerate(self.stems):
            audio = fa.Audio(
                src=os.path.join(path, stem),
                autoplay=False,
                volume=1.0,
                playback_rate=self.current_rate,
                on_position_changed=lambda e, idx=i: self.update_position(e, idx)
            )
            self.page.overlay.append(audio)
            self.audios.append(audio)
            self.position_texts.append(ft.Text(f"{stem}: 0ms"))

        self.page.update()

    def update_position(self, e, idx):
        self.position_texts[idx].value = f"{self.stems[idx]}: {int(float(e.data))}ms"
        self.page.update()

    def play_all(self, e):
        for audio in self.audios:
            audio.resume()

    def adjust_rate(self, delta):
        self.current_rate += delta
        for audio in self.audios:
            audio.playback_rate = self.current_rate
            audio.resume()
        self.page.update()

def main(page: ft.Page):
    player = AudioPlayer(page)

    play_all_btn = ft.ElevatedButton("Play All Stems", on_click=player.play_all)
    plus_btn = ft.ElevatedButton("+", on_click=lambda e: player.adjust_rate(0.1))
    minus_btn = ft.ElevatedButton("-", on_click=lambda e: player.adjust_rate(-0.1))
    page.add(play_all_btn, ft.Row([minus_btn, plus_btn]), ft.Column(player.position_texts))

if __name__ == "__main__":
    ft.app(target=main)

The + and - changes the rate, if you hit them several times you can notice how drift appears, its difficult to hear with the sample I've shared, if you load any mp3 song its more noticeable by hearing the drift

[piottigonzalo]

my guess is the playback rate change has no event callback, so its difficult to wait until all the playback changes are applied to resume playback, but not sure