一.安装依赖

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. 线上LVM磁盘挂载

    ESC云服务器磁盘扩容 日常运行中,容器服务所在目录由于container-log.image的增加需要占用大量的磁盘空间,所以对/var/lib/docker/目录进行扩容挂载LVM数据盘. 首先查 ...

  2. 基于Python的多线程与多进程

    1.I/O密集型与计算密集型 多进程适用于I/O密集型 多进程适用于计算密集型 2.没有sleep(T)的多个死循环只能用多进程 3.模块介绍: 1)threading模块(_thread模块已淘汰) ...

  3. ListView 字母导航排序

    一.概述 ListView字母导航排序,网上已经有很多代码和博客了, 这篇博文也是照搬网上的.  之所以写到这里,不是为了说明什么,只是为了以后自己查阅方便.本来公司要求实现expandablelis ...

  4. Unity3D_07_日志、文本打印

    1.Debug.Log(“hello”); 2.打开控制台查看日志:ctrl+shift+c 3.输出一个位置的坐标(需要转换成字符串.ToString()) Vector3 worldPositio ...

  5. 5、链表队列(java实现)

    1.图例 2.链表节点 public class Node<T> { public T data; public Node next; } 3.具体实现 public class Link ...

  6. JSP官方文档(JavaServer Pages Specification)下载

    找了好久,终于找到官网的下载地址了.这样,就可以用一手的文档资料了! 下载地址:http://download.oracle.com/otndocs/jcp/jsp-2_3-mrel2-spec/ s ...

  7. php判断访问协议是否是https

    可以通过$_SERVER中获取是否是HTTPS协议.   在$_SERVER["SERVER_PROTOCOL"]中拿到的只能是http.$_SERVER['HTTPS'] === ...

  8. 解决Android数据库异步操作的大问题

    前言 相信大家在开发过程中,也遇到过下面的这种异常: java.lang.IllegalStateException: attempt to re-open an already-closed obj ...

  9. BOM之定时器

    JavaScript中的时间是通过定时器控制的,他们分别是window.setInterval和window.setTimeout,我们当然可以省略window,直接使用方法名称调用. 一     s ...

  10. springboot项目启动报错 url' attribute is not specified and no embedded datasource could be configured

    报错相关信息: 2019-07-22 17:12:48.971 ERROR 8312 --- [ main] o.s.b.d.LoggingFailureAnalysisReporter : **** ...