Im Vue-Projekt kann die Verwendung eines Computerbrowsers zum Abspielen von Audiodateien im AMR-Format nicht direkt abgespielt werden. Sie müssen ein js-Paket verwenden: benz-amr-recorder
1. npm install benz-amr-recorder
2. Wenn Sie dies erreichen möchten Klicken Sie auf „Wiedergabe“, klicken Sie erneut auf den Pauseneffekt, und die Seite enthält möglicherweise mehrere Audiodateien:
3. Die Dom-Struktur ist wie folgt.
Mit isPlay wird ermittelt, ob gerade abgespielt wird. Die aktuell von mediaUrl abgespielte Audio-URL
verwendet Folgendes drei Parameter in Daten.
mediaUrl:'',
amr:null,
isPlay:false,
<!-- 音频 -->
<div v-if="item.showType == 'audio'" class="message audio_box" >
<div @click="playAudio(item.file.url)">
{
{item.file['file-name'] }}
<img class="audio-btn" src="images/audio-btn2.gif" alt="" v-if="isPlay && mediaUrl == item.file.url">
<img class="audio-btn" src="images/audio-btn.png" alt="" v-else>
</div>
</div>
// 音频播放
playAudio(url) {
this.mediaUrl = url
if(this.isPlay){
this.isPlay = false
if(this.amr.isPlaying()){
this.amr.stop();//停止
}
}else{
var BenzAMRRecorder = require('benz-amr-recorder');
this.amr = new BenzAMRRecorder();
this.isPlay = true
this.amr.initWithUrl(url).then(()=> {
this.amr.play();
});
this.amr.onEnded(()=> {
this.isPlay = false
})
}
},