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

最新推荐文章于 2025-03-07 09:24:04 发布

xfxTab

最新推荐文章于 2025-03-07 09:24:04 发布

阅读量8.5k

点赞数 4

分类专栏：笔记文章标签： javascript vue.js

本文链接：https://blog.csdn.net/m0_49578914/article/details/117825933

版权

笔记专栏收录该内容

57 篇文章

订阅专栏

本文介绍了如何使用uniapp创建音频实例，实现音频文件的加载、播放、暂停、进度更新以及错误处理。通过`uni.createInnerAudioContext`操作，开发者可以获取音频时长、计算播放进度，并处理播放结束和错误情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

组件地址：组件地址
代码：

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
   },