Skip to content

xieqifei/SpiderPlayer

Repository files navigation

SpiderPlayer

基于MKOnlineMusicPlayer和网络爬虫的播放器。海量的免费曲库,本地储存歌单,基于无服务构架,响应式布局。

1:简介

image-20210309235105178

demo:https://y.sci.ci

曲库:Python爬虫爬取B站、Youtube和qq音乐资源。

前端:基于MKOnlineMusicPlayer。

※如果你想发展或学习本项目,请浏览->开发者文件

2:部署说明

此项目部署在云函数上,这里只有腾讯云函数的部署教程,其他云函数可能需要修改程序入口函数。

腾讯云函数提供一定的免费资源。对于个人这个量已经远远够了。了解报价:云函数报价

资源类型 每月免费额度
资源使用量 40 万 GBs
调用次数 100 万次

2.1 SpiderPlayer部署

  1. 进入github仓库下载SpiderPlayer库为zip文件。https://github.com/xieqifei/SpiderPlayer

屏幕截图 2021-02-27 123414

  1. 解压文件。
  2. 选中全部文件,重新压缩为zip格式。

image-20210227134133413

  1. 你需要一个腾讯云账号。登录后,新建一个腾讯scf云函数。了解云函数https://cloud.tencent.com/product/scf

  2. 自定义创建,函数名称随意,地域选择中国香港,其他地区可能无法自定义域名。函数提供的域名都比较长。

image-20210227124111666

  1. 函数代码里点击本地上传zip,然后点击上传,将步骤3中重新压缩的zip文件传入。

  2. 触发器配置选择自定义创建。触发方式,选择api网关

image-20210227124323892

  1. 点击完成并在触发管理中找到访问路径

image-20210227124511208

例如:https://service-q3l564rw-1258461674.hk.apigw.tencentcs.com/release/

打开后应当有播放器界面了。并且能够听歌,搜歌。

这个网址是否太冗长了?现在添加自定义域名

2.2 域名设置

需要你自己购买了域名,任何域名都可以。无需备案。

  1. 点击上图中的Api服务名

  2. 点击自定义域名

image-20210227124930418

  1. 点击新建。填入你的域名信息,支持二级域名。然后到dns服务商那里,设置cname解析,解析地址为你的云函数二级域名,比如下图中给出的:https://service-q3l564rw-1258461674.hk.apigw.tencentcs.com

image-20210227125154565

解析完成后,你应当可以通过例如:http:yourdomain.com/release来访问你的网站了,

你现在需要将域名进一步缩短,比如直接使用yourdomain.com不带路径来访问你的网站。

  1. 依次点击服务,点击你刚才建的那个api服务的名称

image-20210227125910994

  1. 点击编辑。⭐上一步不能跳过,不然点击编辑出来的页面是不一样的。

image-20210227130044903

  1. 修改路径为/

image-20210227130224442

保存后即可使用短域名访问你的网站了

2.3 自定义

以下内容都需要修改源文件,修改完后按照部署流程重新部署即可。

2.3.1 网站名称

打开index.html搜索SpiderPlayer。一共两处,修改为你喜欢的名称就可以了。

2.3.2 首页播放列表和歌单

修改和说明都在/cdn/js/musicList.js

2.3.3 同步qq歌单

qq歌单同步需要修改qq音乐的cookie。

  1. 获取cookie

image-20210312000727375

如图红色字体为qq登录cookie

  • 复制红色字体部分,不包含红色字体外的双引号。
  • 将复制的cookie粘贴到index.pyqqm.set_cookie('')部分。
  • 保存后重新上传到云函数
  • cookie有效期比较短,不建议设置。
  1. 同步歌单

当cookie设置成功后,在网页 播放列表->点击同步,输入任意qq号就可以同步qq歌单了。

这里之所以要设置cookie,是因为搜索一个qq的歌单的api,必须使用登录的qq音乐账号才能使用。

3:版本特性:

v2.1

  1. 添加QQ音乐支持
  2. 支持添加QQ音乐歌单
  3. QQ音乐图片http改为https
  4. 修复qq音乐歌单音乐播放时图片不显示问题
  5. 支持同步qq歌单
  6. 修改弹窗样式
  7. 支持点击专辑图片播放MV。
  8. 修复mv链接为http协议时主站无法嵌入播放问题
  9. 优化专辑图片提醒有MV的体验

v2.0

  1. 在MKOnlineMusicPlayer的UI基础上更新功能
  2. 修复白色背景虚化后,文字不清晰问题
  3. 支持添加youtube播放列表到歌单
  4. 保存新添加的歌单到本地
  5. 图片转base64,js、css静态资源替换到html代码中
  6. 支持添加bilibili播放列表到歌单
  7. 修复由于base64图片本地缓存导致浏览器容量超标

v1.1(功能已废弃)

  1. 支持在youtube播放列表之前加入自己的域名来构造搜索

例:https://www.youtube.com/playlist?list=PLP4YsIi6aT_Le7Lgzs_JzRRC4LD2OugHa

加入自己的播放器url,构造链接为:

https://y.sci.ci/https://www.youtube.com/playlist?list=PLP4YsIi6aT_Le7Lgzs_JzRRC4LD2OugHa

直接返回播放列表搜索结果

  1. 修改搜索结果中btn样式
  2. 支持点击歌曲名播放
  3. 支持下载歌曲

v1.0

  1. 支持B站和Youtube资源
  2. 支持添加歌曲到收藏,收藏上限受浏览器限制,在几十首内
  3. 支持一键全部播放
  4. 支持选中操作
  5. 支持退出重进后,自动加载上次的播放列表
  6. 支持搜索Youtube播放列表id和播放列表链接

4:TODO

  1. 分享
  2. 下载
  3. 歌单添加音乐
  4. 主题修改

5:鸣谢以下开源项目

MKOnlineMusicPlayer

Pytube

youtube_dl