uniapp 小程序 录音功能

修改了代码uniapp可适用(数据赋值方式)
代码如下:

<template> <view> <view>{{status==0?\'录音时长\':(status==3?\'录音已完成\':\'正在录音中\')}}:{{time}} 秒</view> <view> <view :class="status==3?\'show\':\'hide\'" @tap="reset" hover-class="jump-hover">重新录制</view> <view :class="status==3 && playStatus==0?\'show\':\'hide\'" @tap="bofang" hover-class="jump-hover">{{playStatus==1?\'录音播放中\':\'播放录音\'}}</view> </view> <view> <text>最大录音时长({{duration/1000}}秒 = {{duration/60000}}分钟)</text> <progress :percent="time*(100/(duration/1000))" border-radius="10" color="green" stroke-width="10" backgroundColor="#fff" /> </view> <view> <view :class="status==0?\'row\':\'no-clicking\'" @click="kaishi" hover-class="jump-hover">开始</view> <view :class="status==1?\'row\':\'no-clicking\'" @click="zanting" hover-class="jump-hover">暂停</view> <view :class="status==2?\'row\':\'no-clicking\'" @tap="jixu" hover-class="jump-hover">继续</view> <view :class="status==1 || status==2?\'row\':\'no-clicking\'" @tap="tingzhi" hover-class="jump-hover">停止</view> </view> </view> </template> <script> const recorderManager = uni.getRecorderManager() const innerAudioContext = uni.createInnerAudioContext() var init export default { data() { return { time: 0, //录音时长 duration: 600000, //录音最大值ms 600000/10分钟 tempFilePath: "", //音频路径 status: 0, //录音状态 0:未开始录音 1:正在录音 2:暂停录音 3:已完成录音 playStatus: 0, //录音播放状态 0:未播放 1:正在播放 } }, methods: { kaishi: function() { clearInterval(init) //清除定时器 //监听录音自动结束事件(如果不加,录音时间到最大值自动结束后,没获取到录音路径将无法正常进行播放) recorderManager.onStop((res) => { console.log(\'recorder stop\', res) this.tempFilePath = res.tempFilePath this.status = 3 this.recordingTimer(this.time) }) const options = { duration: this.duration, //指定录音的时长,单位 ms sampleRate: 16000, //采样率 numberOfChannels: 1, //录音通道数 encodeBitRate: 96000, //编码码率 format: \'mp3\', //音频格式,有效值 aac/mp3 frameSize: 10, //指定帧大小,单位 KB } this.recordingTimer() recorderManager.start(options) // 监听音频开始事件 recorderManager.onStart((res) => { console.log(\'recorder start\') this.status = 1 }) console.log(this.status); }, /** * 暂停录音 */ zanting: function() { console.log(\'zanting\'); recorderManager.onPause(() => { console.log(\'recorder pause\') this.status = 2 }) this.recordingTimer(this.time) recorderManager.pause() }, /** * 继续录音 */ jixu: function() { this.status = 1 this.recordingTimer() recorderManager.resume() }, /** * 停止录音 */ tingzhi: function() { recorderManager.onStop((res) => { console.log(\'recorder stop\', res) this.tempFilePath = res.tempFilePath this.status = 3 }) this.recordingTimer(this.time) recorderManager.stop() }, /** * 播放录音 */ bofang: function() { //音频地址 console.log(this.tempFilePath); innerAudioContext.src = this.tempFilePath //在ios下静音时播放没有声音,默认为true,改为false就好了。 // innerAudioContext.obeyMuteSwitch = false //点击播放 if (this.playStatus == 0) { this.playStatus = 1 innerAudioContext.play() } // //播放结束 innerAudioContext.onEnded(() => { innerAudioContext.stop() this.playStatus = 0 }) }, recordingTimer: function(time) { var that = this if (time == undefined) { //将计时器赋值给init init = setInterval(function() { var time = that.time + 1; that.time = time }, 1000); } else { clearInterval(init) console.log("暂停计时") } }, /** * 重新录制 */ reset: function() { var that = this wx.showModal({ title: "重新录音", content: "是否重新录制?", success(res) { if (res.confirm) { that.time = 0 that.tempFilePath = \'\' that.status = 0 that.playStatus = 0 innerAudioContext.stop() } } }) } } } </script> <style> .sound-recording { background-color: rgb(234, 234, 234); margin: 10rpx 30rpx; border-radius: 20rpx; padding: 5rpx 0rpx; } .btn { margin: 0rpx 100rpx; display: flex; justify-content: space-between; align-items: center; } .btn .show { padding: 10rpx; width: 200rpx; font-size: 25rpx; display: flex; justify-content: center; align-items: center; background-color: rgb(178, 228, 228); border-radius: 20rpx; border: 5rpx solid rgb(127, 204, 214); } .btn .hide { padding: 10rpx; width: 200rpx; font-size: 25rpx; display: flex; justify-content: center; align-items: center; border-radius: 20rpx; border: 5rpx solid #eee; pointer-events: none; background-color: rgba(167, 162, 162, 0.445); } .time { line-height: 70rpx; text-align: center; font-size: 30rpx; } .progress { margin: 20rpx; } .play { margin: 0rpx 20rpx; } .txt { display: flex; justify-content: center; line-height: 60rpx; font-size: 25rpx; } .anniu { margin: 10rpx 50rpx; display: flex; justify-content: space-between; } .row { display: flex; justify-content: center; align-items: center; border-radius: 50%; font-size: 25rpx; width: 80rpx; height: 80rpx; background-color: rgb(178, 228, 228); border: 5rpx solid rgb(127, 204, 214); } .jump-hover { transform: scale(0.9); } /*禁止点击*/ .anniu .no-clicking { pointer-events: none; background-color: rgba(167, 162, 162, 0.445); display: flex; justify-content: center; align-items: center; border-radius: 50%; font-size: 25rpx; width: 80rpx; height: 80rpx; border: 5rpx solid rgb(241, 244, 245); } </style>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzpzpp.html