ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。