微信小程序innerAudio的duration获取

在做一个音频播放器的时候有这么个需求“显示音频时长”，有两种实现方法：

后端获取时长返回给前端
前端直接获取时长

这里记录第二种方式。

查文档发现，createInnerAudio实例下有个duration属性可以得到音频时长。

当前音频的长度（单位 s）。只有在当前有合法的 src 时返回（只读）

使用时发现一个问题：只有在onTimeUpdate中才能拿到时长，其它都是0，而且只有autoplay设置为true时才能正常监听到。

TIP

时隔一年，onTimeUpdate的触发可以在play后去获取一次paused来解决，发现这个方法的人，牛啊！

innerAudio.play();
setTimeout(() => {
  console.log(innerAudio.paused);
}, 100);

  innerAudio.onPlay(() => {
    console.log(innerAudio.duration) // 输出0
  })
  innerAudio.onCanplay(() => {
    console.log(innerAudio.duration) // 输出0
  })
  
  innerAudio.onTimeUpdate(() => {
    console.log(innerAudio.duration) // 有值
  })

我的需求是在用户播放之前就能看到音频时长

我的做法：在用户主动播放前，音频先自动播放一次获取时长

   getAudioDuration(src) {
    const innerAudio = wx.createInnerAudioContext();
    innerAudio.volume = 0; // 音量0
    innerAudio.autoplay = true;
    innerAudio.src = src;

    innerAudio.onTimeUpdate(() => {
      if (innerAudio.duration) {
        let duration = Math.ceil(innerAudio.duration), // 返回的是带小数的s，需取整
        minute = '00',
        second = '00'
        if (duration >= 60) {
          minute = Math.floor(duration / 60);
          minute = minute<10 ? '0'+ minute : minute;
        }
        second = duration % 60;
        second = second < 10 ? '0' + second : second;

        this.setData({
          audioTime: minute + ':' + second,
          duration
        });
        innerAudio.destroy(); // 销毁实例
      }
    })
  },

TIP

可以第一个用户第一次获取到时长就保存至数据库，其他用户就不用这样取了

微信小程序innerAudio的duration获取

预览: