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; }