今天碰到一个Vue点击mp3播放及进度条动态走动的小功能，记录一下：
首先是通过HTML5 audio标签引入音频：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <template>
<div class="x-footer">
<div class="x-meida">
<div class="x-meida-img">
<img :src="footer.imgUrl" />
</div>
<div class="x-media-name">
<h3>{{footer.title}}</h3>
<h5>{{footer.subTitle}}</h5>
</div>
</div>
<div class="x-media-btn" @click="changeStart">
<audio :src="footer.songs" id="musicMp3" autoplay="" controls=""></audio>
<img :src="isStore ? footer.startIcon : footer.stopIcon" />
</div>
<div class="x-media-menu">
<img src="../assets/img/svg/menu.svg" />
</div>
<div class="x-mp3-progress">
<div class="x-now-progress" :style="{width: progress}"></div>
</div>
</div>
</template>
|
在data中静态定义我们需要的数据及定义调用点击方法，并获取当前mp3的时间长短，通过定时器转换成百分比实现进度条的播放走动：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| export default {
props: ['link'],
data () {
return {
isStore: true,
progress: '0%',
footer: {
title: '一条狗的使命',
subTitle: '俗事杂谈论坛直播',
startIcon: './static/img/start.svg',
stopIcon: './static/img/stop.svg',
imgUrl: './static/img/header1.jpg',
songs: './static/music/aixiangsui.mp3'
}
}
},
mounted: function () {
document.getElementById('musicMp3').pause()
this.changeProgress()
},
methods: {
changeStart: function () {
this.isStore = !this.isStore
const musicMp3 = document.getElementById('musicMp3')
if (!this.isStore) {
musicMp3.play()
} else {
musicMp3.pause()
}
},
changeProgress: function () {
const musicMp3 = document.getElementById('musicMp3')
const timer = setInterval(() => {
const numbers = musicMp3.currentTime / musicMp3.duration
let perNumber = (numbers * 100).toFixed(2)
if (perNumber >= 100) {
this.isStore = true
this.progress = 0
clearInterval(timer)
}
perNumber += '%'
this.progress = perNumber
}, 30)
}
}
}
|
给添加的结构定义样式（css调用有一些是定义的全局变量，需要注意）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
| .x-footer{
position: fixed;
background-color: $primary;
width: 100%;
display: flex;
justify-content: space-between;
bottom: 0;
left: 0;
padding: 20px;
.x-meida{
display: inline-flex;
.x-meida-img{
width: 88px;
height: 88px;
overflow: hidden;
@include border-radius(5px);
> img{
width:100%;
}
}
.x-media-name{
padding: 10px 20px;
color: #ffffff;
text-align: left;
}
}
.x-media-btn{
width: 56px;
height: 56px;
@include border-radius(50%);
border: 3px solid #ffffff;
padding: 10px;
align-self: center;
audio{
display: none;
}
> img{
width: 100%;
}
}
.x-media-menu{
display: inline-flex;
width: 43px;
height: 43px;
align-self: center;
> img{
width: 100%;
}
}
}
.x-mp3-progress{
width: 100%;
position: absolute;
height: 6px;
overflow: hidden;
bottom: 0;
left: 0;
.x-now-progress{
position: relative;
@extend %transition;
height: 6px;
background-color: $orange;
}
}
|
这样媒体mp3播放就完成。
---- 感谢观看 :thank you: ----