uniapp實現錄音功能的方法：使用函數【uni.getRecorderManager()】實現，程式碼為【methods: {startRecord() {console.log('開始錄音');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();
}
},
}
}這一段是蘋果手機靜音時無法播放
uni.setInnerAudioOption({
obeyMuteSwitch: false
})這裡錄音展示是使用了插件luno-audio，
推薦（免費）：uni-app開發教學
需要引入import luchAudio from '@/components/luch-audio/luch-audio.vue'、註冊（在components內註冊即可）並使用
<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中文網其他相關文章！
