一.安装依赖

yarn add vue-aplayer

​ or`

npm i vue-aplayer

二.使用

<template>
<div class="vue_aplayer">
<aplayer autoplay
:music="{
title: '歌曲标题',
artist: '歌手名',
src: '歌曲url',
pic: '歌曲播放器封面url'
}"
/>
</div>
</template> <script>
import aplayer from 'vue-aplayer'
export default {
name: "VueAplayer",
components: {
aplayer
}
}
</script>
<style scoped> </style>

三.官方文档

点我官方文档

点我中文官方文档

Vue中音乐播放器的更多相关文章

  1. vue实现音乐播放器实战笔记

    原文链接:https://blog.csdn.net/Forever201295/article/details/80266600 一.项目说明该播放器的是基于学习vue的实战练习,不用于其他途径.应 ...

  2. Vue实现音乐播放器(七):轮播图组件(二)

    轮播图组件 <template> <div class="slider" ref="slider"> <div class=&qu ...

  3. Vue实现音乐播放器(四):页面入口+header组件的编写

    首先下载三个包 babel-runtime对es语法进行转义 fastclick解决移动端点击300毫秒延迟的问题 babel-polyfill对es6 api进行转义 下载了包之后要在main.js ...

  4. Vue实现音乐播放器(六):jsonp的应用+抓取轮播图数据

    用jsonp来获取数据   通过封装方法来获取 在src文件夹下的api文件夹里面去封装一些获取相关部分组件的数据的方法 在api文件夹下的recommend.js中 配置一下公共参数 请求的真实的u ...

  5. Vue实现音乐播放器(二)-Vue-cli脚手架安装

  6. 02 Vue介绍与安装,指令系统 v-*、音乐播放器

    VUE文档 https://cn.vuejs.org/v2/guide/ 1.vue的介绍 尤雨溪 1.vue的优点 2.vue的介绍 3.vue的安装 4.声明式渲染 <body> &l ...

  7. vue——一个页面实现音乐播放器

    请忽略下面这段文字年关将至,时间好歹又多出了些许.却不敢过度消遣.岁月未曾饶过我,我亦不想饶过岁月.且将它塞得膨胀,让这一年看似加更充实.不曾料想我一个爱些风花雪月.研墨行歌之人,却做起了碼农这一行当 ...

  8. 如何用vue打造一个移动端音乐播放器

    写在前面 没错,这就是慕课网上的那个vue音乐播放器,后台是某音乐播放器的线上接口扒取,虽然这类项目写的人很多,但不得不说这还是个少有的适合vue提升的好项目,做这个项目除了想写一个比较大并且功能复杂 ...

  9. 【大结局】《从案例中学习JavaScript》之酷炫音乐播放器(四)

    这是之前写的用H5制作的音乐播放器,前三节其实已经做得差不多了,音轨的制作原理已经在上一节说明,不过一直还没有和音乐对接. 本章作为该系列的一个完结篇,我会专门把动态音轨的实现代码贴出来,demo地址 ...

随机推荐

  1. HashMap和ConcurrentHashMap的区别,HashMap的底层源码

    HashMap本质是数组加链表,根据key取得hash值,然后计算出数组下标,如果多个key对应到同一个下标,就用链表串起来,新插入的在前面. ConcurrentHashMap在HashMap的基础 ...

  2. hdu 1007 Quoit Design 题解

    原题地址 题目大意 查询平面内最近点对的距离,输出距离的一半. 暴力做法 枚举每一个点对的距离直接判断,时间复杂度是 $ O(n^2) $,对于这题来说会超时. 那么我们考虑去优化这一个过程,我们在求 ...

  3. Spinner列表选择框

    Spinner首先它是一个弹出式的列表选择框,由于间接继承了ViewGroup,所以它可以当做一个容器使用; 如果我们可以明确下拉列表中的列表项, 则可以不需要编写代码, 只需要为spinner指定a ...

  4. StringBulider类

    StringBulider类创建的字符串同样可以对字符串进行修改: public class StringBuliderDemo { public static void main(String[] ...

  5. SpringCloud学习笔记(7):使用Spring Cloud Config配置中心

    简介 Spring Cloud Config为分布式系统中的外部化配置提供了服务器端和客户端支持,服务器端统一管理所有配置文件,客户端在启动时从服务端获取配置信息.服务器端有多种配置方式,如将配置文件 ...

  6. Kerberoasting攻击

    前面我们介绍了<Windows本地认证>.<Windows网络认证>.<Windows域认证>和<SPN扫描>,这次继续讲解域内相关的东西. 0x01介 ...

  7. 商用hadoop集群的配置命令分布

    角色 安装 hdfs配置 yarn配置 hdfs 格式化 启动yarn服务 启动hdfs服务 master yum install hadoop-hdfs-namenode yum install h ...

  8. redis分布式锁-WATCH锁(废弃)

    使用watch构建锁的代码结构.(最着负载不断增加,系统完成一次加锁操作,重试次数不断加大) pine=conn.pineline while pine.watch if xxx pine.unwat ...

  9. 问题:程序编译通过,但是执行时报错:coredump

    问题描述: 在一个客户现场搭建环境时,遇到了一个棘手的问题,C代码编译通过后,无法正常运行,启动会出现“coredump”错误. 运行环境为新搭建的AIX6.1,数据库为Oracle11.2.0.2. ...

  10. 极光推送消息——Alias别称方式(Andirod)

    1.pom文件引入相关jar包 <!--极光推送消息start--> <dependency> <groupId>net.sf.json-lib</group ...