Audio Player 介面,附示例標題。
Audio Player 介面,附示例標題。
← 全部原生指南

Xodera Plugins · Bubble Native

Xodera Audio Player Native

在課程、語音訊息或商品記錄中加入清晰的音訊播放器。讓使用者收聽、調整速度,並從已儲存的位置繼續。

Public beta guides · Haptics instructions are in its Bubble listing

Public beta offer: free Bubble install · 7-day card trial, then US$1.50/month per plugin/project.

文件審閱日期:2026年11月6日

實用範例

支援對話中的語音備註

普通檔案連結會將使用者帶離對話,且使長回覆難以檢視。

`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 ID 保留在您的應用中,以免延遲事件更新其他對話。

在 `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` 包含同一錄音的真實峰值。

點擊評論 → Seek 到其秒數 → Play。來源變更時,替換或清除峰值,並重新綁定所選的檢閱。

在您的評論編輯器旁顯示 `current_time`。`waveform_available` 告訴您的 UI 是否有實際提供的峰值可用。

在您的應用中,依目前音訊長度,將過時的時間戳限制在有效範圍內,或將其拒絕。當不存在真實峰值時,顯示普通的進度控制,而非虛構的音訊分析。

僅播放。您的應用會儲存收聽進度。

目前可用功能

Public beta. Use the documented controls and actions; test supported formats, permissions and device behavior in your own native app. Browser preview does not validate native device output.

建立工作流程

使用下方可用的測試版操作,並在目標裝置上測試結果。

這些範例使用如 Lesson、Message 和 Order 的應用程式記錄。請以您自己的資料類型和元素名稱取代它們。範例媒體位址必須替換為您自己的檔案。

  1. 加入音訊元件。設定 source_url = Selected Message's audio_url、title = Selected Message's sender_label 與 subtitle = Selected Message's date_label。

  2. 若您有此錄音的真實波形資料,請於 waveform_peaks_json 中傳入。否則留空。

  3. 當ready 事件發生時,如有需要使用 Seek 並帶入已儲存的秒數。讓使用者按下 Play。使用 Pause、Seek 與 Set speed 作為播放器按鈕。

  4. 顯示 current_time 與 duration。於 playback_ended 時,儲存所選訊息或課程的收聽進度。將 is_active 設為此檢視是否開啟。

工作流程圖 — 不是應用程式截圖

一次性設定

在 BestPlugins → Dashboard → Plugins 中建立或選取您的 Bubble 應用程式專案。選擇 Xodera Audio Player Native,複製其金鑰,然後開啟 Bubble → Plugins → Xodera Audio Player Native,將金鑰貼入 licensing_api_key。儲存一次;之後使用下方操作。每個專案中的每個外掛都有其專屬金鑰。

使用應用程式可開啟的直接音訊檔案位址。播放音訊不需要麥克風或相機存取權限。

一次性設定
  1. 在 BestPlugins → Dashboard → Plugins 中建立或選取您的 Bubble 應用程式專案。
  2. 選取此外掛並複製其專案金鑰。
  3. Open Bubble → Plugins → this plugin. Paste its project key into licensing_api_key and save.
  4. 加入元件,選取您的應用程式資料,並建立下方的工作流程。
  5. In the dashboard, review and confirm the 7-day card trial for this plugin. It then costs US$1.50/month per app project, including development and production. Cancel before the trial ends to avoid the first charge.
安裝與訂閱

For Audio Player, Video Player, Photo Editor, Audio Recorder, Files Kit and Haptics: free Bubble installation, a 7-day trial with a card, then US$1.50 per month per plugin and app project. Development and production are included, with no operation cap. File-size and feature limits still apply. Review billing and cancellation before confirming. Other plugins remain unavailable for purchase.

將結果儲存至您的應用程式

範例 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
範例 Bubble 表達式Selected Message's audio_url
所選音訊、影片或圖片檔案的位址。使用此插件支援的檔案類型。
waveform_peaks_jsontext · 預設: ""
範例值[0.1,0.4,0.2,0.7]
範例 Bubble 表達式Selected Message's waveform_peaks_json
此錄音的實際正規化振幅值;若不可用則留空。
titletext · 預設: ""
範例值Lesson 4 — review
範例 Bubble 表達式Selected Lesson's name
可見的應用文字;留空則使用內建的本地化文字(若支援)。請勿填入憑證。
subtitletext · 預設: ""
範例值Teacher · today
範例 Bubble 表達式Selected Message's sender_label
可見的應用文字;留空則使用內建的本地化文字(若支援)。請勿填入憑證。
playback_ratenumber · 預設: 1
範例值1.5
範例 Bubble 表達式Current User's listening_speed
使用目前業務記錄的值;依以下限制進行驗證。
volumenumber · 預設: 1
範例值0.8
範例 Bubble 表達式Volume Slider's value
使用目前業務記錄的值;依以下限制進行驗證。
loopyes_no · 預設: false
範例值no
範例 Bubble 表達式Selected Lesson's repeat_enabled
使用目前業務記錄的值;依以下限制進行驗證。
is_activeyes_no · 預設: true
範例值yes
範例 Bubble 表達式GuideHost's view_is_active (your yes/no custom state)
在此視圖開啟時設為是,離開時設為否,以便停止播放或當前工作。
disabledyes_no · 預設: false
範例值no
範例 Bubble 表達式GuideHost's is_busy (your yes/no custom state)
當您的應用忙碌或此操作不可用時,停用該元件。
ui_text_jsontext · 預設: ""
範例值{}
範例 Bubble 表達式App Settings' player_labels_json (supported keys only)
可選的 JSON,包含支援的按鈕標籤。留空則使用內建文字。
languagetext · 預設: "auto"
範例值uk
範例 Bubble 表達式Current User's preferred_language
設定 language=auto 以跟隨支援的裝置或瀏覽器語言。輸入支援的語言代碼以明確選擇。
操作及其輸入 · 8
Play

無操作參數

Pause

無操作參數

Toggle

無操作參數

Stop

無操作參數

Seek
secondsnumber · 預設: —
範例值12
範例 Bubble 表達式Selected Comment's seconds
使用目前業務記錄的值;依以下限制進行驗證。
Set speed
ratenumber · 預設: —
範例值1.5
範例 Bubble 表達式Speed Dropdown's value
使用目前業務記錄的值;依以下限制進行驗證。
Set volume
volumenumber · 預設: —
範例值0.8
範例 Bubble 表達式Volume Slider's value
使用目前業務記錄的值;依以下限制進行驗證。
Reload source

無操作參數

狀態與事件

狀態

player_status · text

此操作的當前結果。於儲存成功前使用相符的完成事件。

is_playing · yes_no

所選項目的當前值。於相關事件後讀取。

is_loaded · yes_no

所選項目的當前值。於相關事件後讀取。

is_buffering · yes_no

所選項目的當前值。於相關事件後讀取。

current_time · number

所選項目的當前值。於相關事件後讀取。

duration · number

所選項目的當前值。於相關事件後讀取。

progress · number

所選項目的當前值。於相關事件後讀取。

playback_rate · number

所選項目的當前值。於相關事件後讀取。

volume · number

所選項目的當前值。於相關事件後讀取。

is_looping · yes_no

所選項目的當前值。於相關事件後讀取。

waveform_available · yes_no

所選項目的當前值。於相關事件後讀取。

waveform_status · text

此操作的當前結果。於儲存成功前使用相符的完成事件。

error_code · text

上一次操作的錯誤資訊。顯示有用的訊息並提供相關的重試。

事件

ready

當此事件發生時,從同一元素讀取相關狀態。

playback_started

當此事件發生時,從同一元素讀取相關狀態。

playback_paused

當此事件發生時,從同一元素讀取相關狀態。

playback_ended

當此事件發生時,從同一元素讀取相關狀態。

seek_completed

當此事件發生時,從同一元素讀取相關狀態。

rate_changed

當此事件發生時,從同一元素讀取相關狀態。

player_error

當此事件發生時,從同一元素讀取相關狀態。

開發者常問問題

它會產生波形嗎?

不。為該來源提供真實正規化的峰值;普通的進度在沒有它們的情況下也能運作。

訂閱如何運作?

For Audio Player, Video Player, Photo Editor, Audio Recorder, Files Kit and Haptics: free Bubble installation, a 7-day trial with a card, then US$1.50 per month per plugin and app project. Development and production are included, with no operation cap. File-size and feature limits still apply. Review billing and cancellation before confirming. Other plugins remain unavailable for purchase.

相關指南

如需協助,請告訴我們您使用的插件與裝置、嘗試的操作以及發生的情況。請使用不含個人資料的範例。切勿分享您的金鑰或私人檔案。