vue-aplayer在手机移动端的时候默认没有总时长,点击播放才显示总时长问题

前言:

       在移动段使用vue-aplayer这款音频播放组件的时候,发现他默认的时候看不到总时长,只有点击播放才能看到,我的数据是从后台直接拿来的,观察官网没有这个问题,既然出现问题就得解决问题,这里分享下我的解决办法:

解决办法一:(尝试过但是不建议使用的):

1、后台数据需要传一个默认总时长过来:

props: {
    /**
     *  音频配置
     * */
    songInfo: {
      type: Object,
      default: () => {
        return {
          title: '', //歌曲名称
          artist: ' ', //演唱者
          lrc: '', //LRC 歌词或者歌词文件的 URL
          pic: '', //封面图片 URL
          src: '' //音频文件的 URL
        }
      }
    },
    defaultTolTime: {
      type: String,
      default: ''
    }
}

2、监听后台数据,在拿到总时长是将页面的dom元素内容更换

watch: {
    defaultTolTime(val) {
      // document.getElementsByClassName('aplayer-dtime')[0].innerText = val
    }
  },

解决办二:(我自己使用的)

1、因为他点击播放的时候是可以显示总时长的,所以我就给他默认加一个autoplay的属性,默认是true

<aplayer
      ref="aplayer"
      :autoplay="autoplay"
      :music="songInfo"
      :showLrc="showLrc"
      :mutex="mutex"
      :theme="theme"
      :shuffle="shuffle"
      :repeat="repeat"
      :listFolded="listFolded"
      :listMaxHeight="listMaxHeight"
      :list="list"
      :controls="controls"
      :muted="muted"
      :volume="volume"
      :preload="preload"
      @onPlaying="onPlaying"
    ></aplayer>

2、在第一个步骤以后时间已经能显示了,但是会出现我刚开始并不想让他进行播放,然后我再mounted这个阶段,然后调用他的停止播放事件

mounted() {
    //为了能显示总时长,这里开启了自动播放,并在页面初始化停止播放音频
    this.$refs.aplayer.pause()
  },

到此结束!

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

浩星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值