uni-app 音频播放及计算时间和播放进度

效果图如下:
在这里插入图片描述

组件地址:组件地址
代码:

onLoad(options) {
    var that = this
    //创建音频实例
    that.innerAudioContext = uni.createInnerAudioContext();
    //音频地址(模拟)
    that.innerAudioContext.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
//   ..音频可以播放 取音频时常并计算
  that.innerAudioContext.onCanplay(()=>{
    var time = that.innerAudioContext.duration.toFixed(0)
    var min = Math.floor(time/60)
    var second = time%60
     that.duration = (min>10?min:'0'+min)+':'+(second>10?second:'0'+second)
      console.log('可以播放了',that.duration)
  })
  //监听播放时间 及 计算播放进度
  that.innerAudioContext.onTimeUpdate (() =>{
  //播放时间
      var time = that.innerAudioContext.currentTime.toFixed(0)
      var min = Math.floor(time/60)
      var second = time%60
     that.time = (min>=10?min:'0'+min)+':'+(second>=10?second:'0'+second)
     //计算进度
     that.playJd = ((time/that.innerAudioContext.duration).toFixed(2))*100
      console.log('播放进度',that.innerAudioContext.currentTime,)
  })
    // 继续播放seek完成
  that.innerAudioContext.onSeeked(()=>{
      console.log('ed')
      that.innerAudioContext.play()
       that.videoPause = 2
  })
  //自然播放结束
  that.innerAudioContext.onEnded(()=>{
      that.videoPause = 3
  }),
  //音频错误
  that.innerAudioContext.onError((res) => {
    uni.showToast({
        title: res.errMsg,
        icon: 'none',
        mask: true
    })
    console.log(res.errMsg);
    console.log(res.errCode);
  });
},

方法集合:

//播放
playVideo () {
       console.log('跳转',this.seekTime)
        this.innerAudioContext.play()
        //动态显示播放暂停再次播放按钮
        this.videoPause = 2
   },
   //暂停(不是停止)
   stopVideo () {
    //    在停止播放之前记录播放进度
       this.seekTime = Number(this.innerAudioContext.currentTime.toFixed(0))
       this.innerAudioContext.pause()
       this.videoPause = 1
   },
   //再次播放
   alignPlay () {
    //   this.innerAudioContext.seek(0)
      this.innerAudioContext.play()
      this.videoPause = 2
   },
  • 4
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值