python实现录音小程序 界面_微信小程序录音界面以及功能实现
界面
pick一下最终效果，然后一步一步来。
先把界面效果做出来。
功能：
长按会随动画出现边上半透明的圈，松开会缩回去。
顶部progressBar长按时出现，然后随录音时长变短。
这是界面功能，我们先搞一下。
wxml
wxss
.head {
width: 100%;
height: 400rpx;
position: relative;
}
.head ,page{
background-color: #f7f7f7;
}
.record, .dot {
height: 200rpx;
width: 200rpx;
border-radius: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-iteration-count: 1;
}
.record {
background: rgba(92, 212, 76);
z-index: 10;
}
.dot {
background: rgba(92, 212, 76, 0.7);
z-index: 9;
}
.dot-blowup {
animation: sploosh2 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
animation-fill-mode: forwards;
}
.dot-zoomout {
animation: sploosh3 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
animation-fill-mode: forwards;
}
@keyframes sploosh2 {
0% {
box-shadow: 0 0 0 0px rgba(92, 212, 76, 0.7);
background: rgba(92, 212, 76, 0.7);
}
100% {
box-shadow: 0 0 0 15px rgba(92, 212, 76, 0.3);
background: rgba(92, 212, 76, 0.3);
}
}
@keyframes sploosh3 {
0% {
box-shadow: 0 0 0 15px rgba(92, 212, 76, 0.3);
background: rgba(92, 212, 76, 0.3);
}
100%{
box-shadow: 0 0 0 0px rgba(92, 212, 76, 0.7);
background: rgba(92, 212, 76, 0.7);
}
}
.record image {
height: 90rpx;
width: 90rpx;
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
background: transparent;
transform: translate(-50%, -50%);
}
js赋值
var app = getApp(),
rm = wx.getRecorderManager();
//录音停止时调用
rm.onStop(function(e) {
var a = this;
wx.showLoading({
title: "正在识别..."
});
//上传逻辑
var n = {
url: app.globalData.url + "upload",
filePath: e.tempFilePath,
name: "music",
header: {
"Content-Type": "application/json"
},
success: function (res) {
}
};
wx.uploadFile(n);
}),
Page({
/**
* 页面的初始数据
*/
data: {
hasRecord: false,
isDot: "block",
isTouchStart: false,
isTouchEnd: false,
value: '100',
touchStart:0,
touchEnd:0,
vd:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var a = this;
wx.authorize({
scope: "scope.record",
success: function() {
console.log("录音授权成功");
},
fail: function() {
console.log("录音授权失败");
}
}), a.onShow()
},
// 点击录音按钮
onRecordClick: function () {
wx.getSetting({
success: function (t) {
console.log(t.authSetting), t.authSetting["scope.record"] ? console.log("已授权录音") : (console.log("未授权录音"),
wx.openSetting({
success: function (t) {
console.log(t.authSetting);
}
}));
}
});
},
/**
* 长按录音开始
*/
recordStart: function(e) {
var n = this;
rm.start({
format: "mp3",
sampleRate: 32e3,
encodeBitRate: 192e3
}), n.setData({
touchStart: e.timeStamp,
isTouchStart: true,
isTouchEnd: false,
showPg: true,
})
var a = 15, o = 10;
this.timer = setInterval(function () {
n.setData({
value: n.data.value - 100 / 1500
}), (o += 10) >= 1e3 && o % 1e3 == 0 && (a-- , console.log(a), a <= 0 && (rm.stop(),
clearInterval(n.timer), n.animation2.scale(1, 1).step(), n.setData({
animationData: n.animation2.export(),
showPg: false,
})));
}, 10);
},
/**
* 长按录音结束
*/
recordTerm: function(e) {
rm.stop(), this.setData({
isTouchEnd: true,
isTouchStart: false,
touchEnd: e.timeStamp,
showPg: false,
value: 100
}), clearInterval(this.timer);
}
})
这里我的录音按钮点击扩散效果用的是纯css实现，而上方progress是使用animation实现的。