vue-aplayer中文文档:入门 | vue-aplayer
GitHub文档:https://github.com/SevenOutman/vue-aplayer/tree/master/docs

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

  2. 引入、注册

    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",
           }
         ],
       };
     },
    

  5. vue-aplayer 参数说明
    名称类型默认值说明
    musicObject必须当前播放的音乐。具体请查看下方的音乐信息。
    listArray[]播放列表。如果 list 不是空数组,播放列表就会显示出来,即使 list 中只有一首歌曲 并且它和 music 一样
    miniBooleanfalse迷你模式
    floatBooleanfalse浮动模式。可以在页面上随意拖放播放器
    showLrcBooleanfalse是否显示歌词
    mutexBooleanfalse是否在该播放器播放时暂停其他播放器
    themeBoolean‘#41b883’主题色。如果当前歌曲也设置 theme 则以歌曲的为准
    shuffleBooleanfalse随机播放
    repeatBoolean‘no-repeat’轮播模式。值可以是’repeat-one’(单曲循环)‘repeat-all’(循环列表)或者’no-repeat’(不循环)。
    listMaxHeightBooleannone播放列表面板最大高度
    listFoldedBooleanfalse默认收起播放列表
    narrowDEPRECATED,请使用mini
    listmaxheightDEPRECATED,请使用listMaxHeight
    showlrcDEPRECATED,请使用showLrc

 如果用的是Vue@2.3.0+,可以在 music shuffle 和 repeat 上使用.sync修饰符

音乐信息属性:

名称默认值说明
src必须音频文件的URL
title‘Untitled’歌曲名称
artist‘Untitled’演唱者
picnone封面图片URL
lrcnone歌词或者歌词文件的URL
themenone歌曲的主题色,会覆盖播放器的主题色
urlDEPRECATED,请使用src
authorDEPRECATED,请使用artist

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐