# Making a round progress bar of music player

## Understanding of key points

### stroke-dasharray

Stroke dasharray is used to create dashes, indicating the length of the dashes and the spacing between each dashed line

``````stroke-dasharray = '10' //It means that the dotted line is 10 in length and 10 in spacing, and then repeat the dotted line 10 in length and 10 in spacing
stroke-dasharray = '10, 5' //It means that the dotted line is 10 in length and 5 in spacing, and then repeat the dotted line 10 in length and 5 in spacing
stroke-dasharray = '20, 10, 5' //It means the length of the dotted line is 20, the spacing is 10, the dotted line is 5, then the spacing is 20, the dotted line is 10, the spacing is 5, and then the cycle starts
Copy code``````

design sketch

### stroke-dashoffset

Stroke dasheffset is the offset relative to the starting point. The value is positive left offset and negative right offset

Figure interpretation

1. No dashes
2. Stroke dasharray = "3 1", the dotted line has no offset set, that is, the stroke dashoffset value is 0
3. Stroke dasheffset = "3", offset is positive. The dotted line moves 3 units to the left as a whole. In the figure, the red line segment after 3 is the starting line segment, and the interval after the line segment is 1 unit. We can see that the area starts from this interval, and then cycles the dotted interval dotted interval interval interval interval interval interval interval interval in 3-1, 3-1
4. Stroke dasheffset = - 3 ", the offset is negative, and the dotted line moves 3 units to the right as a whole. Because dasharray is circular, the previous offset position will be filled with dasharray
5. Stroke dasheffset = "1", offset positive number, the dotted line moves 1 unit to the left as a whole, and the final effect is the same as that of line 4

## Draw (Vue)

### CSS Style

``````<style lang="scss" scoped>
circle{
stroke-width: 8px;
transform-origin: center;
&.progress-background{
transform: scale(0.9);
stroke: rgba(255, 205, 49, 0.5);
}
&.progress-bar{
/* The purpose of turning 90 degrees is to adjust the starting point */
transform: scale(0.9) rotate(-90deg);
stroke: #ffcd32;
}
}
</style>
Copy code``````

### HTML structure

``````<template>
<div>
<svg width="100" height="100" @click="playMusic">
<circle r="50" cx="50" cy="50" fill="transparent" class="progress-background"></circle>
<circle r="50" cx="50" cy="50" fill="transparent" class="progress-bar" ref="progress-bar" :stroke-dasharray="dasharray" :stroke-dashoffset="dashoffset"></circle>
</svg>
<audio src="https://m8.music.126.net/20200602222810/2b7e73b3efe9e2750c0646bc1bac6b2d/ymusic/8972/6e6e/7b86/bddf788bf92e62d7c5c9aa457dd27bf5.mp3" @timeupdate="updateTime()" ref="audio"></audio>
</div>
</template>
Copy code``````

### JavaScript behavior

The timeupdate event is triggered when the playback position of audio changes.

``````<script>
export default {
data() {
return {
flag: true,
dasharray: Math.PI * 100,
dashoffset: Math.PI * 100
}
},
mounted() {
//Get DOM object audio
this.audio = this.\$refs.audio;
},
methods: {
//Music playing and pause
playMusic() {
if (this.flag) {
this.audio.play()
this.flag = false
}else {
this.audio.pause()
this.flag = true
}
},
updateTime(){
// Get the current playback time
this.currentTime = this.audio.currentTime
// Get the time of the whole song
this.duration = this.audio.duration
// Change offset
this.dashoffset = (1 - this.currentTime / this.duration) * this.dasharray
}
}
}
</script>
Copy code``````

## reference resources

Detailed explanation of stroke dasharray and stroke dashuffset in SVG learning

Tags: Vue Javascript

Posted on Thu, 04 Jun 2020 13:52:16 -0400 by Japet