.

3.用户上传录音/音频、展示、下载

小常发表于:2019年12月31日 18:33:53更新于:2020年01月15日 11:13:28

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

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

0015e0d8a3eeb77a11e5f638072b137


一、如何上传、保存音频


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

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

0015e0ef66d300d6dd351d4804f49ac


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

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

0015e0ef6f0167b5bd94f3214d2e130


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

0015e0ef7719376e748d1e4a265a21b


4.切换到作品管理界面

0015e0f01142358fb67a7e1c663cd52


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

0015e0f017d8da29d4286100f495359


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

设置好以后点击保存。

0015e0f058bd3e569ffae42adcb01a2


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

0015e0f0976ef2d0cef8a02b8ad84cc


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

image.png

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

0015e0f0a093d83a2f54fe5f5bfc993


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

0015e0f0a818526e7c43b78a75ecb57


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

0015e0f0b2a9e393ae5565ab878cda1


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

0015e0f0e916a4620125f82cee1671d


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


二、展示音频

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

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

0015e1e78194f2e7f171a0a7912ed71


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

0015e1e7685019691a4be3c62f46cd8


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

0015e1e76f6d24b214fba590e97df4f



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

0015e1e79464d688bd93a326ea1f44b


5.暂时选择该样式。

0015e1e7982e4374cf666a68c887858


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

0015e1e7a162a025058bd40da477e5b


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

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

0015e1e7cc339929fa1be220e927df1


8.如何拿到数据ID,如图所示:

(1)点击选中网格列表组件

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

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

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

(5)用默认的获取当前行数据

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

0015e1e7da9af7533d5e4b4372fca80


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

0015e1e7f65a03d886eb61b6e2ea4c9

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


三、下载音频

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