How to Add a Multi-Language Audio Guide to Your App (Copy-Paste Prompts Included)

Store audio files in Supabase Storage in a folder structure like /guides/{guide_id}/{stop_id}/{language_code}.mp3. In the guide_stops table, keep a jsonb column called audio_urls with entries like {'en': 'https://...en.mp3', 'es': 'https://...es.mp3'}. Query the column in Flutter and access the URL with audioUrls[selectedLanguage]. This lets you add languages without changing the schema or the app code.

Yes, and for museum and travel guides, offline is usually a requirement — many locations have poor connectivity. Use the dio package to download audio files to getApplicationDocumentsDirectory() before the user enters the venue. Store the local file path in shared_preferences keyed by stop ID and language code. On playback, check for the local file first with File(path).existsSync() and fall back to the streaming URL if not found.

Store transcripts as a jsonb array of timed segments: [{start_ms: 0, end_ms: 4200, text: 'Welcome to gallery one.'}, ...]. In Flutter, wrap your transcript widget in a StreamBuilder listening to just_audio's positionStream. On each position update, find the segment where position.inMilliseconds is between start_ms and end_ms and apply highlighting to that element. For launch without timed transcripts, display the full text statically — users still benefit from the text, and you can add timing data later.

just_audio (^0.9.x) is the clear choice for guide apps. It supports HTTP streaming and local file playback from the same API, handles background audio correctly with the audio_session package, and provides positionStream for transcript sync. ConcatenatingAudioSource enables playlist mode for smooth auto-advance between stops. The main alternative, audioplayers, is simpler but lacks the streaming and playlist features a multi-stop guide needs.

The cleanest approach is ConcatenatingAudioSource: create an AudioSource for each stop in order and pass the full list to player.setAudioSource(). just_audio advances automatically. For more control — pausing between stops to show a summary screen, for example — listen to player.playerStateStream and watch for PlayerState.completed, then call player.setUrl(nextStop.audioUrl) and player.play() in the handler.

Store the selected language code in FlutterFlow App State (not page state) or in shared_preferences. In shared_preferences, write the code on every change with prefs.setString('selected_language', code) and read it on initState of any screen that needs it. In FlutterFlow, use a global App State variable and update it from the DropdownButton's onChange action — this survives any navigation stack pop.

Yes. ElevenLabs is the most practical option: write your stop scripts in the source language, translate them (DeepL or GPT-4), then generate audio via the ElevenLabs API for each language. The Starter plan ($5/mo) covers 30,000 characters — enough for roughly 10 stops at 200 words each across 3 languages. Store the generated MP3s in Supabase Storage. The audio quality is good enough for informational guides; for flagship cultural institutions, recorded human narration still wins.

At roughly 3 MB per audio file: 10 stops × 5 languages = 50 files = 150 MB of storage. That fits comfortably within Supabase's free tier (1 GB storage). Bandwidth is where cost appears — if 1,000 users each stream rather than download, that's roughly 150 GB of bandwidth per cycle through all stops, pushing you toward Supabase Pro ($25/mo). Encouraging offline download actually reduces bandwidth costs because each user downloads once rather than streaming repeatedly.