uniapp에서 녹음 기능을 구현하는 방법

uniapp의 녹음 기능 구현 방법: [uni.getRecorderManager()] 함수를 사용하여 구현하며, 코드는 [methods: {startRecord() {console.log('Start Recording')]입니다.

이 튜토리얼의 운영 환경: windows7 시스템, uni-app2.5.1 버전, Dell G3 컴퓨터.

uniapp에서 녹음 기능을 구현하는 방법:

uni.getRecorderManager()를 사용해야 합니다.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

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

Apple 휴대폰이 음소거되어 있으면 이 섹션을 재생할 수 없습니다

rrreee녹음 표시는 여기에 있습니다. 플러그인 luno-audio를 사용 중입니다. 권장(무료):

uni-app development tutorial

'@/comComponents/luch에서 luchAudio 가져오기를 도입해야 합니다. -audio/luch-audio .vue', 등록하고(컴포넌트에 등록만 하면 됨)

rrreee

를 사용하여 추가하고 실행합니다.

관련 무료 학습 권장 사항:

프로그래밍 비디오🎜🎜🎜

위 내용은 uniapp에서 녹음 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!