为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
AngularJS

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();
}
点击查看更多内容
4人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
8
获赞与收藏
47

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消