uniapp实现录音功能的方法:使用函数【uni.getrecordermanager()】实现,代码为【methods: {startrecord() {console.log('开始录音');this.recordermanager】。
本教程操作环境:windows7系统、uni-app2.5.1版本,dell g3电脑。
uniapp实现录音功能的方法:
这里就需要用到uni.getrecordermanager()
export default {data: {recordermanager: {},inneraudiocontext: {},},onload(options) {this.recordermanager = uni.getrecordermanager();this.inneraudiocontext = uni.createinneraudiocontext();// 为了防止苹果手机静音无法播放uni.setinneraudiooption({ obeymuteswitch: false })this.inneraudiocontext.autoplay = true;console.log("uni.getrecordermanager()",uni.getrecordermanager())let self = this;this.recordermanager.onstop(function (res) {console.log('recorder stop' + json.stringify(res));self.voicepath = res.tempfilepath;});},methods: {startrecord() {console.log('开始录音');this.recordermanager.start();},endrecord() {console.log('录音结束');this.recordermanager.stop();},playvoice() {console.log('播放录音');console.log('this.voicepath',this.voicepath); if (this.voicepath) {this.inneraudiocontext.src = this.voicepath;this.inneraudiocontext.play();}},}}
这一段是苹果手机静音时无法播放
uni.setinneraudiooption({ obeymuteswitch: false })
这里录音展示是使用了插件luno-audio,
推荐(免费):uni-app开发教程
需要引入import luchaudio from '@/components/luch-audio/luch-audio.vue'、注册(在components内注册即可)并使用
<view class="audioplay"><button @tap="startrecord">开始录音</button><button @tap="endrecord">停止录音</button> <button @tap="playvoice">播放录音</button></view><luch-audio v-if="audiocontent":src="audiocontent" :play.sync="audioplaynew"></luch-audio>
添加后运行即可。
相关免费学习推荐:编程视频
以上就是uniapp如何实现录音功能的详细内容。