Interface Audio Player avec un titre d’exemple.

Xodera Plugins · Bubble Native

Xodera Audio Player Native

Ajoutez un lecteur audio aux leçons, messages vocaux ou fiches produit. Écoutez, changez la vitesse et reprenez à la position enregistrée.

Guides bêta publics · instructions Haptics dans sa fiche Bubble

Offre bêta publique : installation Bubble gratuite · essai de 7 jours avec carte, puis 1,50 USD/mois par plugin/projet.

Construire le workflow ↓Paramètres du plugin ↗Native Lab

Documentation révisée 6 novembre 2026

Exemples pratiques

Notes vocales dans une conversation d’assistance

Un simple lien de fichier fait quitter la conversation et complique la réécoute d’une longue réponse.

`source_url = Selected Message’s audio URL`; `title = Selected Message’s sender label`; `subtitle = Selected Message’s timestamp`.

Placez le lecteur dans le détail du message sélectionné. Laissez l'utilisateur Play/Pause, Seek à un point utile et Set speed. Liez `is_active` à la conversation ouverte.

Affichez la progression avec `is_playing`, `current_time` et `duration`. Conservez l’ID du Message dans votre app pour ne pas appliquer un événement tardif à une autre conversation.

Sur `player_error`, affichez `error_code` et proposez Reload source ; conservez le message et ne le marquez pas comme écouté après un échec.

Lecture uniquement. Votre app garde la progression.

Reprendre un cours de langue au bon endroit

L’apprenant doit pouvoir réécouter un passage difficile sans recommencer tout le cours.

`source_url = Current Lesson’s audio URL` ; `title = Current Lesson’s name` ; la dernière position appartient à cet apprenant et à cette leçon dans votre base de données.

Après `ready` pour le cours courant, utilisez Seek avec la position enregistrée, puis laissez l’utilisateur lancer Play. Set speed permet une écoute plus lente. Votre workflow enregistre la progression.

Lisez `current_time` et `duration`. Sur `playback_ended`, votre application peut enregistrer une étape d'écoute pour le Lesson actuel.

Si la source change, ignorez l’ancienne position jusqu’au chargement du bon cours. Une écoute terminée ne prouve ni la compréhension ni la réussite à un examen.

Lecture uniquement. Votre app garde la progression.

Réviser un enregistrement avec des commentaires horodatés

Un formateur ou un éditeur doit pouvoir passer directement du commentaire au passage concerné.

`source_url = Selected Review’s recording URL` ; chaque commentaire appartenant à l'application stocke sa propre valeur en secondes ; le `waveform_peaks_json` optionnel contient les pics réels de cet enregistrement.

Clic sur un Commentaire → Seek à sa position → Play. Au changement de source, remplacez ou effacez les amplitudes et reliez la bonne Révision.

Affichez `current_time` à côté de votre formulaire de commentaire. `waveform_available` indique si des amplitudes réelles ont été fournies.

Votre app doit borner ou refuser une position qui dépasse la durée courante. Sans amplitudes réelles, gardez le contrôle de progression habituel.

Lecture uniquement. Votre app garde la progression.

Ce qui fonctionne maintenant

Bêta publique. Utilisez les commandes et actions documentées ; testez les formats, les autorisations et le comportement dans votre propre app native. L’aperçu web ne valide pas les résultats sur appareil.

Construire le workflow

Utilisez les actions bêta disponibles ci-dessous et testez le résultat sur vos appareils cibles.

Les exemples utilisent des fiches comme Lesson, Message et Order. Remplacez-les par vos types de données et noms d’éléments. Utilisez vos propres fichiers à la place des adresses d’exemple.

Ajoutez l’élément audio. source_url = Selected Message's audio_url, title = Selected Message's sender_label et subtitle = Selected Message's date_label.
Si vous disposez de vraies données de forme d’onde, renseignez waveform_peaks_json. Sinon, laissez ce champ vide.
Après ready, utilisez Seek avec la position enregistrée si nécessaire. L’utilisateur lance Play. Reliez les boutons à Pause, Seek et Set speed.
Affichez current_time et duration. À playback_ended, enregistrez la progression de la leçon ou du message choisi. is_active indique si cette vue est ouverte.

Diagramme de flux — pas une capture d’écran d’application · SVG

Configurer une fois

Créez ou choisissez votre projet Bubble dans BestPlugins → Dashboard → Plugins. Choisissez Xodera Audio Player Native, copiez sa clé, puis ouvrez Bubble → Plugins → Xodera Audio Player Native et collez-la dans licensing_api_key. Enregistrez une fois, puis utilisez les actions ci-dessous. Chaque plugin de chaque projet possède sa propre clé.

Utilisez l’adresse directe d’un fichier audio lisible par l’app. La lecture ne demande ni microphone ni caméra.

Configurer une fois

Créez ou choisissez votre projet Bubble dans BestPlugins → Dashboard → Plugins.
Choisissez ce plugin et copiez sa clé de projet.
Ouvrez Bubble → Plugins → ce plugin. Collez sa clé de projet dans licensing_api_key et enregistrez.
Ajoutez l’élément, choisissez vos données et construisez le workflow ci-dessous.
Dans le tableau de bord, vérifiez et confirmez l’essai de 7 jours avec carte pour ce plugin. Il coûte ensuite 1,50 USD/mois par projet, développement et production inclus. Annulez avant la fin de l’essai pour éviter le premier débit.

Installation et abonnement

Pour Audio Player, Video Player, Photo Editor, Audio Recorder, Files Kit et Haptics : installation Bubble gratuite, essai de 7 jours avec carte, puis 1,50 USD par mois, par plugin et projet. Développement et production inclus, sans plafond d’opérations. Les limites de fichier et de fonction restent applicables. Vérifiez facturation et annulation avant confirmation. Les autres plugins ne sont pas ouverts à l’achat.

Enregistrer le résultat dans votre app

Exemple ListeningProgress : owner = Current User, lesson = Selected Lesson, seconds = Audio Player's current_time, duration = Audio Player's duration. Enregistrez à la pause ou à la sortie de la leçon, plutôt qu’à chaque mise à jour de l’écran.

Échec, annulation et reprise

À player_error, affichez error_code et proposez Reload source. Gardez la fiche du message ou de la leçon. Pour un autre enregistrement, chargez sa propre position. Revenir à la vue ne lance pas automatiquement la lecture.

Fonctions et limites

Vitesses de lecture : 1, 1.5 et 2. Volume : 0–1. Données de forme d’onde : 2–2048 valeurs entre 0 et 1. Les formats audio pris en charge dépendent de l'appareil. Le lecteur n'enregistre pas, ne transcrit pas et ne sauvegarde pas de façon permanente l'audio pour une utilisation hors ligne. La lecture en arrière-plan et sur l'écran de verrouillage n'est pas garantie.

Réglages, actions et résultats

Utilisez ces noms dans Bubble. Les fonctionnalités prévues sont marquées séparément.

Paramètres bêta disponibles

Réglages de l’élément

source_url · textwaveform_peaks_json · texttitle · textsubtitle · textplayback_rate · numbervolume · numberloop · yes_nois_active · yes_nodisabled · yes_noui_text_json · textlanguage · text

États

player_status · textis_playing · yes_nois_loaded · yes_nois_buffering · yes_nocurrent_time · numberduration · numberprogress · numberplayback_rate · numbervolume · numberis_looping · yes_nowaveform_available · yes_nowaveform_status · texterror_code · text

Événements

readyplayback_startedplayback_pausedplayback_endedseek_completedrate_changedplayer_error

Actions et paramètres

PlayPauseToggleStopSeekSet speedSet volumeReload source

Réglages de l’élément · 11

source_urltext · Défaut: "": Valeur exemplehttps://bestplugins.online/native-samples/lesson.mp3; Expression Bubble exempleSelected Message's audio_url; Adresse du fichier audio, vidéo ou image choisi. Utilisez un type compatible avec ce plugin.

waveform_peaks_jsontext · Défaut: "": Valeur exemple[0.1,0.4,0.2,0.7]; Expression Bubble exempleSelected Message's waveform_peaks_json; Amplitudes réelles normalisées du même enregistrement ; vide si absentes.

titletext · Défaut: "": Valeur exempleLesson 4 — review; Expression Bubble exempleSelected Lesson's name; Texte visible ; vide utilise le texte localisé prévu. Aucun identifiant secret.

subtitletext · Défaut: "": Valeur exempleTeacher · today; Expression Bubble exempleSelected Message's sender_label; Texte visible ; vide utilise le texte localisé prévu. Aucun identifiant secret.

playback_ratenumber · Défaut: 1: Valeur exemple1.5; Expression Bubble exempleCurrent User's listening_speed; Utilisez la valeur de la fiche courante et les limites ci-dessous.

volumenumber · Défaut: 1: Valeur exemple0.8; Expression Bubble exempleVolume Slider's value; Utilisez la valeur de la fiche courante et les limites ci-dessous.

loopyes_no · Défaut: false: Valeur exempleno; Expression Bubble exempleSelected Lesson's repeat_enabled; Utilisez la valeur de la fiche courante et les limites ci-dessous.

is_activeyes_no · Défaut: true: Valeur exempleyes; Expression Bubble exempleGuideHost's view_is_active (your yes/no custom state); yes tant que cette vue est ouverte ; no en la quittant pour arrêter la lecture ou l’action en cours.

disabledyes_no · Défaut: false: Valeur exempleno; Expression Bubble exempleGuideHost's is_busy (your yes/no custom state); Désactivez l’élément si l’app est occupée ou l’action indisponible.

ui_text_jsontext · Défaut: "": Valeur exemple{}; Expression Bubble exempleApp Settings' player_labels_json (supported keys only); JSON facultatif avec les libellés de boutons pris en charge. Laissez vide pour les textes intégrés.

languagetext · Défaut: "auto": Valeur exempleuk; Expression Bubble exempleCurrent User's preferred_language; Utilisez language=auto pour suivre une langue prise en charge sur l’appareil ou dans le navigateur. Saisissez un code de langue pris en charge pour la choisir explicitement.

Actions et paramètres · 8

Play

Aucun paramètre d’action

Pause

Aucun paramètre d’action

Toggle

Aucun paramètre d’action

Stop

Aucun paramètre d’action

Seek

secondsnumber · Défaut: —: Valeur exemple12; Expression Bubble exempleSelected Comment's seconds; Utilisez la valeur de la fiche courante et les limites ci-dessous.

Set speed

ratenumber · Défaut: —: Valeur exemple1.5; Expression Bubble exempleSpeed Dropdown's value; Utilisez la valeur de la fiche courante et les limites ci-dessous.

Set volume

volumenumber · Défaut: —: Valeur exemple0.8; Expression Bubble exempleVolume Slider's value; Utilisez la valeur de la fiche courante et les limites ci-dessous.

Reload source

Aucun paramètre d’action

États et événements

États

player_status · text

Résultat actuel de l’action. Attendez l’événement de fin correspondant avant de valider la réussite.

is_playing · yes_no