微信小程序录音机源代码

本文主要是介绍微信小程序录音机源代码，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<!-- <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>

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

// 全局录音管理器
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 = nullthis.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 = tempFilePathconsole.log(this.data.file);})},playTab() {audio.src = this.data.fileaudio.play()},
})

这篇关于微信小程序录音机源代码的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---