美文网首页
vue.js实现audio播放amr格式音频

vue.js实现audio播放amr格式音频

作者: 不忘初心_6b23 | 来源:发表于2021-02-04 16:43 被阅读0次

    纯前端解码、播放、录音、编码 AMR 音频,无须服务器支持,基于 [amr.js]
    注意:由于使用了 amr.js 做编码和解码,因此 js 文件(压缩后,未 gzip)接近 500 KB,使用前请考虑。

    安装

    npm i benz-amr-recorder --save
    

    使用时引用

    import BenzAMRRecorder from 'benz-amr-recorder'
    

    html部分

    <div class="dialogue-item" v-if="diagItem.msgtype === 'voice'" @click="openRecording(diagItem.url, index)"
                   style="cursor: pointer">
        <div class="voice">
            <img src="@/assets/img/voice.gif" alt="" v-if="voiceActive===index">
            <img src="@/assets/img/voice.png" alt="" v-else>
            <span>{{diagItem.voice.play_length}}''</span>
        </div>
    </div>
    

    初始化对象

    data() {
      return {
        playRec: null, //播放对象
        voiceActive: null
      }
    }
    /******播放语音******/
    methods: {
      //播放语音
      openRecording(_url, index) {
        let url = _url.split('.com')[1]
        let vm = this
        if (vm.playRec !== null) {
          vm.stopPlayVoice()
        }
        vm.playRec = new BenzAMRRecorder()
        //⚠️注意跨域问题
        vm.playRec.initWithUrl('/record' + url).then(function() {
          vm.voiceActive = index
          vm.playRec.play()
          vm.playRec.onEnded(function() {
            vm.voiceActive = null
          })
        }).catch((e) => {
          console.log(e)
          vm.$message.error('播放录音失败')
        })
      },
      //停止播放
      stopPlayVoice() {
        if (this.playRec.isPlaying()) {
          this.playRec.stop()
        }
      },
    }
    

    相关文章

      网友评论

          本文标题:vue.js实现audio播放amr格式音频

          本文链接:https://www.haomeiwen.com/subject/fvvbtltx.html