vue3.0 音頻插件（vue-aplayer）

上篇文章咱們說了怎麼使用 視頻插件vue-vedio-player那麼咱們固然也有音頻插件了

咱們選擇使用vue-aplayer

• 一樣咱們先安裝這個插件

npm install vue-aplayer -s

• 咱們須要在main.js裏面導入並引用

import vueAplayer from 'vue-aplayer'
 
Vue.use(vueAplayer)複製代碼

• 那麼咱們怎麼使用了？
• 首先咱們須要在使用的vue文件裏面引入他

import aplayer from 'vue-aplayer'

export default {
    components: {
      aplayer
    }
}複製代碼

• 咱們的html部分

<template>
    <div style="width: 60%">
         <aplayer :music="videoUpload.music"></aplayer>
    </div>
</template>複製代碼

• js部分

<script>
    export default {
        data() {
            return {
                videoUpload: {
                    progress: false,
                    progressPercent: 0,
                    successPercent: 0,
                    music: {
                       title: '',
                       author: '',
                       url: '',
                       lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'
                   }
                },
            }
        }
    }
</script>複製代碼

• 最後咱們來看一下效果

​