首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用vue互联QQ音乐完成网站音乐播放器

---- 文章简介:使用vue互联QQ音乐完成网站音乐播放器 创作目的:记录使用APlayer播放器+MetingJs实现 在线播放qq音乐、网易云音…等平台的音乐 ☀️ 今日天气:2022...3-3-1、在控制台输入命令启动vue项目 3-3-2、通过package.js启动项目 4、音乐播放器歌曲播放源切换 4-1、QQ音乐歌单播放 4-1-1、获取QQ音乐歌单id 4-1-...2、APlayer 和 MetingJS 的简单介绍 2-1、APlayer开源音乐播放器 Aplayer是一个功能强大的HTML5音乐播放器, 开源地址:https://github.com/...4、音乐播放器歌曲播放源切换 不知道大家是否还记得在介绍MetingJs时的参数列表,没错正是通过参数列表进行歌曲配置的。...4-1-1、获取QQ音乐歌单id 我们随便选择一个歌单

2.7K40
您找到你想要的搜索结果了吗?
是的
没有找到

网站通过代码引入Aplayer音乐播放器,无需插件

5WordPress区块音乐播放器推荐:基于APlayer的Hermit X(支持网易云、QQ音乐、虾米等) 前天 17910 实现方法 这里还是通过APlayer的方式引入:其界面美观,功能强大。...音乐播放器音乐信息,歌词,进度条,音量,顺序模式,循环模式都支持。可以使用三方音乐外链,还可以使用自己的音乐链接。...,当该播放器开始播放时暂停其他播放器 listFolded false 列表是否先折叠 listMaxHeight - 音频列表最大高度 第三方音乐引入 单曲引入 因为我一般是在文章里插入,所以一般是单曲引入...歌单引入 现在网易云创建一个歌单,然后记住歌单id,样式如下: 和上面一样,server="netease"指定音乐平台为网易云,type="playlist"指歌单类型,id="5185298264"...> 本地音乐引入 因为我们有时候会把音乐资源放在服务器,所以这里介绍一下本地资源引入,实现方法和上面一样。

6.1K10

每个人都能做的网易云音乐

本文作者:IMWeb 小前端 原文出处:IMWeb社区 未经同意,禁止转载 仿网易云音乐(webapp) 项目地址 (project address) api来源 感谢binaryify让我能用喜欢的东西做一个属于自己的播放器...|——|—— apiList.js api列表 |——|—— getData.js 数据处理(封装一个axios请求) |——...—— style 样式文件 |—— components 公用组件 |——|—— bottomSongList 播放器播放列表组件...(Project Function) 完成功能(finish function) 个性推荐,歌单,排行榜页面 滑动功能(左右滑动切换菜单) 播放功能(快进,快退,上一曲,下一曲,歌词同步等) 搜索功能...(热门搜索,单曲,歌手,专辑,歌单,用户) 歌单功能(最新,最热,精品歌单及详情展示) 歌手专辑功能(介绍及详情展示) 排行榜功能(云音乐官方版) 效果图 (effect picture) ?

1.3K60

每个人都能做的网易云音乐

本文作者:IMWeb 小前端 原文出处:IMWeb社区 未经同意,禁止转载 仿网易云音乐(webapp) 项目地址 (project address) api来源 感谢binaryify让我能用喜欢的东西做一个属于自己的播放器...|——|—— apiList.js api列表 |——|—— getData.js 数据处理(封装一个axios请求) |——...—— style 样式文件 |—— components 公用组件 |——|—— bottomSongList 播放器播放列表组件...(Project Function) 完成功能(finish function) 个性推荐,歌单,排行榜页面 滑动功能(左右滑动切换菜单) 播放功能(快进,快退,上一曲,下一曲,歌词同步等) 搜索功能...(热门搜索,单曲,歌手,专辑,歌单,用户) 歌单功能(最新,最热,精品歌单及详情展示) 歌手专辑功能(介绍及详情展示) 排行榜功能(云音乐官方版) 效果图 (effect picture) ?

96930

网站插入 Aplayer网易云 音乐播放器

list 列表播放模式: list, random volume 0.7 播放器音量 lrctype 0 歌词格式类型 listfolded false 指定音乐播放列表是否折叠 storagename...metingjs LocalStorage 中存储播放器设定的键名 autoplay true 自动播放,移动端浏览器暂时不支持此功能 mutex true 该选项开启时,如果同页面有其他 aplayer...播放,该播放器会暂停 listmaxheight 340px 播放列表的最大长度 preload auto 音乐文件预载入模式,可选项: none, metadata, auto theme...#ad7a86 播放器风格色彩设置 使用音乐平台提供插件 不使用Aplayer播放器; 以网易云为例,网页端点击生成外链播放器即可生成外链代码,如我的某个歌单生成外链。...不兼容; 解决方法: 引入此js,替换掉aplayer原本的js: https://cdn.jsdelivr.net/gh/ooahz/source@latest/Aplayer/APlayer.min.js

3.3K30

Aplayer搭配MetingJS音乐插件的使用

Aplayer是一个功能强大的HTML5音乐播放器,Metingjs基于Aplayer插件封装好的插件,开箱即用。...“为QQ音乐平台,id当你创建一个歌单之后右键分享歌单会出现一串数字(网易云),字母(QQ音乐) Aplayer参数选择 选项 默认 描述 id(编号) require 歌曲ID /播放列表ID /专辑...lrc-type(歌词) 0 歌词显示 list-folded(列表折叠) false 指示列表是否应该首先折叠 list-max-height(最大高度) 340px 列出最大高度 storage-name...(储存名称) metingjs 存储播放器设置的localStorage键 Aplayer的使用 将这行代码复制进你的网页,调整好参数,就可以开始自定义化你的播放器啦!...我的博客网页播放器配置示例: <!

53621

hexo-butterfly-音频视频播放器嵌入

更新记录 2021-01-06 基于hexo-butterfly主题扩展:引入音频播放器、douban组件引入 hexo-butterfly-音频视频播放器嵌入 1.音乐引入 开发说明 ​ 实现引入有两种方式...,可以选择歌单生成相应的外链播放器: 网页版访问任意指定歌单列表: 如果是通过app端访问,则自定义歌单列表(公开)通过分享的方式获取到链接,摘取其中的data_id 其余参数配置说明 ​...相关参数配置参考APlayer官方文档说明 选项 默认值 描述 data-id 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字 data-server 必须值 音乐平台: netease...false 指定音乐播放列表是否折叠 data-storagename metingjs LocalStorage 中存储播放器设定的键名 data-autoplay true 自动播放,移动端浏览器暂时不支持此功能...音乐文件预载入模式,可选项: none, metadata, auto data-theme #ad7a86 播放器风格色彩设置 局部引用 # 插件会在每个文件中都插入js、css,3.0版本中内置了

1.9K20

hexo-tag-aplayer音乐插件使用

) 最主要最简单的使用 推荐使用 MetingJS 是基于Meting API 的 APlayer 衍生播放器,引入 MetingJS 后,播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放...ID或者单曲ID 有关 {% meting %} 的选项列表如下: 选项 默认值 描述 id 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字 server 必须值 音乐平台:...:all, one,none order list 列表播放模式: list, random volume 0.7 播放器音量 lrctype 0 歌词格式类型 listfolded false 指定音乐播放列表是否折叠...aplayer 播放,该播放器会暂停 listmaxheight 340px 播放列表的最大长度 preload auto 音乐文件预载入模式,可选项: none, metadata, auto theme...#ad7a86 播放器风格色彩设置 插件会在每一個文件都插入 js 和 css,为了避免这一情況,butterfiy 3.0 版本內置了 aplayer 需要的 css 和 js

1.3K20

mmPlayer:一款基于Vue的自适应Web在线音乐播放器

说明:一两年前博主曾分享过一个美观的在线音乐播放器MKOnlineMusicPlayer→传送门,不过作者早已停止了维护,最近有小伙伴推荐了mmPlayer,一个使用Vue全家桶打造自适应Web音乐播放器...,模仿QQ⾳乐⽹页版界⾯,主要以为PC端为主,移动端只做相应适配(未做歌词显⽰),现已实现播放器、歌词滚动、排⾏榜、搜索、播放历史、同步⽹易云歌单六⼤功能。...截图 功能 播放器 快捷键操作 歌词滚动 正在播放 排行榜 歌单详情 搜索 播放历史 查看评论 同步网易云歌单 安装 Github地址:https://github.com/maomao1996/Vue-mmPlayer...#或者后台运行 screen -dmS api node app.js 后端地址为ip:3000,如果想改其它端口,比如5555,启动命令为set PORT=5555 && node app.js。.../mm-header.vue,自己找关键词自行修改吧 这里如果你想使用https访问该音乐播放器,那还需要使用https域名反代该api地址,然后将反代后的https域名填进去。

6.8K10

这个高颜值的开源第三方网易云音乐播放器你值得拥有

简介 我平时主要的听歌软件是网易云音乐,但是它有很多花里胡哨的功能,比如电台、直播、朋友、播客、云村等等,说实话这些我都不需要,基本也不会用,大部分的时间都只把它当做一个本地播放器,因为它毕竟是一个商业软件...所以有没有一个既简洁纯粹,颜值又高的网易云音乐播放器呢,答案是有的,它就是:YesPlayMusic,一个开源的第三方实现。...这个项目目前有18.1k个star,相当多了,项目基于Vue.js全家桶开发,是一个Web项目,但是通过Electron支持打包成macOS、Windows、Linux三个平台的客户端进行使用。...发现页 首页部分栏目可以点击查看全部跳转到发现页,当然也可以直接点击顶部的tab切换到发现页,发现页主要是查看推荐歌单、排行榜、按分类搜索歌单音乐音乐库需要登录后使用,也就是你的个人空间,可以查看你喜欢的歌曲...,评论最初也是网易云音乐的特色,但是很可惜这个项目并不支持查看评论功能,作者也明确表示不会支持: 因为它是开源的,所以作者不支持,可以自己来支持,于是我fork了它的仓库,花了一天时间加上了评论的查看

2.3K20

Jekyll-这次来玩个随机BGM

好好好……自己写 2017-08-25更新:动态获取网易云歌单 实现步骤 参考文献 捡了个蓝牙耳机,这几天基本保持「自带 BGM」的状态 o(*≧▽≦)ツ …… 很早实现了全局 BGM1 再次声明...,一定要通过主页才能看到播放器: 主页 不过从头到尾只有一首曲子,并且云音乐有些烦人,无法实现多曲目选择。...虾米可以多曲目外链,不过还是无法实现随机选曲的功能。 那么该如何实现呢? 三个方案:1. 发邮件威胁虾米音乐网站实现随机选曲播放功能 2. 发邮件威胁网易云音乐网站实现多曲目外链播放器 3....修改一下服务器端的代码,直接修改app.js文件,里面可以看到如何开启允许跨域 4....解析 JSON 然后取出对应歌单的所有MusicID,然后使用前文的逻辑,选择一个 ID 然后生成播放器 如此以后每次修改音乐就只需要到云音乐实现即可 参考文献 ---- [来给博客加个全局 BGM

51810

网站这样引入一款简洁而功能强大的音乐播放器

H5播放器介绍 APlayer 是一个简洁漂亮、功能强大的 Html5 音乐播放器 MetingJS 是为 APlayer 添加网易云、QQ音乐、酷狗音乐等支持的插件 安装教程 安装很简单,一共需要调用三个文件...:APlayer.min.js APlayer.min.css Meting.min.js 你可以使用 CDN 调用,只需要在 里面插入: 一个 MetingJS 播放器至少需要三个参数: server 指定调用的 API ,可选 netease, tencent, kugou, xiami, baidu ,分别对应网易云音乐...、QQ音乐、酷狗音乐、虾米音乐、百度音乐 type 指定调用类型,可选 song, playlist, album, search, artist ,分别对应单曲、歌单、专辑、搜索结果、艺术家 id 指定调用的...id ,一般可以在地址栏中找到 当 type 选择的是个播放列表时,生成的播放器是这样的: 播放列表默认是打开的,你可以使用参数 listFolded="true" 使其默认折叠 当你设定 fixed

1.5K40
领券