2.微信录音

老赵发表于:2015年02月27日 11:49:49更新于:2019年04月16日 15:41:20

视频教程


一、案例效果

0015cb579909b8a1e141aced6c42d31

《语音祝福》


二、应用场景

微信录音组件和微信拍照组件一起上线,如果两个结合起来,可以做很有趣的交互内容,比如,用户可以用自己的照片配合语音,发送个性化的微信贺卡;发张活动现场的照片、再配合一段语音解说......


三、素材准备

1.微信录音组件录制声音成功后,自己是不能主动显示的,需要提前在页面或者Masterpage中放一个音乐素材,在录音成功后替换这个素材。

对于素材的要求是:越小越好。


2.微信录音组件的标志其实是由2张图片显示的,可以用默认的,也可以自己设计并替换素材,要做2张图,切确保2张图的尺寸一致,素材大小控制在每张30KB左右。

0015cb57bbd854051c15f6f302e3a98


3.注意事项

(1)体验版/基础版账号用户的作品,将会出现“Epub360 免费技术支持”字样;
(2)专业版用户不会出现提示“Epub360 免费技术支持”提示信息;
(3)使用微信拍照组件,限于认证服务号才可以正常使用。大家需要先完成设置微信开发者信息,才能正常使用。

(4)大部分用户如果没有认证的服务号,第3条可以忽略不计,使用默认的意派的服务号即可。

0015b98a194806275515574932132f8


四、组件用法

基本用法

1.点击微信录音组件,添加到页面中。

0015cb57c5ccd0d3f4bdee0c6804cb1


2.点击【音频】组件,添加一个音频素材到页面中,不做任何设置。音频素材大小越小越好,十几KB就可以。

0015cb57d48a2ac51f87f1c8549426f


3.具体设置部分。给微信录音组件设置【成功时】,替换资源资源文件,替换的是音频素材。

0015cb57fec906311ce81da33d3dd3d


高级用法1

1.关于分享录音。用户至少需要2个页面:录音页面1播放录音页面2

用户A页面1录音,分享页面2出去;用户B打开H5,直接跳转到页面2中去听录音

因此事先要有一个用来播放录音的音频(默认不要勾选预加载)放置在Materpage页面(后面简称M页)中。

(1)先切换到Masterpage(后面简称M页)页面

0015cb5811c287ae044dd4c25afffa3


(2)切换到M页后,点击添加音频素材。

0015cb582076e027c4d335e72469127


3.原理:页面1录音完成后,用替换资源的方式替换M页(Materpage页面)中的音频;这样在页面B中我们就可以听取音频了(只有放在M页的音频才可以跨页面播放)。


4.切换回页面1中放置如下组件:录音组件,提示的图片或文字元素

image.png


5.添加微信录音组件后,给它设置点击时的触发器——替换资源文件——M页中的音频——替换方式为微信语音——点击橙色对号确认。image.png


6.补充:微信语音分享——如何将H5分享给他人时,听到的是我录制好的声音?


7.将按钮“分享给别人听”、三角提示“点击分享”两个元素初始隐藏;在微信录音的成功时显示它们,详细看上图成功时的触发器设置

给当前页面设置触发器 ——切换到当前页时——指定分享页。

image.png


8.给分享提示设置指定分享页(指定分享页设置详细教程):


9.要分享的页面即页面2,一般页面2中会设置如图的提示,提示用户B听用户A的录音。

或者添加我也要玩的提示,点击后跳转到录音页面1,这样就可以多次分享。如图:

image.png


高级用法2

1.语音识别。添加微信录音组件

001591acbb84febc352dfb123c10673


2.添加参数变量组件,并命名为“语音文字”类型改为文本
001591b1156b91d71d94d9eedd92212


3.在微信录音触发器的成功时执行语音识别微信录音的操作,并关联参数变量“语音文字”,需要注意一点,因为识别后的文字有可能带有标点符号句号,这样会造成判断错误,所以如果是用于判断文字,可以勾选【去掉标点符号】;如果仅仅是用于语音转成文字,并希望带有标点符号,则不需要勾选。

0015cb5850ae5a5fd60f55a939d3797


4.在参数变量“语音文字”,设置触发条件“当其等于“明天你好”时跳转页面,或者做其他的操作。
001591b15a4d434056ba77396d996c9


--------- 不了解设计的程序员不是好客服 ---------------

回复(21)

  1. 1
  2. 2
  3. 末页 >>