修改了代码uniapp可适用（数据赋值方式）
代码如下：
<template>
<view class="sound-recording">
<view class="time">{{status==0?'录音时长':(status==3?'录音已完成':'正在录音中')}}：{{time}} 秒</view>
<view class="btn">
<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 class="progress">
<text class="txt">最大录音时长（{{duration/1000}}秒 = {{duration/60000}}分钟）</text>
<progress :percent="time*(100/(duration/1000))" border-radius="10" color="green" stroke-width="10" backgroundColor="#fff" />
</view>
<view class="anniu">
<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;
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;
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;
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;
80rpx;
height: 80rpx;
border: 5rpx solid rgb(241, 244, 245);
}
</style>
参考博客地址：https://blog.csdn.net/qq_37379610/article/details/103898396