这几天在用AppCan做app开发的过程中遇到了语音录入的问题,费尽周折,最终还是摸索出了一套简单实现的流程,现在放出来和大家分享。
先放效果图:
JS这边用的是Vue实现的,vue是一套用于构建用户界面的渐进式框架,这个会在之后的博客中介绍到,这里暂且不表:
var vm = new Vue({
el : "#Page",
methods : {
record : function() {
//开始后台录音
uexAudio.startBackgroundRecord(0);//设置录音格式为amr
$('#voiceMessage').removeAttr('onclick');
$('#tipfont').html("点击结束");
$("#tippicture").attr("src","keyPointWitness/css/myImg/stop.png");
var str = $('#tipfont').html();
if(str=='点击结束'){
$('#voiceMessage').click(function(){
$('#tipfont').html("录音结束");
$('#voiceMessage img').remove();
//停止后台录音
uexAudio.cbBackgroundRecord = function(opId, dataType, data) {
if (dataType == 0){
alert("录音文件路径为:" + data);
appcan.locStorage.setVal("data", data);
}
};
uexAudio.stopBackgroundRecord();
});
};
},
//播放录音
playVoice : function(){
var data = appcan.locStorage.getVal("data");
uexAudio.open(data);
uexAudio.play(0);
}
}
});
页面HTML代码如下:
<body>
<div id="app">
<div id="voiceMessage" @click="record">
<span id="tipfont">点击录音</span>
</div>
<div id="voice" @click="playVoice">
点击播放
</div>
</div>
</body>
CSS样式我就在这里不写了,这个可以根据个人情况及喜好,自行实现。