Vue song progress bar sample code
|
Note that this is not a project created by vue-cli. It is an HTML file written by referencing vue.js. You can use it by simply pasting it into an HTML file. My music link will become invalid after a period of time. You need to prepare the music yourself. There are functions for dragging and clicking to switch the playback progress. demo pictures
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<audio ref="audioRef" autoplay @canplay='canplay' @timeupdate='update'></audio>
<button @click="play">Play</button>
<button @click="pause">Pause</button>
<div class="progress-wrapper">
<span class="time time-l">{{formatTime(currentTime)}}</span>
<div class="progress-bar-wrapper">
<cpn :progress=progress
@progress-changing="onProgressChanging"
@progress-changed='progressChanged'>
</cpn>
</div>
<span class="time time-l">{{formatTime(duration)}}</span>
</div>
</div>
<!-- Child Component -->
<template id="myCpn">
<div class="progress-bar">
<!-- Black strip at the back-->
<div class="bar-inner" @click="clickProgress">
<!-- Areas that have been played-->
<div class="progress" :style='progressStyle' ref="progress">
</div>
<!-- btn -->
<div class="progress-btn-wrapper" :style='btnStyle' @touchstart.preventDefault='onTouchStart'
@touchmove.preventDefault='onTouchMove' @touchend.preventDefault='onTouchEnd' >
<div class="progress-btn"></div>
</div>
</div>
</div>
</template>
<script src="../../js/vue.js"></script>
<script>
audioEl = null
const progressBtnWidth = 16
// Subcomponent const cpn = {
template: "#myCpn",
props: {
progress:
type: Number,
default: 0
}
},
data() {
return {
offset: 0
}
},
mounted() {
},
created() {
this.touch = {}
},
computed: {
progressStyle() {
return `width: ${this.offset}px`
},
btnStyle() {
// console.log('fds');
return `transform: translate3d(${this.offset}px,0,0)`
},
},
watch:
progress(newProgress) {
// Progress bar width const barWidth = this.$el.clientWidth - progressBtnWidth
this.offset = barWidth * newProgress
}
},
methods: {
onTouchStart(e) {
// console.log(e);
this.touch.x1 = e.changedTouches[0].clientX
// Yellow progress bar initial width this.touch.beginWidth = this.$refs.progress.clientWidth
console.log(this.touch);
},
onTouchMove(e) {
// console.log(e);
// x offset const delta = e.changedTouches[0].clientX - this.touch.x1
// Previous width + the offset added by dragging this time = the expected length of the yellow bar const tempWidth = this.touch.beginWidth + delta
// Get barWidth again
const barWidth = this.$el.clientWidth - progressBtnWidth
// Yellow bar length/barwidth = progress The current progress should be const progress = tempWidth / barWidth
this.offset = barWidth * progress
this.$emit('progress-changing', progress)
// console.log("tempWidth", tempWidth);
// console.log("barWidth", barWidth);
// console.log("progress", progress);
},
onTouchEnd(e) {
// console.log(e);
const barWidth = this.$el.clientWidth - progressBtnWidth
const progress = this.$refs.progress.clientWidth / barWidth
this.$emit('progress-changed', progress)
},
// Click the progress bar clickProgress(e){
// console.log("fds");
console.log('getBoundingClientRect', this.$el.getBoundingClientRect());
const rect = this.$el.getBoundingClientRect()
// The width of the yellow bar const offsetWidth = e.pageX - rect.x
const barWidth = this.$el.clientWidth - progressBtnWidth
const progress = offsetWidth / barWidth
this.$emit('progress-changed', progress)
console.log(offsetWidth)
}
},
}
const app = new Vue({
el: "#app",
data: {
content: 'fdasdf',
src: 'https://music.163.com/song/media/outer/url?id=1463165983.mp3',
currentTime: 0,
duration: 0,
isplay: false,
progressChanging : false
},
components:
cpn
},
mounted() {
this.$nextTick(() => {
audioEl = this.$refs.audioRef
audioEl.src = this.src
// Pause by default audioEl.pause()
})
},
computed: {
progress() {
return this.currentTime / this.duration
console.log("progress", this.currentTime / this.duration);
},
},
methods: {
play() {
audioEl.play()
this.isplay = true
},
pause() {
audioEl.pause()
this.isplay = false
// console.log();
},
canplay(e) {
// console.log(123456);
console.log(e);
this.duration = e.target.duration
},
update(e) {
if(!this.progressChanging){
this.currentTime = e.target.currentTime
}
},
onProgressChanging(e) {
// console.log("onProgressChanging", e);
this.progressChanging = true
// Modify the currentTime value in real time this.currentTime = this.duration * e
},
progressChanged(e){
// console.log(e);
this.progressChanging = false
audioEl.currentTime = this.currentTime = this.duration * e
if(!this.isplay){
console.log("------");
audioEl.play()
}
},
formatTime(interval) {
// interval rounded down interval = interval | 0
// If there are less than two digits, fill it with a 0
let minute = ((interval / 60 | 0) + '')
let second = ((interval % 60 | 0) + '')
let len = minute.length
for (; len < 2; len++) {
minute = '0' + minute
}
len = second.length
for (; len < 2; len++) {
second = '0' + second
}
return `${minute}:${second}`
},
},
})
</script>
</body>
<style>
#app {
width: 100%;
}
.progress-wrapper {
display: flex;
width: 80%;
padding: 10px 0;
align-items: center;
margin: 0 auto;
}
.time {
width: 40px;
flex: 0 0 40px;
font-size: 8px;
margin: 0 auto;
padding: 0 8px;
}
.time-l {
text-align: left;
}
.time-l {
text-align: right;
}
.progress-bar-wrapper {
flex: 1;
}
/* Subcomponent style */
.progress-bar {
height: 30px;
}
.bar-inner {
position: relative;
top: 11px;
height: 8px;
background-color: rgba(87, 82, 82, 0.062);
border-radius: 5px;
}
.progress {
position: absolute;
height: 100%;
background-color: rgb(238, 238, 136);
}
.progress-btn-wrapper {
position: absolute;
left: -8px;
top: -11px;
width: 30px;
height: 30px;
}
.progress-btn {
position: relative;
top: 7px;
left: 7px;
box-sizing: border-box;
width: 16px;
height: 16px;
border: 3px solid rgb(189, 189, 218);
border-radius: 50%;
background: rgb(123, 192, 212);
}
</style>
</html>Commentary https://developer.mozilla.org/zh-CN/docs/Web/API/TouchEvent The progress bar in the middle is a progress bar component. The black background is the total length of the progress. The yellow bar on the left is the current playback progress. The slider in the middle can be dragged left and right to manually change the progress bar. During playback, the progress bar will become longer and the slider will shift to the right. You can drag the slider left and right to change the playback progress and the time on the left will change. To achieve the playback process, the progress bar will also play. What determines the status of the component? It can be determined by the progress. Any state of the component can be determined based on the progress. The parent component passes a digital type of progress The position of the btn and the width of the progress yellow bar are calculated based on the progress. The width can be represented by a data offset (define a data). Then, we need to monitor the progress. https://cn.vuejs.org/v2/api/#vm-el Knowledge to get the root DOM element
watch:
progress(newProgress) {
// Progress bar width const barWidth = this.$el.clientWidth - progressBtnWidth
//Offset this.offset = barWidth * newProgress
}
}
Of course, you can use computed, but you should note that you cannot get the width of el at the beginning. Computed calculates once at the beginning, accesses offset when the template is rendered, and then calculates the width of el. At this time, the component has not been mounted and cannot be obtained. If you use watch, it has actually been rendered when progress changes, so clientWidth can be obtained. In addition, because some logic needs to be processed later, it is more inclined to logic writing, so watch should be used to implement it. After we have the offset, we need to map the DOM and set a dynamic style for the yellow progress bar and btn.
Both of their styles are calculated based on offset.
computed: {
progressStyle(){
return `width: ${this.offset}px`
},
btnStyle() {
return `transform: translate3d(${this.offset}px,0,0)`
}
},
Now let's calculate its style based on the offset. We accept the progress attribute. When the external progress changes, its offset is calculated based on the progress. With the offset, the style can change. Question: flex 0 0 40px and width have similar effects, but in some cases, the flex layout will be squeezed or collapsed, resulting in the width being squeezed, so setting width can ensure that our width does not change Here is the canplay event monitor
Parent component calculates the property playback progress: playback time/total time. The total time has been obtained. The playback time can be monitored with an event: timeupdate
Current effect It can be seen that this is seconds, and the time needs to be formatted. Define a tool function IIFE: Self-executing function currying and some bitwise operations https://www.jianshu.com/p/a3202bc3f7a4
A question: Why is xxx.yyy|0 equal to xxx? Why can the or operator here have the function of rounding? Knowledge Padstart Method formatTime Function
formatTime(interval) {
// interval rounded down interval = interval | 0
// If there are less than two digits, fill it with a 0
const minute = ((interval / 60 | 0) + '').padstart(2, '0')
const second = ((interval % 60 | 0) + '').padstart(2, '0')
return `${minute}:${second}`
}
But it can't recognize the padstart method. So I just wrote it myself
formatTime(interval) {
// interval rounded down interval = interval | 0
// If there are less than two digits, fill it with a 0
let minute = ((interval / 60 | 0) + '')
let second = ((interval % 60 | 0) + '')
let len = minute.length
for(;len<2;len++){
minute='0'+minute
}
len = second.length
for(;len<2;len++){
second='0'+second
}
return `${minute}:${second}`
}
Next, write the interactive logic of the progress bar Support drag and click The most common ones on mobile devices are ontouchstart ontouchmove ontouchend Knowledge prevent modifier Add three events to the slider
methods: {
onTouchStart(e) {
console.log(e);
},
onTouchMove(e) {
console.log(e);
},
onTouchEnd(e) {
console.log(e);
}
},
Two pieces of information need to be obtained. One is to know the location where it was clicked, that is, to know what its horizontal coordinate is. And the width of the progress bar on the left (offset) [screenX clientX pageX concept Because the position of the horizontal axis also needs to be obtained during touchmove, the data can be bound to a shared object. An object can be defined in the created hook function.
created() {
this.touch = {}
},
After giving the yellow bar a ref
onTouchStart(e) {
// console.log(e);
this.touch.x1=e.changedTouches[0].clientX
// Yellow progress bar initial width this.touch.beginWidth = this.$refs.progress.clientWidth
console.log(this.touch);
},
onTouchStart(e) {
// console.log(e);
this.touch.x1=e.changedTouches[0].clientX
// Yellow progress bar initial width this.touch.beginWidth = this.$refs.progress.clientWidth
console.log(this.touch);
},
onTouchMove(e) {
// console.log(e);
// x offset const delta = e.changedTouches[0].clientX-this.touch.x1
// Previous width + the offset added by dragging this time = the expected length of the yellow bar const tempWidth = this.touch.beginWidth + delta
// Get barWidth again
const barWidth = this.$el.clientWidth - progressBtnWidth
// Yellow bar length/barwidth = progress The current progress const progress = tempWidth/barWidth
this.offset = barWidth * progress
// console.log("tempWidth", tempWidth);
// console.log("barWidth", barWidth);
// console.log("progress", progress);
},
Let's sort it out. The ultimate goal is to get the offset. The offset is determined by progress and barWidth. How to calculate progress here? You need to get the current width of the yellow bar divided by the total width. The width of the yellow bar is the initial width + the x distance of this slide. Then it is simple to get barWidth, and then you can calculate it. Do you think this is redundant? Can't we just use the original yellow bar width + the length of this slide? Why do we need to calculate progress? Because we need to let the outside world know that the progress of the song has changed, and we need to make them correspond. Ultimately, we need to modify the audio. This is done with the parent component. Now we only implement dragging, so we need to dispatch events. Here we dispatch two custom events, one progress-changing event, which means that the finger is still in the process of dragging and has not left. When the finger leaves, a progress-change event is dispatched to pass the new progress. Modify the value of currentTime in real time
This is to modify the currentTIme when dragging, and the time to modify the music is when the hand is released.
However, we found that it can be dragged when it is paused, but there is a problem when dragging during playback. Optimization: When changing, if the effect is paused, let it play. At this time, you need to define an isplay that flips when clicking play pause.
Now let's fix the bug. When playing, dragging the progress will cause problems. Why? By monitoring progressChanging, we modify the currentTime. Once the currentTime changes, progress will make a new calculation based on the currentTime and then pass it to the child component. The child component will enter this logic.
The offset will be recalculated. Finally, this will cover
Some control should be done during the update, and a flag should be added during the changing process.
That is to say, in the update function, if changing is in the process of dragging, do not modify currentTime. In the process of changing, it is considered that the progress bar is changed, and the priority of modifying the progress bar is high. The priority of currentTime change caused by its own playback is relatively low. That's it. In addition to dragging, we also want to click it to jump to the corresponding position. Knowledge webapi --getBoundingClientRect method returns the size of the element and its position relative to the viewport (get the shorter one).
Use pagex to get the long one
clickProgress(e){
// console.log("fds");
console.log('getBoundingClientRect', this.$el.getBoundingClientRect());
const rect = this.$el.getBoundingClientRect()
// The width of the yellow bar const offsetWidth = e.pageX - rect.x
const barWidth = this.$el.clientWidth - progressBtnWidth
const progress = offsetWidth / barWidth
this.$emit('progress-changed', progress)
console.log(offsetWidth)
}
This is the end of this article about vue song progress bar demo. For more relevant vue song progress bar content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
>>: HTML Tutorial: Unordered List
Recommend
Practice of realizing Echarts chart width and height adaptation in Vue
Table of contents 1. Install and import 2. Define...
Teach you the detailed process of installing DOClever with Docker Compose
Table of contents 1. What is Docker Compose and h...
MySQL scheduled database backup operation example
This article describes the example of MySQL sched...
Analyze the difference between ES5 and ES6 apply
Table of contents Overview Function signature Opt...
Pure CSS to achieve the text description of semi-transparent effect when the mouse is placed on it (must read for novices)
The effect is as follows: Example 1 Example 2: Ta...
What are the usages of limit in MySQL (recommended)
SELECT * FROM table name limit m,n; SELECT * FROM...
An article teaches you how to implement a recipe system with React
Table of contents 1. Recipe Collection 1.1 Projec...
How to turn local variables into global variables in JavaScript
First we need to know the self-calling of the fun...
After Apache is installed, the service cannot be started (error code 1 appears when starting the service)
Table of contents 1. Error message 2. Cause of er...
Solution to MySQL Installer is running in Community mode
Today I found this prompt when I was running and ...
How to solve the slow speed of MySQL Like fuzzy query
Question: Although the index has been created, wh...
Solve the problem of using swiper plug-in in vue
Since I used this plugin when writing a demo and ...
VUE implements a Flappy Bird game sample code
Flappy Bird is a very simple little game that eve...
Click the button to turn the text into an input box, click Save to turn it into text implementation code
Click the button to turn the text into an input b...
How to make a div height adaptive to the browser height
This old question has troubled countless front-end...