脚本宝典收集整理的这篇文章主要介绍了uniapp如何实现录音功能,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
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如何实现录音功能的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的uniapp如何实现录音功能全部内容,希望文章能够帮你解决uniapp如何实现录音功能所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。