很多H5场景中我们都需要保存用户的录音，用于后台查看或者后期收集、展示或者下载，现在用数据库结合指定的触发行为，可以实现了～

在正式尝试操作之前，我们需要知道存储到数据库的录音其实是一个网址（如下图），无法在后台直接听取音频，但是这些音频网址可以再次在H5中通过替换音频组件的方式，来实现音频的展示。

一、如何上传、保存音频

1.页面中添加一个音频组件，尽量小一些，30KB左右，越小越好。右侧面板不需要勾选预加载

因为本次功能不需要音频勾选预加载，所以右侧面板不要勾选。

2.添加一个微信录音组件，用户可以通过微信录音组件录制声音。

并给微信录音组件设置录音成功后替换资源，替换的就是我们事先添加在页面中的音频。

3.点击按钮可以触发音频保存的动作，在右侧面板设置点击时触发数据库操作，触发数据提交，但是这个时候我们要思考，数据表是在哪里添加的呢？

4.切换到作品管理界面

5.切换到数据库，添加一个数据表。

6.输入数据表名称，添加一个字段并命名为音频或者收集音频，设置字段类型为字符串（因为我们收到的音频信息为一个网址链接，这个链接包含字母和数字，所以要用字符串类型）。

设置好以后点击保存。

7.切换到作品编辑界面，添加刚才新建的数据表。

8.如果在弹出的数据表弹窗中没有看到自己新建的数据表，可以点击弹窗里的刷新按钮。

9.添加好的数据表会在逻辑小面板中显示

10.这时我们可以具体设置音频保存到数据库了，下图为动图演示。

11.通常数据提交后一般不会有提示，我们要自己添加一个，临时用段落组件设置也可以。点击段落组件添加到页面中，设置初始隐藏，设置上传成功的提示，建议给段落组件重命名一下，比如“上传提示”，方便稍后设置。

12.可以在数据库操作成功时触发显示元素，显示的就是上传成功的提示。

13.音频上传的主要步骤完成，也不仅局限于点击按钮，也可以在录音成功时设置音频保存到数据库，根据个人需求做触发调整。

二、展示音频

场景举例：用户上传了自己的录音后，想要听一听别人的录音，他就可以跳转到某个音频列表中，点击任意用户的录音来听。为了让列表看起来信息更丰富一些，我们在收集用户数据库的时候，建议开启微信授权，收集用户的微信头像跟昵称。

1.在作品信息面板开启微信授权。

2.在数据表追加一个字段，作为可以点击播放的图片。并勾选使用微信授权，拿到用户的微信昵称、头像、微信openID信息。

3.修改好数据表之后，点击保存，注意到页面中更新数据表。

4.高级组件中添加一个网格列表组件

5.暂时选择该样式。

6.添加好之后跟数据表绑定

7.如何点击网格列表中的任意一个标志播放对应音频呢？

每个音频在数据表其实就是一行数据中的某个字段值，这个字段值是一个网址，我们只需要拿到这个音频的网址，然后替换成页面中的一个音频组件即可。

8.如何拿到数据ID，如图所示：

（1）点击选中网格列表组件

（2）左侧会出现一个网格列表的列表结构小面板（以下简称“小面板”）

（3）点击小面板中的上传照片，右侧属性面板会只剩下一个点击时的触发器

（4）给点击时的触发器添加触发行为——网格列表操作

（5）用默认的获取当前行数据

（6）找到音频字段，点击后面输入框的+号，找到自己添加的音频组件，目的是用后台数据库里的音频网址替换掉当前页的音频。

9.网格列表的操作设置完成后，在成功时播放被替换掉的音频。

除了用网格列表展示音频，也可以在页面中多放置几个音频组件，随机从数据表获取音频，具体的根据自己的需求来调整。

三、下载音频

暂时需要通过插件下载，后期补充。

单条音频下载：

将录音上传到数据库后，会以网址的形式存储。复制网址并在一个新的标签页打开，可以点击浏览器自带的下载按钮下载当前网址的音频。

到新的标签页打开，点击更多-下载。

这样就可以下载单条数据的音频了。