最近在使用vue做仿网易云音乐的项目,遇到了圆形进度条实现音乐播放的功能,所以我在这里总结一下,分享给大家我的实现方法。我这里主要是通过SVG的方式实现的。
效果图:
实现过程
一、实现步骤
- 圆形进度条的实现
- 音乐播放/暂停的控制
二、步骤分解
这里先放一下 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%"