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

最新推荐文章于 2026-05-24 13:45:56 发布

原创最新推荐文章于 2026-05-24 13:45:56 发布 · 4.7k 阅读

13 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

笔记

当前文章被收录于：

笔记

47 篇文章 0 人学习

订阅专栏查看详情

学习

当前文章被收录于：

学习

47 篇文章 0 人学习

订阅专栏查看详情

工具

当前文章被收录于：

工具

4 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了如何安装vue-aplayer并将其集成到Vue项目中。包括通过npm安装、在main.js中引入和注册组件，以及如何在.vue文件中使用该组件来播放音乐，并展示歌词。

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