uniapp如何实现录音功能

发布时间:2022-05-23 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了uniapp如何实现录音功能脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

uniapP实现录音功能的方法:使用函数【uni.getRecorderManager()】实现,代码为【methods: {startRecord() {console.LOG('开始录音');this.recorderManager】。

uniapp如何实现录音功能

本教程操作环境: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,请注明来意。
标签:uniapp