Skip to content

音频

音频组件用于播放音频内容,支持播放本地上传的音频文件,也可绑定工作流返回值或直接填写音频 URL,灵活满足不同音频播放需求。

属性设置

音频组件支持丰富的属性设置,例如常用设置、位置设置、尺寸设置、样式设置、变换设置、状态设置和可见性设置。

常用设置

属性说明
音频源配置音频的来源,支持上传本地的音频文件,也可绑定工作流返回值或直接填写音频 URL。
说明 音频支持 mp3、wav、m4a、aac 格式,音频最大不超过 20MB。
音频支持 mp3、wav、m4a、aac 格式,音频最大不超过 20MB。
样式选择音频组件的展示样式,支持三种样式:
仅播放按钮:仅显示一个简洁的播放按钮,点击后开始播放音频,适合界面简洁、空间有限的场景。
大播放器:提供功能丰富的播放器界面,包含播放、暂停、前进 15 秒、后退 15 秒、下载、循环模式、进度条等常用功能,适合需要丰富交互的场景,让用户能够精细控制音频播放。
小播放条:介于简洁与功能完整之间,以紧凑的播放条形式展示,包含播放、暂停、进度条、下载等功能,适合在有限空间内提供基本的播放控制功能,既节省空间又满足基本操作需求。
是否循环播放设置音频是否在播放结束后自动重新开始播放。开启此功能后,音频将在播放完毕后自动循环播放。
是否预加载开启预加载功能后,音频文件会在页面加载时提前加载音频,适合对播放延迟有较高要求的场景。
是否支持下载设置音频文件是否提供下载功能。开启此功能后,用户可以将音频文件保存到本地,方便离线使用或保存音频内容。样式为 仅播放按钮, 不支持此配置项。
播控颜色设置音频组件的颜色。

位置设置

音频组件提供三种位置类型选项,以灵活配置组件在界面中的位置。

  • 相对定位:堆叠布局下,元素自动向下或向右排列。

  • 绝对定位:页面滚动时,绝对定位的元素会随页面一起滚动。

  • 固定定位:页面滚动时,固定定位的元素会保持固定位置不变。

尺寸设置

属性说明
固定比例打开固定比例开关,可以设置图片的比例,例如 16:9 、 3:2 等。
比例配置音频组件的固定比例,支持 保持图片初始比例 、 16:9 、 3:2 、 4:3 、 1:1 、 9:16 、 2:3 、 3:4 。
仅打开固定比例开关,才支持该参数配置。
宽度配置音频组件的宽度值,支持以下宽度设置方式:
固定:固定的像素值,不会随容器大小变化。
百分比:元素的宽度占容器宽度的百分比。
填充容器:元素的宽度填满容器的可用空间。
适应内容:元素的宽度会随着内容的大小自动调整。
高度配置音频组件的高度值,支持以下高度设置方式:
固定:固定的像素值,不会随容器大小变化。
百分比:元素的高度占容器高度的百分比。
填充容器:元素的高度填满容器的可用空间。
适应内容:元素的高度会随着内容的大小自动调整。
仅关闭了固定比例开关,才支持该参数配置。
尺寸限制配置音频组件的尺寸限制,支持配置最大高度、最小高度、最大宽度、最小宽度。
合理设置尺寸限制参数可以确保组件在不同屏幕尺寸下保持布局的稳定性和一致性,避免因屏幕尺寸差异而导致的布局问题。

样式设置

属性说明
填充配置音频组件背景的显示颜色。
圆角配置音频组件背景的圆角,支持单独设置四个角的圆角。
内边距配置音频组件背景的内边距,可以单独设置四个方向的内边距。
外边距配置音频组件背景的外边距,可以单独设置四个方向的外边距。
边框配置音频组件背景的边框样式。支持如下设置方式:
预设样式:提供预设的边框样式,可直接使用。
自定义样式:通过边框线的颜色、粗细和样式,自定义边框样式。
阴影配置音频组件背景的阴影样式,增强组件的立体感。支持如下设置方式:
预设样式:提供预设的阴影样式,可直接使用。
自定义样式:支持通过样式、X偏移、Y偏移、模糊半径、扩展半径、颜色,自定义阴影样式。
图层模糊配置音频组件的模糊效果。数值越大,模糊效果越明显。
溢出配置音频组件溢出相关设置,支持以下溢出方式:
滚动:添加滚动条以查看超出的内容。
可见:显示全部内容。
隐藏:隐藏超出容器的内容。

变换设置

丰富界面视觉效果的参数。

属性说明
缩放配置音频组件大小的缩放比例。
旋转配置音频组件围绕中心点旋转的角度。
位移配置音频组件在水平和垂直方向上的移动距离。
倾斜配置音频组件在水平和垂直方向上的倾斜角度。

状态设置

控制音频组件点击态和出现态的视觉效果参数。

属性说明
点击效果配置音频组件的点击态效果。具体配置说明如下:
样式效果:点击音频组件时,音频组件的样式变化情况。详细说明,请参考 样式设置 。
变换效果:点击音频组件时,音频组件的动态变化情况。详细说明,请参考 变换设置 。
过渡效果:设置音频组件点击态的动画效果。
动画效果:支持设置为缓入缓出、缓入、缓出、线性等动画。
持续时间:设置动画的持续时间,单位为毫秒。
延迟时间:设置动画延迟出现的时间,单位为毫秒。
生效范围:设置动画的生效范围。
应用于全部变化:动画效果将应用于样式设置和变换设置所产生的所有变化。
仅应用于变换效果:动画效果仅应用于变换设置所产生的变化。
出场效果设置音频组件在界面中出现时的动画效果。目前支持设置为淡入、缩放、模糊、水平翻转、垂直翻转、从下滑入、从上滑入、从左滑入、从右滑入等动画效果。

可见性设置

控制音频组件隐藏或显示的参数,支持在特定条件下隐藏音频组件。

  • 设置为 false:显示组件。

  • 设置为 true:隐藏组件。

  • 设置为变量:通过变量值(true 或 false)动态控制音频组件的可见性。

  • 例如可以通过单行输入组件控制音频组件的可见性。单行输入组件 ID 为 Input1,当你将音频组件的可见性设置为{{ Input1.value}}后,在单行输入组件中输入文本时,{{ Input1.value}}值为 true,音频组件将被隐藏。

事件设置

通过配置音频组件的事件,可以为音频组件添加丰富的交互功能,例如点击、加载等,以增强用户体验和界面的互动性。

事件项说明
事件类型支持以下事件类型:
音频快进时:当用户点击快进按钮或拖动进度条使音频向前跳过一定时间时触发。
音频快退时:当用户点击后退按钮或拖动进度条使音频向后跳过一定时间时触发。
音频暂停时:暂停音频时触发。
音频播放完成时:音频播放到结束时触发事件。
组件方法支持以下方法:
设置音频源:为音频组件设置播放源,可绑定工作流返回值或直接填写音频 URL。
设置是否播放:设置播放或暂停音频。
值为 false:暂停。
值为 true:播放。
设置隐藏:隐藏组件,使其不可见。
值为 false:显示组件。
值为 true:隐藏组件。
下载到本地:下载音频文件到本地。
下载音频文件到本地的配置方法与下载图片文件一致。你可以参考下载图片到本地的配置说明,详情请参考 下载图片到本地 。

当前版本实操

本页使用独立的 音频 示例页面,页面内不混放其他组件。

  1. 进入低代码应用的 用户界面,确认搭建类型为 小程序和 H5
  2. 单击画布底部的 新建页面,创建一个空白页面。
  3. 在左侧 组件 面板中找到 音频,单击或拖入当前页面。
  4. 切换到 结构 面板,确认该页面只包含当前 音频 组件。
  5. 选中组件,在右侧 属性 面板中设置音频来源并检查播放、暂停、进度和下载控制。
  6. 检查画布中的实际显示效果,再使用页面顶部的预览入口验证交互。

音频 独立页面和属性配置

音频 独立页面实际效果