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

到此结束！

标签：vue,URL,总时长,音频,默认,aplayer,播放
来源： https://blog.csdn.net/qq_41619796/article/details/111624461