实现录音功能
这里就需要用到uni.getRecorderManager()
大部分是直接搬了官网的代码,但是还是需要记录一下修改的部分
下面这段代码运行在微信小程序上、下面这段代码运行在微信小程序上、下面这段代码运行在微信小程序上
下面这段代码最好运行到微信开发者工具后,然后真机调试,因为小程序直接调试录音会报错
export default {
data: {
recorderManager: {},
innerAudioContext: {},
voicePath: ''
},
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,
需要引入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> -->
<!-- 20210226修改 -->
<luch-audio
v-if="voicePath"
:src="voicePath"
:play.sync="audioPlayNew"
></luch-audio>
添加后运行即可。
2021年2月9号更新
更新一个uni-app运行到手机h5的写法
下面这段代码最好真机调试、没有直接在浏览器上调试,录音需要授权
下面这段代码最好真机调试、没有直接在浏览器上调试,录音需要授权
下面这段代码最好真机调试、没有直接在浏览器上调试,录音需要授权
<template>
<view class="audioPlay">
<button @click="startRecord">开始录音</button>
<button @tap="endRecord">停止录音</button>
<button @tap="playVoice">播放录音</button>
</view>
</template>
<script>
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
export default {
data() {
return {
recorderManager: {},
innerAudioContext: {},
text: 'uni-app',
voicePath: ''
}
},
onLoad() {
innerAudioContext.autoplay = true;
console.log("uni.getRecorderManager()",uni.getRecorderManager())
console.log("uni.createInnerAudioContext()",uni.createInnerAudioContext())
let self = this;
recorderManager.onStop(function (res) {
console.log('recorder stop' + JSON.stringify(res));
self.voicePath = res.tempFilePath;
});
},
methods: {
startRecord() {
console.log('开始录音');
recorderManager.start();
},
endRecord() {
console.log('录音结束');
recorderManager.stop();
},
playVoice() {
console.log('播放录音');
if (this.voicePath) {
innerAudioContext.src = this.voicePath;
innerAudioContext.play();
}
}
}
}
</script>
谢谢一位小姐姐提出来的,然后才会有这个H5的写法,emmmmm,因为我很少写H5。
有个 升级版 的uni-app微信小程序 录音上传 uni-app小程序实现录音计时、播放、暂停等功能