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