vue项目中,amr格式的音频播放

5 篇文章 0 订阅

在vue项目中,使用电脑浏览器播放amr格式的音频文件是直接播放不出来的,需要使用一个js包:benz-amr-recorder
1、npm install benz-amr-recorder
2、想要实现点击播放,再次点击暂停的效果,并且页面中可能存在多个音频文件:
在这里插入图片描述
3、dom结构如下
isPlay是判断当前是否是播放状态,mediaUrl当前播放的音频URL
在data中使用如下三个参数

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
        })
      }
    },
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 是一个用于构建用户界面的渐进式 JavaScript 框架,而 WebRTC 是一种用于实时通信的技术。在 Vue 实现播放 WebRTC,需要使用 WebRTC API 和一些 Vue 生态系统的库。 首先,需要使用 WebRTC API 创建一个实时通信的连接。可以使用 `RTCPeerConnection` 类创建一个连接对象,并通过 `getUserMedia` 方法获取本地音视频流。 在 Vue ,可以使用 Vue Router 来管理路由,创建一个用于展示视频的页面。在这个页面,可以通过 `navigator.mediaDevices.getUserMedia` 方法获取本地音视频流,并使用 `RTCPeerConnection` 实例创建一个连接对象。 接下来,可以使用 `addStream` 方法将本地音视频流添加到连接对象,并使用 `createOffer` 方法创建一个 Offer。通过 `setLocalDescription` 方法将 Offer 设置到本地,并将 Offer 发送给远程用户。 远程用户接收到 Offer 后,使用 `setRemoteDescription` 方法将 Offer 设置到远程,并通过 `createAnswer` 方法创建一个 Answer。将 Answer 设置到本地并发送给本地用户。 本地用户接收到 Answer 后,使用 `setRemoteDescription` 方法将 Answer 设置到本地,双方的连接建立完成后,可以通过 `onaddstream` 事件监听到远程用户的音视频流,并在 Vue 进行展示。 除了以上的基本操作,还可以使用一些 Vue 的相关库来简化开发流程。例如,可以使用 `vue-webrtc` 库来封装 WebRTC 的操作,简化连接的创建和管理,以及音视频流的展示。 总之,要在 Vue 播放 WebRTC,需要使用 WebRTC API 来创建连接和处理音视频流,同时可以使用 Vue 生态系统的相关库来简化开发流程。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值