一.安装依赖

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. Bootstrap4默认样式不对胃口?教你使用NPM+Webpack+SASS来定制

    Bootstrap 是一个流行的前端样式库,可以方便快速的构建应用,但默认样式可能不尽人意,本文就介绍如何使用 NPM, Webpack, SASS 针对它的源码来定制自己的主题.版本使用的是 Boo ...

  2. 开发必配的Finder设置

    1.显示标签页.显示路径栏.显示状态栏的设置位置,在访达->显示-> 显示状态栏 个人三个都设置了,但是觉得显示状态栏用的并不多,反而多一行,下面是显示状态栏的效果,主要可以一眼看出有多少 ...

  3. 浅谈独立特征(independent features)、潜在特征(underlying features)提取、以及它们在网络安全中的应用

    1. 关于特征提取 0x1:什么是特征提取 特征提取研究的主要问题是,如何在数据集未明确表示结果的前提下,从中提取出重要的潜在特征来.和无监督聚类一样,特征提取算法的目的不是为了预测,而是要尝试对数据 ...

  4. 【学习笔记】第五章 python3核心技术与实践--字典和集合

    [第四章]思考题的答案,仅供参考: []比list()更快,因为调用了list函数有一定的时间,而[]却没有. 前面我们学习了 Python 中的列表和元组,了解了他们的基本操作和性能比较.这节章,我 ...

  5. 重学Java(一):与《Java编程思想》的不解之缘

    说起来非常惭愧,我在 2008 年的时候就接触了 Java,但一直到现在(2018 年 10 月 10 日),基础知识依然非常薄弱.用一句话自嘲就是:十年 IT 老兵,Java 菜鸡一枚. 于是,我想 ...

  6. ubuntu系统设置开机后使用使用终端运行应用程序

    1.在菜单栏输入start,点击startup application进入 2. 添加开机启动程序 3.因为要用终端启动一个应用程序,所以command输入:gnome-terminal -- 程序执 ...

  7. Jmeter 接口自动化-脚本数据分离实例

    一. 背景:  为了让大家更加的了解Jmeter,并且使用起来游刃有余.这篇我们主要讲一下,如何优雅的使用Jmeter一步步的实现接口自动化,完成脚本与数据分离,把可能对Jmeter脚本的维护转移到c ...

  8. spring5 源码深度解析----- AOP的使用及AOP自定义标签

    我们知道在面向对象OOP编程存在一些弊端,当需要为多个不具有继承关系的对象引入同一个公共行为时,例如日志,安全检测等,我们只有在每个对象里引入公共行为,这样程序中就产生了大量的重复代码,所以有了面向对 ...

  9. Eureka参数调优

    1.常见问题 1.为什么服务下线了,Eureka Server接口返回的信息还会存在? 2.为什么服务上线了,Eureka Client不能及时获取到? 3.为什么偶尔会有如下提示: EMERGENC ...

  10. 深入集合类系列——HashMap和HashTable的区别

    含义:HashMap是基于哈希表的Map接口的非同步实现.允许使用null值和null键.此类不保证映射的顺序,特别是它不保证该顺序恒久不变. 数据结构:HashMap实际上是一个“链表散列”的数据结 ...