vue录音播放插件a-player使用

  作者:chrispy

<div v-show="recordHasData" id="player-box-id"> <aPlayer :music="soundList" :showlrc="false" :narrow="false" theme="#b7daff" mode="order" v-if="fl

<div v-show="recordHasData" id="player-box-id">

                   <aPlayer :music="soundList" :showlrc="false" :narrow="false" theme="#b7daff" mode="order" v-if="flag" listmaxheight='96px' ref="player"></aPlayer>

               </div>

import aPlayer from 'vue-aplayer'

data里配置

soundList:{

                   title: '',

                   author: '',

                   url: '录音文件地址',

                   // pic: 'http://devtest.qiniudn.com/Preparation.jpg',

                   pic: '@/assets/img/player-bg.png',

                   lrc: '[00:00.00]lrc here
[00:01.00]aplayer',

               },

components:{

          aPlayer

       },

methods里

//点击查看录音详情

           viewSoundRecordDetail(index,row){

               this.detailDialogVisible=true

               let recordText=JSON.parse(row.recordText)

               this.recordListText=recordText

               let recordUrl=row.recordUrl

               recordUrl=recordUrl.replace('http://account-staging.zichan360.com/','http://account.zichan360.com/')

               this.soundList.url=recordUrl

               //异步加载,先加载出player再使用

               this.flag = true

               if(this.$refs.player){

                   let aplayer = this.$refs.player.control

                   if(aplayer){

                       aplayer.play()

                   }

               }

           },


有用  |  无用

猜你喜欢