vue中怎么使用SVG实现圆形进度条音乐播放

今天小编给大家分享一下vue中怎么使用SVG实现圆形进度条音乐播放的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

效果图：

实现过程

一、实现步骤

• 圆形进度条的实现

• 音乐播放/暂停的控制

二、步骤分解

这里先放一下 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的变化情况要结合音乐的时长来设置。

        computed: {            // 实时监听播放进度            getDashOffset() {              let percent = 0;              if (document.getElementsByTagName("audio")[0]) {                // 计算播放进度比例                let duration = document.getElementsByTagName("audio")[0].duration;                percent = Math.min(1, this.current / duration);                this.dashOffset = (1 - percent) * this.dashArray;              } else {                this.dashOffset = (1 - 0) * this.dashArray;              }            }          },          mounted() {            this.$nextTick(() => {              // 初始化圆角周长              let circleWidth = document.getElementById("progressCircle").offsetWidth;              this.dashArray = Math.PI * circleWidth;              this.dashOffset = Math.PI * circleWidth;            });          }

2. 音乐播放/暂停的控制

音乐的暂停和播放状态可以通过document.getElementById("audio").paused来判断，如果返回false则说明当前是播放状态，我们需要触发 document.getElementById("audio").pause()方法实现暂停操作，反之，触发document.getElementById("audio").play()方法实现播放操作。

// 操作音乐播放/暂停  let audio = document.getElementById("audio");  console.log("this.audio.paused===>", audio.paused);  if (audio.paused) {    audio.play();  } else {    audio.pause();  }

下面方法全部的代码，大家可直接复制到自己的编辑器中运行（记得修改音频路径）

以上就是"vue中怎么使用SVG实现圆形进度条音乐播放"这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注行业资讯频道。