vue-aplayer 音乐播放，实现播放与音乐列表

最近现在个人博客上嵌入音乐播放，与是撸起袖子就干了起来，由于博客前端是基于Vue开发，所以在网上查了一下，说vue-aplayer使用起来不错，于是便用了起来，效果如下：

代码如下：

此代码可以直接使用，且里面音乐地址链接都是有效的

使用前提：安装vue-aplayer

npm install vue-aplayer –save

vue页面完整代码：

<template><div><div style="padding:10px 0;"><aplayer autoplay :music="{title: '剑心',artist: '张杰',src: 'http://m7.music.126.net/20200607161403/ed714b7dbaaee6f862184ff96da280bf/ymusic/3e70/4277/5715/abf7aaf8e92b13f339a59dfc6940499d.mp3',pic: 'https://p2.music.126.net/ixIs5kkukgNYMmeDsc35_g==/29686813955450.jpg'}" :list="musicList"></aplayer></div></div>
</template><script>import aplayer from "vue-aplayer";export default {name: "Aplayer",components: {//别忘了引入组件aplayer: aplayer},data() {return {musicList: [{title: '白羊',artist:'徐秉龙',src: "http://m8.music.126.net/20200607160502/d62b8d5dc9c90c93a151914be957a617/ymusic/25a2/4ff4/52fc/d664724d25de35a8d4e23c1b986c60b5.mp3",pic: 'https://p1.music.126.net/tczb_7II9KzSuLQsVt89Gw==/109951163049336667.jpg',},{title: '说谎',artist: '林宥嘉',src: "http://m7.music.126.net/20200607161953/af2e67e22c2407fea966c46769106159/ymusic/05ee/4458/4a12/e3ea4813e0c4abafe6c3d40b13cb9f65.mp3",pic: 'https://p2.music.126.net/mMZNB-jhYsw29K61QtopJA==/109951163187404137.jpg',},{title: '成都',artist: '赵雷',src: "http://m7.music.126.net/20200607162234/8629f14056f784879d33dedbab34bf03/ymusic/fa90/df9c/59f7/95c4a2802e0b9191ae1a048f127e53c5.mp3",pic: 'https://p1.music.126.net/34YW1QtKxJ_3YnX9ZzKhzw==/2946691234868155.jpg'},{title: '陪你到底',artist: '许华升',src: "http://m7.music.126.net/20200607161155/1ddfddaa4d9a7c3100c3e7329ce8e3da/ymusic/540f/005e/065e/ce65b58fea742cac390e1499eb32db98.mp3",pic: 'https://p1.music.126.net/a7QkLGexMQGT2lF3mqcUdw==/109951163693319625.jpg',},{title: '广东爱情故事',artist: '雨神',src: "http://m7.music.126.net/20200607160858/6143003bbb9021f13678624978f9ba14/ymusic/c69c/aeed/2bd9/57487636f38ec8ef9355bf67d0741dfe.mp3",pic: 'https://p1.music.126.net/gjvguk9I-QwuyWFjQHM9SA==/109951163189947600.jpg',},{title: '烟火里的尘埃',artist: '华晨宇',src: "http://m8.music.126.net/20200607161716/e2266bad871c28351a3ce257061b3310/ymusic/5d63/5150/0851/5f226aac018cafc2cb248f7d28fbd5b4.mp3",pic: 'https://p1.music.126.net/_49Xz_x9kTTdEgmYYk6w2w==/6672936069046297.jpg',}]};},computed: {}};
</script><style lang="scss" scoped type="text/css">
</style>

若有不懂的可以私信我，希望能帮到你…

然后我分享一个音乐api求情地址，希望也能帮助到你：

1:歌曲搜索接口请求地址:https://autumnfish.cn/search请求方法:get请求参数:keywords(查询关键字)响应内容:歌曲搜索结果2:歌曲url获取接口请求地址:https://autumnfish.cn/song/url请求方法:get请求参数:id(歌曲id)响应内容:歌曲url地址3.歌曲详情获取请求地址:https://autumnfish.cn/song/detail请求方法:get请求参数:ids(歌曲id)响应内容:歌曲详情(包括封面信息)4.热门评论获取请求地址:https://autumnfish.cn/comment/hot?type=0请求方法:get请求参数:id(歌曲id,地址中的type固定为0)响应内容:歌曲的热门评论5.mv地址获取请求地址:https://autumnfish.cn/mv/url请求方法:get请求参数:id(mvid,为0表示没有mv)响应内容:mv的地址

使用时有不懂的地方也可私信我，好了，最好欢迎大家的三连（点赞，关注、收藏），祝你生活愉快……

vue-aplayer 音乐播放，实现播放与音乐列表相关推荐

Vue实现仿音乐播放器11-实现访问百度音乐API实现播放音乐功能
场景从今日推荐页面点击某首歌曲会将这首歌曲的songid通过路由传递到播放界面, 播放界面调用百度音乐接口实现数据的获取以及音乐的播放. 效果实现配置路由首先在pages目录下新建musicp ...
Vue实现访问百度音乐API实现播放音乐功能
场景从今日推荐页面点击某首歌曲会将这首歌曲的songid通过路由传递到播放界面, 播放界面调用百度音乐接口实现数据的获取以及音乐的播放. 效果实现配置路由首先在pages目录下新建musicp ...
基于SSM+VUE整合的音乐购买以及播放器管理系统
项目背景随着社会的发展,计算机的优势和普及使得音乐播放器管理系统的开发成为必需.音乐播放器管理系统主要是借助计算机,通过对首页.音乐推荐.付费音乐.论坛信息.个人中心.后台管理等信息进行管理.减少管 ...
仿网易云音乐html代码,仿网易云音乐外链播放器UI的HTML5音乐播放器插件
简要教程 APlayer是一款仿网易云音乐外链播放器UI的HTML5音乐播放器插件.APlayer音乐播放器可以自定义歌曲封面,可以自定义同步歌词等,界面时尚大方,是一款非常好的HTML5音乐播放器插 ...
html5自动播放音乐外链,仿网易云音乐外链播放器UI的HTML5音乐播放器插件
APlayer是一款仿网易云音乐外链播放器UI的HTML5音乐播放器插件.APlayer音乐播放器可以自定义歌曲封面,可以自定义同步歌词等,界面时尚大方,是一款非常好的HTML5音乐播放器插件. 安装 ...
全局播放控件（音乐app项目-第10步）
在上一节播放控件 (音乐app项目-第9步)的基础上,希望播放控件能够在所有页面显示,效果如下: 流程: 1.修改index.html 加上如下代码,防止postion:fixed失效: <me ...
ios手机怎么连接adb命令_手机蓝牙怎么连接汽车蓝牙放音乐，车载蓝牙播放器怎么用...
手机蓝牙怎么连接汽车蓝牙音乐?车载蓝牙播放器怎么用?针对这两个问题,我们为大家分享下操作指南,如下: 1.把手机蓝牙和车载蓝牙都打开,且处于可发现状态: 2.在手机的蓝牙界面,点击"搜索设备 ...
Android开源音乐播放器之播放器基本功能
系列文章 Android开源在线音乐播放器--波尼音乐 Android开源音乐播放器之播放器基本功能 Android开源音乐播放器之高仿云音乐黑胶唱片 Android开源音乐播放器之自动滚动歌词 An ...
css3动画应用-音乐唱片旋转播放特效
css3动画应用-音乐唱片旋转播放特效核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...
22_Android中的本地音乐播放器和网络音乐播放器的编写，本地视频播放器和网络视频播放器，照相机案例，偷拍案例实现
1 编写以下案例: 当点击了"播放"之后,在手机上的/mnt/sdcard2/natural.mp3就会播放. 2 编写布局文件activity_main.xml <Line ...

vue-aplayer 音乐播放，实现播放与音乐列表

代码如下：

vue-aplayer 音乐播放，实现播放与音乐列表相关推荐

最新文章

热门文章