Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to achieve music / video playback progress bar components in vue". In daily operation, I believe many people have doubts about how to achieve music / video playback progress bar components in vue. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "how to achieve music / video playback progress bar components in vue". Next, please follow the editor to study!

Requirements Analysis:

①: the length of the progress bar is equal to the total length of the black progress bar as the song is played, and the time is updated in real time.

②: when you slide the button, the playback time is updated in real time, and the length of the orange progress bar changes as the button slides. When the slide ends, the orange area stays at the end of the slide, and the song starts playing from the current progress.

③: click on the progress bar, the length of the orange progress bar changes to the length from the click to the starting point, and the song is played from the current point.

General idea:

①: the time on the left can be obtained through the timeupdate event dispatched during audio playback, and the time on the right is the total time of the current song obtained by the API.

②: the length of the progress bar child component is calculated by passing a percent value to the parent component, which is the ratio of the playback progress to the total progress.

③: after the progress bar is scanned and clicked, you need to pass a duration value to the parent component, use this.$emit () to dispatch events like the parent component, and set the event response function in the parent component to receive the percent parameter value, which is used to change the music progress currently played in the audio.

Detailed implementation, the key code has been commented:

Add the component source code first:

/ / the width of the progress bar button. Since width is not set in style, you can only use clientWidth to get export default {data () {return {btnWidth: {type: Number, default: 0}, touchInfo: {initiated: false}, props: {percent: {type: Number, default: 0}} Mounted () {this.btnWidth = document.getElementsByClassName ('progress-btn') [0] .clientWidth} Methods: {/ / Click the button progressTouchStart (e) {/ / record the touch event has been initialized this.touchInfo.initiated = true / / Click location this.touchInfo.startX = e.touches [0] .pageX / / the length of the progress bar when clicked this.touchInfo.left = this.$refs.progress.clientWidth} / / start moving progressTouchMove (e) {if (! this.touchInfo.initiated) {return} / / calculate the moving distance const moveX = e.touches [0] .pageX-this.touchInfo.startX / / set the offset value const offsetWidth = Math.min (Math.max (0, this.touchInfo.left + moveX), this.$refs.progressBar.clientWidth-this.btnWidth) this._setOffset (offsetWidth)} / / Mobile end progressTouchEnd (e) {this.touchInfo.initiated = false / / dispatch an event to the parent component, passing the current percentage value this._triggerPercent ()} / / Progress bar click event progressClick (e) {console.log ('clikc') / / set progress bar and button offset this._setOffset (e.offsetX) / / notify parent component of playback progress change this._triggerPercent ()}, _ triggerPercent () {const barWidth = this.$refs.progressBar.clientWidth-this.btnWidth const percent = Math.min (1 This.$refs.progress.clientWidth / barWidth) this.$emit ('percentChange', percent)}, / / set offset _ setOffset (offsetWidth) {/ / set progress length with percentage change this.$refs.progress.style.width = `$ {offsetWidth} px` / / set button with percentage offset this.$refs.progressBtn.style.transform = `translate3d (${offsetWidth} px, 0,0) `}} Watch: {/ / Monitoring song playback percentage change percent (newPercent OldPercent) {if (newPercent > 0 & &! this.touchInfo.initiated) {/ / Total length of progress bar const barWidth = this.$refs.progressBar.clientWidth-this.btnWidth const offsetWidth = barWidth * newPercent / / set progress bar and button offset this._setOffset (offsetWidth)}} @ import "~ common/stylus/variable.styl" .progress-bar height 0.5rem. Bar-inner position relative top 0.2rem height 0.08rem background rgba (0 0,0,0.3) .progress position absolute height 100% background $color-theme .progress-btn-wrapper position absolute left-0.25rem top-0.25rem width 0.5rem height 0.5rem. Progress-btn position relative top 0.12rem left 0.12rem box-sizing border-box width 0.32rem height 0.32rem border 0.06rem solid $color-text border-radius 50% background $color-theme

This is the source code of the progerss-bar.vue component. The value passed in by the parent component only has a "percent", which is the ratio of the current playback time to the total time of the audio in the parent component, which is used to calculate the length of the orange progress bar in this component.

Use of components:

First import and register the component (not explained here), and then use this component, dom:

{{formatTime (currentTime)}} {{formatTime (currentSong.duration)}}

Explanation: two span are left and right time values, and progress-bar is the called component. You need to pass in the duration value, which is used to set the length of the progress bar for the sub-component.

The percent value comes from the ratio of the currenTime of audio to the total length of the song:

/ / calculate the percentage percent () {return Math.min (1, this.currentTime / this.currentSong.duration)}

@ roomChange is the event sent in the child component. For more information, please see the source code and note "_ triggerPercent ()" in the child component. The method called by this event is used to receive the drag button passed by the child component, click the progress bar to change the playback percentage of the song, change the currentTime of the audio tag in the parent component, and then set the song playback progress to the current time.

The following is the function called in the parent component after receiving an event sent by the child component.

/ / set setProgress (percent) {/ / set playback progress this.$refs.audio.currentTime = this.currentSong.duration * percent / / set song playback if (! this.playing) {this.togglePlaying ()}} according to the percentage passed by the subcomponent

Style (I use stylus):

.progress-wrapper display flex .time font-size 0.24rem & .time-l position absolute bottom 1.62rem left 1rem & .time-r position absolute bottom 1.62rem right 1rem .progress-bar-wrapper position absolute bottom 1.5rem left 1.7rem width 4.2rem so far The study on "how to implement the music / video playback progress bar component by vue" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.