今天碰到一个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静态项目，如果您没太明白，可以用作参考: