一.安装依赖

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. java基础day2

    Java标识符命名规则: 标识符由字母,下划线“_”.美元符号$或数字组成/ 不能以数字开头 区分大小写 不能是关键字 “ 见名知意” 约定俗成的规则 类名:首字母大写变量名:除第一个单词外小写,其他 ...

  2. SpringBoot 2.0 + 阿里巴巴 Sentinel 动态限流实战

    前言 在从0到1构建分布式秒杀系统和打造十万博文系统中,限流是不可缺少的一个环节,在系统能承受的范围内既能减少资源开销又能防御恶意攻击. 在前面的文章中,我们使用了开源工具包 Guava 提供的限流工 ...

  3. HBase 超详细介绍

    1-HBase的安装 HBase是什么? HBase是Apache Hadoop中的一个子项目,Hbase依托于Hadoop的HDFS作为最基本存储基础单元,通过使用hadoop的DFS工具就可以看到 ...

  4. PythonI/O进阶学习笔记_6.对象引用,可变性和垃圾回收

    前言: 没有前言了- -......这系列是整理的以前的笔记上传的,有些我自己都忘记我当时记笔记的关联关系了. 记住以后 笔记记了就是用来复习的!!!不看不就啥用没了吗!!! content: 1.p ...

  5. 如何基于String实现锁?

    在某些时候,我们可能想基于字符串做一些事情,比如:针对同一用户的并发同步操作,使用锁字符串的方式实现比较合理.因为只有在相同字符串的情况下,并发操作才是不被允许的. 因为String 类型的变量赋值是 ...

  6. MyBatis返给前端正确的时间格式

    前台获取位时间戳,后端解决办法之一 问题描述:前端获取后台接口返回的数据,时间是long类型的时间戳而不是时间类型2019-09-25 17:07:32 项目: JAVA web 工具:eclipse ...

  7. java数据结构——数组(Array)

    数据结构+算法是我们学习道路上的重中之重,让我们一起进步,一起感受代码之美! /** * 让我们从最基本的数据结构——数组开始吧 * 增.删.改.查.插.显示 */ public class Seql ...

  8. 制定一个学习liunx的目标

        制定一个学习liunx的目标       学习目标方法 1.在这五个月的学习时间里,制定一套自己的学习方式. 2.养成做笔记以及写博客的习惯 . 3.坚持上课前预习,自习时间总结 . 4.紧跟 ...

  9. Linux mint 启动文本模式(不启动图形界面)

    Linux Mint 系统用了很久,很顺手,赞一个! 有一天想同时运行多个虚拟机linux系统做实验,想着只启动文本模式可以省点内存资源,结果试了多种方法都不成功,网上现有针对Ubuntu原版和Cen ...

  10. js 指定分隔符连接数组元素join()

    示例:<script type="text/javascript"> var myarr = new Array(3); myarr[0] = "I" ...