Appcan实现录音及在线播放功能

这几天在用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样式我就在这里不写了，这个可以根据个人情况及喜好，自行实现。

Appcan实现录音及在线播放功能

猜你喜欢