In the last article we talked about how to use the video plugin Vue-vedio-player so of course we have the audio plugin as well

We chose vue-aPlayer

  • Again, let’s install the plugin first

npm install vue-aplayer -s

  • We need to import and reference it in main.js
import vueAplayer from 'vue-aplayer'
 
Vue.use(vueAplayer)Copy the code

  • So how do we use it?
  • First we need to import it in the vue file we use
import aplayer from 'vue-aplayer'

export default {
    components: {
      aplayer
    }
}Copy the code

  • Our HTML section
<template>
    <div style="width: 60%">
         <aplayer :music="videoUpload.music"></aplayer>
    </div>
</template>Copy the code

  • Js part
<script>
    export default {
        data() {
            return {
                videoUpload: {
                    progress: false,
                    progressPercent: 0,
                    successPercent: 0,
                    music: {
                       title: ' ',
                       author: ' ',
                       url: ' ',
                       lrc: '[00:00. 00] LRC England here \ n [00:01onsaturday (UK time). 00] aplayer'
                   }
                },
            }
        }
    }
</script>Copy the code

  • And finally, let’s look at the effect

​