Heim > Web-Frontend > uni-app > Hauptteil

So implementieren Sie die Aufnahmefunktion in Uniapp

coldplay.xixi
Freigeben: 2023-01-13 00:44:16
Original
14444 Leute haben es durchsucht

So implementiert Uniapp die Aufnahmefunktion: Verwenden Sie zum Implementieren die Funktion [uni.getRecorderManager()]. Der Code lautet [methods: {startRecord() {console.log('Starte Aufnahme');

So implementieren Sie die Aufnahmefunktion in Uniapp

Die Betriebsumgebung dieses Tutorials: Windows7-System, Uni-App2.5.1-Version, Dell G3-Computer.

So implementiert Uniapp die Aufnahmefunktion:

Sie müssen uni.getRecorderManager() verwenden. 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();
}
},
}
}
Nach dem Login kopieren

这一段是苹果手机静音时无法播放

uni.setInnerAudioOption({  
obeyMuteSwitch: false  
})
Nach dem Login kopieren

这里录音展示是使用了插件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>
Nach dem Login kopieren
Dieser Abschnitt kann nicht abgespielt werden, wenn das Apple-Telefon stummgeschaltet ist.

rrreeeDie Aufnahmeanzeige hier verwendet mit dem Plug-in luno-audio, empfohlen (kostenlos):

Uni-App-Entwicklungs-Tutorial

muss den Import von luchAudio aus '@/components/luch einführen -audio/luch-audio .vue‘, registrieren Sie sich (einfach in Komponenten registrieren) und verwenden Sie
rrreee

, um es hinzuzufügen und auszuführen.

Zugehörige kostenlose Lernempfehlungen:
Programmiervideos🎜🎜🎜

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Aufnahmefunktion in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage