聊天中发送语音

适用场景：手机端，聊天对话中点击录音并发送语音

标识元素： record

具体操作如下：

1. 找到录音元素（ record ），添加：

（ 1 ）基本信息中设置 id 和 name ： test ，自定义变量，用于提交录音文件。如下图：

（ 2 ）属性绑定： {"data--state":a} //a 为自定义变量，用于控制录制状态 recording/stop/pause/error

（ 3 ）添加逻辑：发生某事：其他事件，额外参数： msrblob ，额外逻辑：提交数据，提交到对应视口（将对应录音文件存入表中，略）。如下图：

提交数据后面点击“高级编辑”——提交数据中选择“高级”（注意：提交数据两种方式都可以，此处使用的“高级”方式），填写视口内容：

主要参数描述：

#test ：录音文件，名称可自定义 （必须）

h ：录音时间（从开始录音到录音结束的时间） ，名称可自定义（非必须）

其他参数： kfid （按自己页面需求而定） （非必须）

（ 4 ）如果页面需要需求需要录音时间 h （不需要直接跳过），添加下面操作：

添加逻辑（录音开始时）：发生某事：其他事件”，额外参数： msrstart ，产生某效果：绑定数据编程，点击高级编辑：添加代码：

var ms1=new Date().getTime();

_vm.ms1(ms1);

如下图：

添加逻辑（录音结束时）：发生某事：其他事件，额外参数： msrstop ，产生某效果：绑定数据编程，点击高级编辑：添加代码：

var ms2=new Date().getTime();

_vm.ms2(ms2);

_vm.h((_vm.ms2()-_vm.ms1())/1000);

如下图（此处 h 处理为以秒为单位）：

2. 在点击触发录音操作的地方（例如“按住说话”）添加两个绑定数据编程来控制录音状态：

1. 添加逻辑（开始录音）：发生某事：其他事件，额外参数： touchstart ，产生某效果：绑定数据编程，点击高级编辑：添加代码： _vm.a("recording");

如下图：

2. 添加逻辑（结束录音）：发生某事：其他事件，额外参数： touchend ，产生某效果：绑定数据编程，点击高级编辑：添加代码： _vm.a("stop");

如下图：

3. 聊天记录中点击录音消息进行播放，需配合音频播放器一起使用，操作如下：

1. 找到音频播放器元素（元素标识： audiox ） , 添加：属性绑定： {"data--src":src,"data--play":play} ，如图：

参数说明：

src ：自定义变量，录音文件

play ：自定义变量，用于音频播放控制

（ 2 ）点击录音消息进行录音播放，在点击触发事件的地方添加：

发生某事：单击，产生某效果：绑定数据编程，点击高级编辑添加代码：

_vm.src( _ko.dataFor(_ctx.self[0]).chattable7voice());

setTimeout(function () {

if(_vm.play()=="play"){ // 录音处于播放的时候，点击进行暂停

_vm.play("pause");

_ko.dataFor(_ctx.self[0]).you("off");  // 用于控制录音效果的切换

}else{ // 录音处于非播放状态的时候，点击进行播放

_vm.play("play");

_ko.dataFor(_ctx.self[0]).you("on"); // 用于控制录音效果的切换

}

},1000); //1000 为 1000 毫秒，意思是一秒之后进行触发，可根据情况自行设定

如下图：

4. 相关视口说明：读取录音视口与新建录音数据视口，由于简单不再 赘述 。

备注：

（ 1 ）如果录音播放时需要添加动态效果，可以用监听“ play” 变量的方式进行提交视口进行逻辑控制，或结合实际情况使用其他方式。

（ 2 ）录音文件的信息结构图设置尽量不要使用手册之外说明的格式，因为需要进行文件转换，具有延迟性。

   (3)   必须声明要打包成app后才可以测试(指：录音元素)打包时选择为https;在点击触发录音操作的地方,做绑定数据编程触发录音元素时，不用绑定其他事件，额外参数为：touchstart

友情链接：

录音元素（ record ）手册地址：

http://www.wware.org/wide/setup.html#?content=/v/wide/setup/element/record.html

音频播放器元素（ audiox ）手册地址：

http://www.wware.org/wide/setup.html#?content=/v/wide/setup/element/audiox.html