Vue使用音频播放器插件 vue-aplayer

安装 vue-aplayernpm install vue-aplayer --save引入、注册import aplayer from "vue-aplayer"; components: { aplayer },3.使用<aplayer :music="musics[0]" :lis

栈狮

4647人浏览 · 2021-01-17 14:00:45

栈狮 · 2021-01-17 14:00:45 发布

安装 vue-aplayer
npm install vue-aplayer --save

我们需要在main.js里面导入并引用

import vueAplayer from 'vue-aplayer'

Vue.use(vueAplayer)

引入、注册
在使用的vue文件里面引入他
import aplayer from "vue-aplayer"; components: { aplayer },

3.使用

<!--music：当前播放的音乐。 list：播放列表 ：showlrc：是否显示歌词-->
<aplayer :music="musics[0]" :list="musics"  :showlrc="true"></aplayer>

4。data数据

data() {
   return {
     detailForm: {
       clickType: "",
       title: "ajlgaljg",
     },
     // 音频列表
     musics: [
       {
         title: "歌曲名称",
         artist: "演唱者",
         url: "歌曲文件的URL",
         pic: "封面图片URL",
         lrc: "歌词或歌词文件的URL",
       },
       {
         title: "歌曲名称",
         artist: "演唱者",
         url: "歌曲文件的URL",
         pic: "封面图片URL",
         lrc: "歌词或歌词文件的URL",
       }
     ],
   };
 },

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^