VUE 音频MP3播放插件

安装

$ npm install vue-aplayer --save

文档：vue-aplayer

注册

//main.js

 import vueAplayer from 'vue-aplayer'
 Vue.use(vueAplayer)

引入组件

 <div style="width: 100%">
                    <aplayer v-if="showPlayer" ref="videoPlayRef" :music="videoPlay" :autoplay="true"
                    ></aplayer>
                </div>
import aplayer from 'vue-aplayer';
  export default {
    name: 'LogAuditManagement',
    props: {//父组件数据
      FleetId: Number,
      userId: Number,
      UserAccount: String,
    },
    components: {
      aplayer,
    },
    data() {
      return {
        label_position: 'right',
        dataforms: [],
        rowsforms: [],
        dialogRecent: false,
        showPlayer: false,
        videoPlay: {
          title: '音频',
          artist:'',
          src: '',
          pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg',
        },

播放调用

play(){
this.showPlayer = false;
          let ipUrl = this.$store.getters.stateBaseUrl1604 + '/' + row.filepath;
           // let ipUrl = "http://192.168.0.209:1604" + '/' + row.filepath;
          this.$nextTick(()=>{
            this.videoPlay.src = ipUrl;
            this.videoPlay.title = '录音记录音频';
            this.videoPlay.artist = ' ';
            this.showPlayer = true;
          })
}

效果