vue - 使用SVG实现圆形进度条音乐播放

  最近在使用vue做仿网易云音乐的项目，遇到了圆形进度条实现音乐播放的功能，所以我在这里总结一下，分享给大家我的实现方法。我这里主要是通过SVG的方式实现的。

效果图：

实现过程

一、实现步骤

1. 圆形进度条的实现
2. 音乐播放/暂停的控制

二、步骤分解

  这里先放一下 audio标签引入音频文件的代码：

<audio src="/static/audios/周兴哲 - 你，好不好？.mp3" @timeupdate="timeupdate" id="audio" @ended="ended"></audio>

/*
	timeupdate() 方法   实时获取 音频当前播放时长
	ended() 方法   播放结束的时候触发
*/

// 实时获取音频当前播放时长
    timeupdate(e) {
      // console.log("e===>", e.target.currentTime);
      this.current = e.target.currentTime;
      let duration = document.getElementsByTagName("audio")[0].duration;

      let percent = Math.min(1, this.current / duration);
      this.dashOffset = (1 - percent) * this.dashArray;
    },
    ended() {
      console.log("播放结束~~~");
      this.isStatus = false;
      // 初始化 圆形进度条的周长
      let circleWidth = document.getElementById("progressCircle").offsetWidth;
      this.dashArray = Math.PI * circleWidth;
      this.dashOffset = Math.PI * circleWidth;
    },

1. 圆形进度条的实现

  这里通过SVG画两个一模一样的圆，设置一定的宽度，然后第二个圆使用stroke-dasharray和stroke-dashoffset来动态控制进度变化情况。stroke-dashoffset的变化情况要结合音乐的时长来设置。

		<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" id="mySvg">
            <circle class="progress-background" cx="50%" cy="50%" r="50%" fill="transparent" />
            <circle
              class="progress-bar"
              cx="50%"
              cy="50%"