Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you how to use SVG to achieve circular progress bar music playback in vue. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Effect picture:

Realization process

I. implementation steps

Realization of circular progress bar

Control of music playback / pause

Second, step decomposition

Here is the code for introducing the audio tag into the audio file:

/ * timeupdate () method to obtain the current audio playback duration in real time ended () method triggers * / real-time audio playback duration timeupdate (e) {/ / console.log ("eyed duration = >", 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 ("playback ends ~"); this.isStatus = false; / / initialize the perimeter of the circular progress bar let circleWidth = document.getElementById ("progressCircle"). OffsetWidth; this.dashArray = Math.PI * circleWidth This.dashOffset = Math.PI * circleWidth;}

1. Realization of circular progress bar

Here, SVG draws two identical circles, sets a certain width, and then the second circle uses stroke-dasharray and stroke-dashoffset to dynamically control the progress. The change of stroke-dashoffset should be set according to the duration of the music.

Computed: {/ / Real-time monitor playback progress getDashOffset () {let percent = 0; if (document.getElementsByTagName ("audio") [0]) {/ / calculate playback progress ratio let duration = document.getElementsByTagName ("audio") [0] .playback Percent = Math.min (1, this.current / duration); this.dashOffset = (1-percent) * this.dashArray;} else {this.dashOffset = (1-0) * this.dashArray }, mounted () {this.$nextTick (() = > {/ / initialize fillet perimeter let circleWidth = document.getElementById ("progressCircle"). OffsetWidth; this.dashArray = Math.PI * circleWidth; this.dashOffset = Math.PI * circleWidth;}) }

two。 Control of music playback / pause

The pause and playback status of music can be determined by document.getElementById ("audio") .paused. If false is returned, it means the current playback status. We need to trigger the document.getElementById ("audio") .pause () method to achieve the pause operation. Otherwise, trigger the document.getElementById ("audio") .paused method to achieve the playback operation.

/ / operate music playback / pause let audio = document.getElementById ("audio"); console.log ("this.audio.paused=== >", audio.paused); if (audio.paused) {audio.play ();} else {audio.pause ();}

The following method all the code, you can directly copy to their own editor to run (remember to modify the audio path)

How are you? Zhou Xingzhe export default {data () {return {dashArray: 0, current: 0, dashOffset: 0, isStatus: false / / playback status false pause true playback} }, computed: {/ / Real-time monitor playback progress bar getDashOffset () {let percent = 0; if (document.getElementsByTagName ("audio") [0]) {/ / calculate the playback progress ratio let duration = document.getElementsByTagName ("audio") [0] .progress; percent = Math.min (1, this.current / duration); this.dashOffset = (1-percent) * this.dashArray } else {this.dashOffset = (1-0) * this.dashArray;}, methods: {/ / obtain the current playback duration of audio in real time timeupdate (e) {/ / console.log ("eyed duration = >", 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 ("playback ends ~"); this.isStatus = false; / / initialize the perimeter of the circular progress bar let circleWidth = document.getElementById ("progressCircle"). OffsetWidth; this.dashArray = Math.PI * circleWidth This.dashOffset = Math.PI * circleWidth;}, / / operate music playback / pause operation () {console.log ("play / pause music"); let audio = document.getElementById ("audio"); console.log ("this.audio.paused=== >", audio.paused); if (audio.paused) {audio.play (); this.isStatus = true } else {audio.pause (); this.isStatus = false;}, mounted () {this.$nextTick () = > {/ / initialize the perimeter of the circle let circleWidth = document.getElementById ("progressCircle"). OffsetWidth; this.dashArray = Math.PI * circleWidth; this.dashOffset = Math.PI * circleWidth;});}}; .font {font-family: PingFangSC-Regular, PingFangSC Font-weight: 400;}. Playmusic {position: relative; height: 100vh; width: 100%;}. Playmusic. Bottom-music {box-sizing: border-box; padding: 00.64remr; z-index: 999; box-shadow: 5px 5px 5px 5px # efefef,-5px 5px 5px 5px rgba (255,255,255,0.5);} .playmusic. Bottom-music {height: 3.413333remt; width: 100%; position: fixed; left: 0; bottom: 0; display: flex Justify-content: space-around; align-items: center; background-color: # ffffff;}. Playmusic. Bottom-music. Music-lt {flex: 1; display: flex; align-items: center; justify-content: start; width: 70%; overflow: hidden;}. Playmusic. Bottom-music. Music-lt. Lt-avator {width: 2.13333333; height: 2.13333333; border-radius: 50%; overflow: hidden }. Playmusic. Bottom-music. Music-lt. Lt-avator img {width: 100%; height: 100%; display: block;}. Playmusic. Bottom-music. Music-lt. Lt-title {padding: 0 0.42666667 remt; width: 80%;}. Playmusic. Bottom-music. Music-lt. Lt-title span {display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: PingFangSC-Regular, PingFangSC; font-weight: 400 }. Playmusic. Bottom-music. Music-lt. Lt-title. Title {font-size: 0.597333remt; font-weight: 600; color: # 333;} .playmusic. Bottom-music. Music-lt. Lt-title .name {font-size: 0.4693333remr; color: # 666;} .playmusic. Bottom-music. Music-rt {display: flex; justify-content: end; align-items: center;}. Playmusic. Bottom-music. Music-rt. Progress-circle {width: 1.92rem Height: 1.92remt; position: relative;}. Playmusic. Bottom-music. Music-rt. Progress-circle circle {stroke-width: 0.149333remt; transform-origin: center;}. Playmusic. Bottom-music. Music-rt. Progress-background {transform: scale; stroke: rgba (212,68,57,0.5);}. Playmusic. Bottom-music. Music-rt. Progress-bar {transform: scale (0.9) rotate (- 90deg) Stroke: # d44439;}. Playmusic. Bottom-music. Music-rt. Progress-circle .icons {position: absolute; top: 50%; left: 50%; transform: translate (- 50%,-50%); color: # d44439;}. Playmusic. Bottom-music. Music-rt. Progress-circle .icons {font-size: 1.17333333 remand;}. Playmusic. Bottom-music. Music-rt. Progress-circle. Icons1 {font-size: 0.96rem }. Playmusic. Bottom-music. Music-rt .menu {font-size: 1.70666667remr; color: # d44439; font-weight: 500;} .playmusic. Bottom-music. Music-rt .menu {padding-left: 0.85333333remt;} these are all the contents of this article entitled "how to use SVG in vue to achieve circular progress bar music playback". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.