var app = getApp(),
$ = require("../../utils/util.js");
const recorderManager = wx.getRecorderManager();
var interval;
Page({
data: {
listen: false,
voicePath: "",
minute: 0,
second: 0,
timeText: "00:00"
},
onLoad: function(e) {},
//计时器
timer: function() {
let second = Number(this.data.second);
let minute = Number(this.data.minute);
let timeText = this.data.timeText;
second = second + 1;
if (second >= 60) {
second = 0;
minute = minute + 1;
}
second < 10 ? second = "0" + second : second;
minute < 10 ? minute = "0" + minute : minute;
timeText = minute + ":" + second;
this.setData({
second: second,
minute: minute,
timeText: timeText
})
},
//开始录音
startluyin: function() {
let that = this;
that.setData({
start: true,
});
interval = setInterval(function() {
that.timer();
}, 1000)
const options = {
duration: 600000, //指定录音的时长，单位 ms
sampleRate: 16000, //采样率
numberOfChannels: 1, //录音通道数
encodeBitRate: 96000, //编码码率
format: 'mp3', //音频格式，有效值 aac/mp3
frameSize: 50, //指定帧大小，单位 KB
}
//开始录音
recorderManager.start(options);
recorderManager.onStart(() => {
console.log('recorder start')
});
//错误回调
recorderManager.onError((res) => {
console.log(res);
})
},
//结束录音
endluyin: function() {
this.setData({
start: false
})
recorderManager.stop();
recorderManager.onStop((res) => {
this.tempFilePath = res.tempFilePath;
console.log('停止录音', res.tempFilePath)
const {
tempFilePath
} = res;
this.setData({
audioPath: res.tempFilePath
})
})
clearInterval(interval);
},
//删除录音
deleteluyin: function() {
let that = this;
wx.showModal({
title: '提示',
content: '您确定要删除此录音吗',
success: function(res) {
if (res.confirm) {
that.setData({
timeText: "00:00",
voicePath: "",
audioPath: ""
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
//播放录音
playaudio: function() {
const innerAudioContext = wx.createInnerAudioContext();
this.setData({
listen: true
})
innerAudioContext.autoplay = true
innerAudioContext.src = this.tempFilePath
innerAudioContext.onPlay(() => {
console.log('开始播放')
})
//监听是否播放完毕
innerAudioContext.onEnded(() => {
console.log('播放结束')
this.setData({
listen: false
})
})
innerAudioContext.onError((res) => {
console.log(res.errMsg)
console.log(res.errCode)
})
},
//上传录音
uploadluyin: function() {
let that = this;
$.AJAX(app.globalData.API_OSSUPLOAD + '?type=sp_twitter', "GET", {}, function(res) {
var oss = res.datas;
var audioPath = that.data.audioPath;
var voicePath = that.data.voicePath;
console.log(audioPath, "111")
if (audioPath) {
$.loading("上传中...", 10000)
oss.path = audioPath;
var imgtype = audioPath.substr(audioPath.length - 3);
var imgname = $.getrandom() + '/' + $.getrandom2() + '.' + imgtype;
oss.key = oss.key + imgname;
$.UPLOADOSS(oss.host, oss, function(res) {
voicePath = oss.host + "/" + oss.key;
that.setData({
voicePath: voicePath
})
$.hideloading();
wx.showToast({
title: '上传成功',
icon: 'success',
duration: 2000
})
wx.navigateBack({
delta: 1
})
let pages = getCurrentPages();
console.log(pages, "pages---")
let timeText = that.data.timeText;
pages[1].setData({
voice: voicePath,
audioflag: true,
timeText: timeText
})
})
} else {
wx.showModal({
title: '提示',
content: '请录音再上传',
showCancel: false,
confirmText: "知道了",
success: function(res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
})
}
})
}
})
<view class="container">
<view class='topbox'>
<view class="m-loading-box" bindtap='playaudio'>
<label class="{{listen?'u-loading':'u-noloading'}}"></label>
<image class="luyin1" src="https://cdn.quansuwangluo.com/shapan/luyin1.png"></image>
</view>
<view class='time'>{{timeText}}</view>
</view>
<view class='bottombox'>
<view class='opt opt_del' bindtap='deleteluyin'>
<view class='delwrap'>
<image src="https://cdn.quansuwangluo.com/shapan/del.png"></image>
</view>
<view>删除</view>
</view>
<view class='opt opt_luyin' bindtap='startluyin' wx:if="{{!start}}">
<view class='luyinwrap'>
<image src="https://cdn.quansuwangluo.com/shapan/pause.png"></image>
</view>
<view>点击录音</view>
</view>
<view class='opt opt_luyin' bindtap='endluyin' wx:else>
<view class='luyinwrap'>
<image src="https://cdn.quansuwangluo.com/shapan/nopause.png"></image>
</view>
<view>点击录音</view>
</view>
<view class='opt opt_listen' bindtap='uploadluyin'>
<view class='listenwrap'>
<image src="https://cdn.quansuwangluo.com/shapan/upload.png"></image>
</view>
<view>上传</view>
</view>
</view>
</view>
.topbox{
background-color: #FCF6ED;
font-size: 58rpx;
text-align: center;
position: relative;
padding: 225rpx 0;
}
.topbox .u-loading{
width: 240rpx;
height: 240rpx;
display: inline-block;
vertical-align: middle;
-webkit-animation: weuiLoading 1s steps(12, end) infinite;
animation: weuiLoading 1s steps(12, end) infinite;
background: transparent url('https://cdn.quansuwangluo.com/shapan/loading.png') no-repeat;
background-size: 100%;
}
.topbox .u-noloading{
width: 240rpx;
height: 240rpx;
display: inline-block;
vertical-align: middle;
background: transparent url('https://cdn.quansuwangluo.com/shapan/loading.png') no-repeat;
background-size: 100%;
}
.luyin1{
height: 60rpx;
width: 38rpx;
position: absolute;
left: 358rpx;
top:314rpx;
}
.topbox .time{
margin-top: 35rpx;
}
.bottombox{
background-color: #FEA22C;
display: flex;
align-items: center;
height: 400rpx;
color: #fff;
font-size: 34rpx;
padding: 0 90rpx;
text-align: center;
}
.opt_del,.opt_listen{
margin-top: 20rpx;
}
.opt_del .delwrap{
width: 120rpx;
height: 120rpx;
display: flex;
justify-content: center;
align-items: center;
border: 4rpx solid #fff;
border-radius: 50%;
margin-bottom: 20rpx;
}
.opt_del image{
width: 44rpx;
height: 58rpx;
}
.opt_luyin{
padding: 0 70rpx;
}
.opt_luyin .luyinwrap{
width: 180rpx;
height: 180rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: 50%;
margin-bottom: 20rpx;
}
.opt_luyin image{
width: 60rpx;
height: 60rpx;
}
.opt_listen image{
width: 60rpx;
height: 54rpx;
}
.opt_listen .listenwrap{
width: 120rpx;
height: 120rpx;
display: flex;
justify-content: center;
align-items: center;
border: 4rpx solid #fff;
border-radius: 50%;
margin-bottom: 20rpx;
}