html
<!-- <button bind:tap="startTab">开始录音</button>
<button bind:tap="stopTab">结束录音</button>
<button bind:tap="playTab">播放录音</button>
<view style="margin: 0 auto;">{{time}}</view> -->
<view class="container">
<!-- 上面部分 -->
<view class="top">
<view class="lyjText">录音机</view>
<view class="times">{{h<10?'0'+ h:h}}:{{f<10?'0'+ f:f}}:{{s<10?'0'+ s:s}}</view>
</view>
<!-- 下面部分 -->
<view class="player">
<!-- 暂停 -->
<view bind:tap="pauseTab" class="playerBox sjx"></view>
<!-- 开始录音 -->
<view class="playerBox1">
<view class="litterBox" bind:tap="startTab">
</view>
</view>
<!-- 结束录音 -->
<view class="playerBox" bind:tap="stopTab">
<view class="zfx"></view>
</view>
</view>
<button type="primary" bind:tap="playTab">播放</button>
</view>
css
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 100vh;
}
.player {
display: flex;
justify-content: space-between;
align-items: center;
}
.playerBox1 {
width: 200rpx;
height: 200rpx;
background-color: red;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 50rpx;
}
.litterBox {
width: 90rpx;
height: 90rpx;
background-color: white;
border-radius: 50%;
}
.playerBox {
width: 140rpx;
height: 140rpx;
background-color: rgb(239,239,239);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.zfx {
width: 40rpx;
height: 40rpx;
background-color: rgb(174,174,174);
}
.sjx::after {
content: "";
display: block;
border: 30rpx solid transparent;
border-left-color: rgb(174,174,174);
position: relative;
left: 15rpx;
}
.lyjText {
font-size: 50rpx;
}
.times {
font-size: 120rpx;
}
.top {
display: flex;
flex-direction: column;
align-items: center;
}
javascript
// 全局录音管理器
let recorder = wx.getRecorderManager()
// 全局文件管理
// let fileSytems = wx.getFileSystemManager()
let audio = wx.createInnerAudioContext()
let timer = null
let _this
Page({
/**
* 页面的初始数据
*/
data: {
// 小时
h: 0,
// 分钟
f: 0,
// 秒
s: 0,
file: '',
// 是否在播放
isPlay: false
},
onLoad() {
_this = this
},
pauseTab() {
if (this.data.isPlay === true) {
this.setData({
isPlay: false
})
recorder.pause()
clearInterval(timer)
timer = null
} else if (this.data.isPlay === false) {
this.startTab()
}
},
startTab() {
this.setData({
isPlay: true
})
if (!timer) {
timer = setInterval(() => {
this.setData({
s: this.data.s >= 59 ? 0 : this.data.s + 1,
f: this.data.s >= 59 ? this.data.f + 1 : this.data.f,
h: this.data.f >= 59 ? this.data.h + 1 : this.data.h,
})
}, 1000)
}
recorder.start()
},
stopTab() {
this.setData({
isPlay: false
})
clearInterval(timer)
timer = null
this.setData({
f: 0,
h: 0,
s: 0
})
recorder.stop()
// console.log(1);
recorder.onStop(res => {
console.log(1);
const {
tempFilePath
} = res
// console.log(res);
this.data.file = tempFilePath
console.log(this.data.file);
})
},
playTab() {
audio.src = this.data.file
audio.play()
},
})