uniappに録音機能を実装する方法

Uniapp は記録機能を実装します: 関数 [uni.getRecorderManager()] を使用して実装します。コードは [methods: {startRecord() {console.log('Start Recording'); this.recorderManager] です。 。

このチュートリアルの動作環境: 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();
}
},
}
}

電話がミュートされていると Apple 電話を再生できません

uni.setInnerAudioOption({  
obeyMuteSwitch: false  
})

ここに示されている録音では、プラグイン luno-audio、

推奨 (無料) が使用されています。 ユニアプリ開発チュートリアル

「@/components/luch-audio/luch-audio.vue」から import luchAudio を導入して登録する必要があります(コンポーネントに登録するだけです)

<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に録音機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。