微信小程序开发-语音录入与删除

1.wxml

<view class="title"><text class="label" style="padding: 8px;">上传语音：</text>
</view>
<button class="{{luStatu?'btTouch':'bt'}}" style="margin-top:2vh;"  bind:touchstart="touchStart"bind:touchend="touchEnd"  type='primary'><text wx:if="{{luStatu}}">松开结束</text> <text wx:else>按住说话</text>
</button><block wx:for="{{list}}" wx:key="index"><view bindtap="audioPlay" bindlongtap="deleteVoice" data-src="{{item.src}}" class='myLuYin'>录音{{index+1}}(点击播放，长按删除)</view>
</block>

2.js

Page({luStatu:false,list:[],width:0,
}),// 触摸开始
touchStart:function(e){
// console.log('touchStart', e);
var start=e.timeStamp;
var seconds = (start % (1000 * 60)) / 1000;
this.setData({start: seconds,luStatu:true,
})
this.recorderManager.start({format: 'mp3'
});
},// 触摸结束
touchEnd:function (e) {
// console.log('touchEnd', e);
var start = this.data.start;
var end = e.timeStamp;
var seconds = (end % (1000 * 60)) / 1000;
var shijian = seconds - start;
var width = shijian*4;
this.setData({end: seconds,shijian: shijian,luStatu: false,width: width
})
this.recorderManager.stop();
console.log('按了' + shijian+'秒');
console.log('width是',width);
},
// 实时监测变化调用这些方法
onShow:function(e){
var that=this;
//  初始化录音对象
this.recorderManager = wx.getRecorderManager();
this.recorderManager.onError(function () {that.tip("录音失败！")
});// 录音结束
this.recorderManager.onStop(function (res) {var list=that.data.list;var width = that.data.width;var src = res.tempFilePath;console.log('list的1是',list)// console.log(src)var aa={src: src,width: width,play:false}list.push(aa);console.log('list的2是', list)that.setData({list: list})// that.tip("录音完成！")//console.log(list)
});this.innerAudioContext = wx.createInnerAudioContext();
this.innerAudioContext.onError((res) => {that.tip("播放录音失败！")
})
},
tip: function (msg) {
wx.showModal({title: '提示',content: msg,showCancel: false
})
},// 播放录音
audioPlay: function (e) {
var that = this;
var src = e.currentTarget.dataset.src;
if (src == '') {this.tip("失效")return;
}
this.innerAudioContext.src = src;
this.innerAudioContext.play();
},
deleteVoice:function(e){
var that = this, num = e.currentTarget.dataset.index, o = that.data.list;
wx.showModal({title: "提示",content: "确认要删除该语音吗?",success: function(e) {if (e.confirm) console.log("点击确定了"), o.splice(num, 1); else if (e.cancel) return console.log("点击取消了"), !1;that.setData({list: o});}
});
}

3.wxss

.myLuYin{height: 80rpx;background: greenyellow;border-radius:6rpx;margin: 15rpx 0; text-align: center;line-height: 80rpx;font-size: 32rpx;color: #fff;}.bt{width: 100%;position: fixed;bottom: 0;left: 0;z-index: 69;height: 100rpx;}.btTouch{background: #e2e2e2 !important;color: #333333 !important;width: 100%;position: fixed;bottom: 0;left: 0;z-index: 69;height: 100rpx;}

微信小程序开发-语音录入与删除相关推荐

微信小程序的语音输入功能开发：微信同声传译插件
微信小程序的语音输入,语音转文字功能在很多场景要使用到比如搜索框,搜索关键字的时候用语音输入比用文字方便多了再比如再天下网吧小程序里发帖,发布回复时,用语音输入比输入文字也方便不少那么如何实现语 ...
七天学习微信小程序开发（一）—— 学习笔记
文章目录前言目标第一天 -- 前端配置和编写微信开发微信小程序的代码结构常用标签(wxml) 常用样式(wxss) 界面布局的技术任务第二天 -- 深度学习微信前端编写(一) 程序底部 ...
微信小程序开发中的二三事之网易云信IMSDK DEMO
本文由作者邹永胜授权网易云社区发布. 简介为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程.用产品的话说就是: 云信 IM 小程序 SDK 的能力 ...
微信小程序开发导航：精品教程+网友观点+demo源码（5月9日更新）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
python开发微信小程序-Python 开发者的微信小程序开发实践
导读在知乎上,有人提问"如何使用 Python 开发微信小程序". 其实微信小程序作为一个前端的机制,Python 并不能插上边.只不过可以作为后端接口为微信小程序提供数据服务而 ...
现学现卖微信小程序开发（二）
现学现卖微信小程序开发(一) 现学现卖微信小程序开发(三):引入Rx,为小程序插上翅膀一个Todo应用的小程序版好的,那么下一步我们就先照猫画虎,新建一个todos文件夹,然后一套四样同名文件准备 ...
微信小程序开发与应用第一章微信小程序的基本知识1
1-1 第一章第一节微信小程序的基本知识1 文章目录前言一.注册一个小程序账号二.第一个微信小程序"Hello Wechat!" (一)准备工作 (二)页面介绍 (三)代 ...
微信小程序开发系列二：微信小程序的视图设计
大家如果跟着我第一篇文章微信小程序开发系列一:微信小程序的申请和开发环境的搭建一起动手,那么微信小程序的开发环境一定搭好了.效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用. 这个系列 ...
微信小程序开发教程第八章：微信小程序分组开发与左滑功能实现
接着上面微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现.(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程序名片夹详情页开 ...

微信小程序开发-语音录入与删除

微信小程序开发-语音录入与删除相关推荐

最新文章

热门文章