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内注册即可)并使用
添加后运行即可。
相关免费学习推荐:编程视频
以上是uniapp如何实现录音功能的详细内容。更多信息请关注PHP中文网其他相关文章!