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.

相关指南

如需帮助,请告知我们您使用的插件和设备、尝试的操作以及发生的情况。请使用不含个人数据的示例。切勿分享您的密钥或私有文件。