Інтерфейс Audio Player з прикладним заголовком.

Xodera Plugins · Bubble Native

Xodera Audio Player Native

Додайте зручний аудіоплеєр до уроку, голосового повідомлення чи картки товару. Користувач може слухати, змінювати швидкість і продовжувати зі збереженого місця.

Посібники публічних бета-версій · інструкції Haptics у його картці Bubble

Умови публічної бета-версії: Bubble безкоштовно · 7 днів з карткою, потім 1,50 USD/місяць за плагін у проєкті.

Побудуйте бізнес-процес ↓Налаштування плагіна ↗Native Lab

Документація переглянута 6 листопада 2026

Практичні сценарії

Голосові повідомлення підтримки

Просте посилання на файл відправляє користувачів поза розмовою і ускладнює перегляд довгих відповідей.

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

Розмістіть плеєр у деталях вибраного повідомлення. Дайте користувачеві Play/Pause, Seek до корисної точки і Set speed. Прив’яжіть `is_active` до відкритої розмови.

Використовуйте `is_playing`, `current_time` та `duration` для відображення прогресу. Зберігайте ідентифікатор Message у вашому додатку, щоб запізніла подія не могла оновити іншу розмову.

При `player_error` покажіть `error_code` і запропонуйте Reload source; збережіть повідомлення і ніколи не позначайте його як прослухане після помилки.

Лише відтворення. Прогрес зберігає ваш застосунок.

Повернення до мовного уроку

Навчальникам потрібно повторно прослухати складний фрагмент, а не перезапускати весь урок.

`source_url = Current Lesson’s audio URL`; `title = Current Lesson’s name`; остання позиція належить цьому учневі та уроку у вашій базі даних.

Після `ready` для поточного уроку, Seek до збережених секунд і чекайте, поки користувач Play. Використовуйте Set speed для повільнішого прослуховування. Зберігайте прогрес за допомогою власного робочого процесу додатку.

Прочитайте `current_time` і `duration`. При `playback_ended` ваш додаток може записати віху прослуховування для поточного Lesson.

Якщо джерело змінилося, відкиньте стару позицію, доки урок не буде завантажений. Не розглядайте завершення прослуховування як доказ того, що учень зрозумів матеріал або склав тест.

Лише відтворення. Прогрес зберігає ваш застосунок.

Коментарі з таймкодом

Редакторам або тренерам потрібно перейти від коментаря до відповідного моменту у записі.

`source_url = Selected Review’s recording URL`; кожен коментар, що належить додатку, зберігає власне значення секунд; необов’язковий `waveform_peaks_json` містить реальні піки того ж запису.

Comment.seconds → Seek → Play. Зберігайте коментар у своєму app; хвиля потребує справжніх даних.

Відобразіть `current_time` поруч із вашим редактором коментарів. `waveform_available` повідомляє ваш інтерфейс, чи доступні фактично надані піки.

Обмежуйте або відхиляйте застарілі мітки часу щодо поточної тривалості у вашому додатку. Якщо реальних піків немає, показуйте звичайний елемент керування прогресом, а не вигаданий аудіоаналіз.

Лише відтворення. Прогрес зберігає ваш застосунок.

Що працює зараз

Публічна бета-версія. Використовуйте описані елементи керування й дії; перевірте формати, дозволи та поведінку у своєму нативному застосунку. Вебпрев’ю не перевіряє результат на пристрої.

Побудуйте бізнес-процес

Використовуйте доступні бета-дії нижче й перевіряйте результат на потрібних пристроях.

У прикладах є записи Lesson, Message та Order. Замініть їх на власні типи даних і назви елементів. Замість адрес із прикладів підставте власні файли.

Додайте аудіоелемент. source_url = Selected Message's audio_url, title = Selected Message's sender_label, subtitle = Selected Message's date_label.
Якщо маєте справжні дані звукової хвилі цього запису, передайте їх у waveform_peaks_json. Інакше залиште поле порожнім.
Після ready за потреби виконайте Seek зі збереженою кількістю секунд. Відтворення запускає користувач через Play. Для кнопок використовуйте Pause, Seek і Set speed.
Покажіть current_time та duration. На playback_ended збережіть прогрес вибраного уроку чи повідомлення. is_active має відповідати тому, чи відкрита ця сторінка.

Діаграма робочого процесу — не скріншот додатку · SVG

Налаштуйте один раз

Створіть або оберіть проєкт Bubble у BestPlugins → Dashboard → Plugins. Оберіть Xodera Audio Player Native, скопіюйте його ключ, відкрийте Bubble → Plugins → Xodera Audio Player Native і вставте ключ у licensing_api_key. Збережіть один раз, далі використовуйте дії нижче. Для кожного плагіна в кожному проєкті є окремий ключ.

Потрібна пряма адреса аудіофайлу, доступного застосунку. Для прослуховування не потрібні мікрофон або камера.

Налаштуйте один раз

Створіть або оберіть проєкт Bubble у BestPlugins → Dashboard → Plugins.
Оберіть цей плагін і скопіюйте ключ його проєкту.
Відкрийте Bubble → Plugins → цей плагін. Вставте ключ його проєкту в licensing_api_key та збережіть.
Додайте елемент, оберіть дані свого застосунку та побудуйте workflow нижче.
На панелі керування перегляньте й підтвердьте 7-денний пробний доступ із карткою для цього плагіна. Потім він коштує 1,50 USD/місяць за проєкт, включно з розробкою та робочою версією. Скасуйте до завершення пробного періоду, щоб уникнути першого списання.

Встановлення та підписка

Для Audio Player, Video Player, Photo Editor, Audio Recorder, Files Kit та Haptics: безкоштовне встановлення в Bubble, 7 днів пробного доступу з карткою, потім 1,50 USD на місяць за плагін у проєкті. Розробку й робочу версію включено, без ліміту операцій. Обмеження файлів і можливостей залишаються. Перед підтвердженням перевірте оплату й скасування. Інші плагіни недоступні для покупки.

Як записати результат у свою базу

Приклад ListeningProgress: owner = Current User, lesson = Selected Lesson, seconds = Audio Player's current_time, duration = Audio Player's duration. Зберігайте, коли користувач ставить на паузу або залишає урок, а не під час кожного оновлення екрана.

Помилки, скасування та відновлення

На player_error покажіть error_code і запропонуйте Reload source. Залиште запис повідомлення чи уроку. Для іншого аудіозапису завантажуйте його власну збережену позицію. Повернення на сторінку не запускає відтворення автоматично.

Можливості й обмеження

Швидкості відтворення: 1, 1.5 і 2. Гучність: 0–1. Дані хвильової форми: 2–2048 значення між 0 і 1. Підтримувані аудіоформати залежать від пристрою. Плеєр не записує, не транскрибує і не зберігає аудіо постійно для офлайн‑використання. Фонове та відтворення на екрані блокування не гарантовані.

Налаштування, дії та результати

Використовуйте ці назви в Bubble. Плановані функції позначені окремо.

Доступні бета‑налаштування

Налаштування елемента

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

Стани

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

Події

readyplayback_startedplayback_pausedplayback_endedseek_completedrate_changedplayer_error

Дії та їхні параметри

PlayPauseToggleStopSeekSet speedSet volumeReload source

Налаштування елемента · 11

source_urltext · Типове значення: "": Приклад значенняhttps://bestplugins.online/native-samples/lesson.mp3; Приклад виразу BubbleSelected Message's audio_url; Адреса вибраного аудіо, відео або зображення. Використовуйте тип файлу, який підтримує цей плагін.

waveform_peaks_jsontext · Типове значення: "": Приклад значення[0.1,0.4,0.2,0.7]; Приклад виразу BubbleSelected Message's waveform_peaks_json; Справжні нормалізовані амплітуди саме цього запису; без даних залиште порожнім.

titletext · Типове значення: "": Приклад значенняLesson 4 — review; Приклад виразу BubbleSelected Lesson's name; Видимий текст app; порожнє значення використовує вбудований переклад, де підтримано. Без секретів.

subtitletext · Типове значення: "": Приклад значенняTeacher · today; Приклад виразу BubbleSelected Message's sender_label; Видимий текст app; порожнє значення використовує вбудований переклад, де підтримано. Без секретів.

playback_ratenumber · Типове значення: 1: Приклад значення1.5; Приклад виразу BubbleCurrent User's listening_speed; Візьміть значення поточного бізнес-запису й перевірте межі нижче.

volumenumber · Типове значення: 1: Приклад значення0.8; Приклад виразу BubbleVolume Slider's value; Візьміть значення поточного бізнес-запису й перевірте межі нижче.

loopyes_no · Типове значення: false: Приклад значенняno; Приклад виразу BubbleSelected Lesson's repeat_enabled; Візьміть значення поточного бізнес-запису й перевірте межі нижче.

is_activeyes_no · Типове значення: true: Приклад значенняyes; Приклад виразу BubbleGuideHost's view_is_active (your yes/no custom state); yes, доки ця сторінка відкрита; no під час виходу, щоб зупинити відтворення чи поточну дію.

disabledyes_no · Типове значення: false: Приклад значенняno; Приклад виразу BubbleGuideHost's is_busy (your yes/no custom state); Вимкніть елемент, коли застосунок зайнятий або дія недоступна.

ui_text_jsontext · Типове значення: "": Приклад значення{}; Приклад виразу BubbleApp Settings' player_labels_json (supported keys only); Необов’язковий JSON із підтримуваними підписами кнопок. Залиште порожнім для вбудованих текстів.

languagetext · Типове значення: "auto": Приклад значенняuk; Приклад виразу BubbleCurrent User's preferred_language; Укажіть language=auto, щоб автоматично використати підтримувану мову пристрою або браузера. Щоб обрати мову явно, укажіть підтримуваний код мови.

Дії та їхні параметри · 8

Play

Немає параметрів дії

Pause

Немає параметрів дії

Toggle

Немає параметрів дії

Stop

Немає параметрів дії

Seek

secondsnumber · Типове значення: —: Приклад значення12; Приклад виразу BubbleSelected Comment's seconds; Візьміть значення поточного бізнес-запису й перевірте межі нижче.

Set speed

ratenumber · Типове значення: —: Приклад значення1.5; Приклад виразу BubbleSpeed Dropdown's value; Візьміть значення поточного бізнес-запису й перевірте межі нижче.

Set volume

volumenumber · Типове значення: —: Приклад значення0.8; Приклад виразу BubbleVolume Slider's value; Візьміть значення поточного бізнес-запису й перевірте межі нижче.

Reload source

Немає параметрів дії

Стани та події