今天碰到一个Vue点击mp3播放及进度条动态走动的小功能，记录一下：

首先是通过HTML5 audio标签引入音频：

在data中静态定义我们需要的数据及定义调用点击方法，并获取当前mp3的时间长短，通过定时器转换成百分比实现进度条的播放走动：

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调用有一些是定义的全局变量，需要注意)：

.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;

> h3{

}

}

}

.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播放就完成。下面是媒体播放的vue静态项目，如果您没太明白，可以用作参考: https://github.com/mralins/xinfeeFM