How to implement recording function in uniapp-uni-app-php.cn

How to implement recording function in uniapp

coldplay.xixi

Release： 2023-01-13 00:44:16

Original

14443 people have browsed it

Uniapp implements the recording function: Use the function [uni.getRecorderManager()] to implement, the code is [methods: {startRecord() {console.log('Start recording'); this.recorderManager].

How to implement recording function in uniapp

The operating environment of this tutorial: windows7 system, uni-app2.5.1 version, Dell G3 computer.

How uniapp implements the recording function:

You need to use this paragraph 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(&#39;recorder stop&#39; + JSON.stringify(res));
self.voicePath = res.tempFilePath;
});
},
methods: {
startRecord() {
console.log(&#39;开始录音&#39;);
this.recorderManager.start();
},
endRecord() {
console.log(&#39;录音结束&#39;);
this.recorderManager.stop();
},
playVoice() {
console.log(&#39;播放录音&#39;);
console.log(&#39;this.voicePath&#39;,this.voicePath);
 
if (this.voicePath) {
this.innerAudioContext.src = this.voicePath;
this.innerAudioContext.play();
}
},
}
}

Copy after login

The Apple phone cannot be played when the phone is muted

uni.setInnerAudioOption({  
obeyMuteSwitch: false  
})

Copy after login

The recording shown here uses the plug-in luno-audio,

Recommended (free): uni-app development tutorial

You need to introduce import luchAudio from '@/components/luch-audio/luch-audio.vue' and register (just register in components ) and use

<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>

Copy after login

to add it and run it.

Related free learning recommendations: Programming videos

The above is the detailed content of How to implement recording function in uniapp. For more information, please follow other related articles on the PHP Chinese website!