html

audio标签

  <audio
    :src="currentSong.url"
    ref="audio"
    @canplay="ready"
    @error="error"
    @timeupdate="updateTime"
  ></audio>

属性：

• src：歌曲的url
• canplay: audio在拉取歌曲到可以播放的时候会触发canplay事件，在这之前歌曲是不能播放的。一般绑定的ready函数用来使播放按钮不可点击
• error：audio拉去歌曲失败会触发error事件
• timeupdate：歌曲在播放的时候触发这个事件e，通过e.target.currentTime属性可以获得当前播放的时间，也可以修改该属性控制播放的位置

js调用属性

• audio元素的currentTime是一个可读写的属性, 通过它设置或者获取当前歌曲的时间

this.$refs.audio.currentTime = this.songDuration * percent
currentTime = this.$refs.audio.currentTime

svg

https://www.runoob.com/svg/svg-circle.html

stroke-dasharray/stroke-dashoffset

https://blog.csdn.net/sillies_3/article/details/90607648