继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

ionic+angularjs+cordova 录音,播放录音

紫晴20
关注TA
已关注
手记 3
粉丝 8
获赞 47

1.安装录音插件:ionic plugin addhttps://github.com/emj365/cordova-plugin-audio-recorder-api
2.安装媒体插件,用来播放录音:ionic plugin add https://github.com/apache/cordova-plugin-media

HTML:
//长按按钮录音
<div class="voice-btn" on-hold="rec_voice()" on-release="endrec_voice()" ng-show="!isOk2" style="display: inline-block;">
<i class="ico ion-mic-a"></i> 说点什么
<ion-spinner icon="spiral" ng-show="isrec"></ion-spinner>
</div>
ControllerJs:

$scope.recres = {}; //定义一个对象
$scope.isrec = false;
$scope.k = "";
$scope.isOk2 = false;
//长按录制声音
$scope.rec_voice  = function(){
    $scope.isrec = true;
    window.plugins.audioRecorderAPI.record(function(msg) {
        // complete
        console.log('ok: ' + msg);
    }, function(msg) {
        // failed
        console.log('ko: ' + msg);
    }, 20); // record 30 seconds
}
//console.log("停止");
$scope.isrec = false;

//释放按钮,上传录音文件
$scope.endrec_voice = function(){
window.plugins.audioRecorderAPI.stop(function(file) {
// success
console.log('ok: ' + file);
var options = new FileUploadOptions();
options.fileKey="file";
options.fileName=file.substr(file.lastIndexOf('/')+1);
var ft = new FileTransfer();
ft.onprogress = function(progressEvent) {
//上传中
console.log("上传中");
console.log(progressEvent.loaded);
};
ft.upload('file:///'+file, encodeURI(Configs.base_url+"/apps/file/uploadVoice"),
function(re){
console.log(JSON.stringify(re));
console.log(re.responseCode);
var status= JSON.parse(re.response).status;
console.log("aa:"+status);
if(status == 1){
//上传成功
$scope.isrec = false;
$scope.isOk= true;
$scope.isOk2 = true;
$scope.$digest();
console.log("上传完成");
console.log($scope.isOk);
var voice = JSON.parse(re.response).data;
console.log(voice);
$scope.chat.ct = voice;
$scope.chat.tag = "voice";
$scope.send();
$scope.sendMsg_button = true;
$scope.sendMsg_input = true;
}
}, function(e){
console.log(JSON.stringify(e));
}, options);

    }, function(msg) {
        // failed
        console.log('ko: ' + msg);
        $scope.isrec = false;
        $scope.$digest();
    });
}

//播放录音
$scope.playrec = function(v){
console.log(v);
$scope.voice = $scope.teUrl+v;
$scope.recres = new Media($scope.voice,
function () { console.log("playAudio():Audio Success"); },
// error callback
function (err) { console.log("playAudio():Audio Error: " + err); });

    $scope.recres.play();
}
打开App,阅读手记
4人推荐
发表评论
随时随地看视频慕课网APP

热门评论

感觉没听懂,这个有原帖么?

请问这个测试过吗?  我这里怎么报错?是我哪里漏掉了什么吗?

ionic.bundle.js:26799 TypeError: Cannot read property 'audioRecorderAPI' of undefined


查看全部评论