> 웹 프론트엔드 > uni-app > uniapp에서 녹음 기능을 구현하는 방법

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

coldplay.xixi
풀어 주다: 2023-01-13 00:44:16
원래의
14483명이 탐색했습니다.

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

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

이 튜토리얼의 운영 환경: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿