微信小程序实现录音Record功能
程序员文章站
2022-08-05 10:40:43
本文实例为大家分享了微信小程序实现录音record功能的具体代码,供大家参考,具体内容如下布局 <...
本文实例为大家分享了微信小程序实现录音record功能的具体代码,供大家参考,具体内容如下
布局
<!--pages/record/record.wxml--> <view> <button class="tui-menu-list" bindtap="startrecordaac" type="primary">录音开始(aac)</button> <button class="tui-menu-list" bindtap="startrecordmp3" type="primary">录音开始(mp3)</button> <button class="tui-menu-list" bindtap="stoprecord" type="primary">录音结束</button> <button class="tui-menu-list" bindtap="playrecord" type="primary">播放录音</button> </view>
样式:
/* pages/record/record.wxss */ .tui-menu-list{ flex-direction: row; margin: 20rpx; padding: 20rpx; }
开始录音和停止录音
// pages/record/record.js page({ /** * 页面的初始数据 */ data: { }, onload:function (options) { var that = this this.recordermanager = wx.getrecordermanager(); this.recordermanager.onerror(function () { that.tip("录音失败!"); }) this.recordermanager.onstop(function (res) { that.setdata({ src:res.tempfilepath }) console.log(res.tempfilepath) that.tip("录音完成!") }) this.inneraudiocontext = wx.createinneraudiocontext() this.inneraudiocontext.onerror((res) =>{ that.tip("播放录音失败!") }) }, //提示 tip:function (msg) { wx.showmodal({ cancelcolor: 'cancelcolor', title:'提示', content:msg, showcancel:false }) }, //录制aac startrecordaac:function () { this.recordermanager.start({ format:'aac' }) }, //录制mp3 startrecordmp3:function () { this.recordermanager.start({ format:'mp3' }) }, //停止录音 stoprecord:function () { this.recordermanager.stop() }, //播放录音 playrecord:function () { var that = this var src = this.data.src if (src='') { this.tip('请先录音') return } this.inneraudiocontext.src = this.data.src this.inneraudiocontext.play() } })
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 智慧里面的珍珠
下一篇: 早产儿保健服务有了规范