Im Vue-Projekt Audiowiedergabe im AMR-Format

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:
Fügen Sie hier eine Bildbeschreibung ein
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
        })
      }
    },

Acho que você gosta

Origin blog.csdn.net/a_grain_of_wheat/article/details/126407648
Recomendado
Clasificación