开源网易云及QQ音乐播放插件

AI摘要:MusicPlayer 是一个为 Typecho 博客系统开发的插件,支持网易云音乐和 QQ 音乐的歌曲、歌单和专辑链接的自动转换,实现音乐内容在博客页面的直接播放。插件自动识别音乐链接,支持多种类型,与编辑器无缝集成,并可通过 CSS 自定义样式。安装简单,配置灵活,通过正则表达式匹配链接并替换为 iframe 嵌入代码,加载自定义 CSS 样式文件。

之前一直用的是 Meting 插件来解决博客音乐播放的问题,不过发现作者很久都不再维护更新了,所以想造个轮子自己搞一个播放器试试。我这次并没有自己来解析音乐,因为现在网易云和QQ都有自己的分享链接,直接用官方的不是更稳定嘛……

再说一下为啥不用短代码这种形式,我感觉直接放一个链接是更方便的,后面就算是禁用了插件,也不会影响跳转到正常的官方链接上。目前除了高德地图这种的我现在用的是短代码,其他的例如豆瓣卡片都是使用的链接形式。

这次为啥没拆分成两个组件呢,因为这两个都是链接方式的,而且也有共同的设置,所以就整合到一起了,后面再增加播放器也走统一逻辑。

MusicPlayer 是一个为 Typecho 博客系统开发的插件,能够自动将音乐链接转换为可嵌入的播放器。支持网易云音乐和 QQ 音乐的歌曲、歌单和专辑链接的自动转换,让读者可以在博客页面直接播放音乐内容。

功能特点

  • 自动识别:自动识别文章内容中的音乐链接
  • 多平台支持:支持网易云音乐和 QQ 音乐
  • 多种类型支持:支持歌曲、歌单和专辑链接
  • 无缝集成:与 Typecho 编辑器无缝集成,无需额外操作
  • 响应式设计:播放器宽度自适应,支持移动设备
  • 可配置:支持设置是否自动播放

演示

QQ音乐

网易云音乐

单曲

专辑

歌单

支持的链接格式

网易云音乐

歌曲链接

https://music.163.com/#/song?id=12345678
https://music.163.com/#/song/12345678

歌单链接

https://music.163.com/#/playlist?id=12345678
https://music.163.com/#/playlist/12345678

专辑链接(专辑载入有时候会加载失败,原因不明)

https://music.163.com/#/album?id=12345678
https://music.163.com/#/album/12345678

QQ 音乐

歌曲链接

https://i.y.qq.com/v8/playsong.html?songid=127570280&songtype=0

安装方法

  1. 下载插件文件并解压
  2. MusicPlayer 文件夹上传到 Typecho 的 usr/plugins/ 目录
  3. 登录 Typecho 后台,进入"控制台" → "插件"
  4. 找到 MusicPlayer 插件,点击"启用"
  5. 在插件设置中配置自动播放选项(可选)

配置选项

插件提供以下配置选项:

  • 自动播放设置

    • 不自动播放(默认)
    • 自动播放

使用方法

  1. 在 Typecho 编辑器中直接粘贴音乐链接
  2. 发布文章后,链接会自动转换为播放器
  3. 读者可以直接在博客页面播放音乐

示例

网易云音乐示例

在编辑器中输入:

https://music.163.com/#/song?id=1383292126

发布后会自动转换为:

<div class="typecho-netease-player">
  <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="100%" height="86" src="https://music.163.com/outchain/player?type=2&id=1383292126&auto=0&height=66"></iframe>
</div>

QQ 音乐示例

在编辑器中输入:

https://i.y.qq.com/v8/playsong.html?songid=127570280&songtype=0

发布后会自动转换为:

<div class="typecho-qq-player">
  <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="100%" height="65" src="https://i.y.qq.com/n2/m/outchain/player/index.html?songid=127570280&songtype=0"></iframe>
</div>

播放器参数

插件根据不同类型生成不同的 iframe 参数:

网易云音乐

  • 歌曲type=2,高度 86px
  • 歌单type=0,高度 480px
  • 专辑type=1,高度 480px

QQ 音乐

  • 歌曲:高度 65px

样式自定义

插件会自动加载 assets/style.css 文件,您可以通过修改该文件来自定义播放器样式。CSS 文件会自动添加版本号,确保更新后浏览器能加载最新样式。

下载

TypechoPlugins
TypechoPlugins
Owner:wangdaodao
Watch:6
Star:6
Fork:2
Typecho plugins

特别注意

目前使用网易云专辑会触发资源加载失败,具体问题不清楚。如果有朋友知道,可以联系我。

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450 src="//music.163.com/outchain/player?type=1&id=58412&auto=1&height=430"></iframe>

专辑

已有 26 条评论

  1. 粽叶加米 粽叶加米 [路⼈]
    回复

    我没有用过QQ音乐,用过网易云,但他们都没有”嵌入代码“这种形式的分享吗?还是我不知道?就连applemusic都有。

    1. 王叨叨 王叨叨 [作者]
      回复

      QQ和网易云都有的,QQ的比较隐蔽。

  2. 满心 满心 [朋友]
    回复

    这个确实精简好看

    1. 王叨叨 王叨叨 [作者]
      回复

      官方推荐的分享,稳定性应该会更好一些,唯一不好的就是改不了样式。

  3. 灰常记忆 灰常记忆 [路⼈]
    回复

    总之网易之类的很多音乐只能试听几秒 我一般都是直接搞下来

    1. 王叨叨 王叨叨 [作者]
      回复

      现在网易云和QQ音乐都是这样,搞的有些歌都没办法听了……

  4. 雨帆 雨帆 [路⼈]
    回复

    厉害了,不过我现在的实现方式是自己管理 MP3。

    1. 王叨叨 王叨叨 [作者]
      回复

      自己管理肯定好了,我担心我这流量扛不住。

  5. obaby obaby [路⼈]
    回复

    我现在内嵌音乐是直接下载个mp3 扔到服务器上去~~
    这个播放器不错啊

    1. 王叨叨 王叨叨 [作者]
      回复

      我比较担心流量被盗刷,而且音乐这种有版权的,我没随便放服务器上

  6. 老张博客 老张博客 [路⼈]
    回复

    听歌我都用酷狗概念版,虽然有个“提示”但是还可以有接受!

    1. 王叨叨 王叨叨 [作者]
      回复

      听说概念版的每天都可以领会员,不过我没有用过,我还是用的网易云比较多

  7. 网友小宋 网友小宋 [路⼈]
    回复

    没备案随便,备案了还是不要加音乐。

    1. 王叨叨 王叨叨 [作者]
      回复

      这都是使用官方的分享的方式去展示的,使用iframe合理展示,备案了也没事,我专门去查了一下。

  8. 威言威语 威言威语 [朋友]
    回复

    现在各大音乐app都要开vip才能听歌,都好久没听歌了。

    1. 王叨叨 王叨叨 [作者]
      回复

      现在用的最多的就是网易云音乐了,平时工作的时候,能够放松一下

  9. 皇家元林 皇家元林 [路⼈]
    回复

    以前在网易收集了不少歌曲,后来很多因为版权都不能正常播放了。
    所以现在收集的音乐全部下载下来,放本地 nas 上。

    1. 王叨叨 王叨叨 [作者]
      回复

      开了网易云的黑胶,目前听歌是够用了,我有一些没有音乐放在网易云的网盘上面,方便我在外面听歌。

  10. - - [朋友]
    回复

    我最近也在搞音乐播放 现在越来越多需要vip才能播放的音乐 一直很无解 前几天下载Meting插件用 就是没有尝试成功 ε=(´ο`*)))唉

    1. 王叨叨 王叨叨 [作者]
      回复

      Meting只负责解析,vip的音乐要在后台配置cookie才可以,不过cookie用不了多久就过期了,还是没办法解析。
      我分享的歌曲不太多,就想着不走Meting的解析了,用官方提供的分享方式算了,减轻下解析负担。

  11. 回复

    很好很强大
    研究下给整到wp上

    1. 王叨叨 王叨叨 [作者]
      回复

      可以的,里面的正则匹配已经注明了,改造一下就能用

  12. Jaxmu Jaxmu [路⼈]
    回复

    这个好啊 先Star一下 日后试试

    1. 王叨叨 王叨叨 [作者]
      回复

      目前先增加了这两个,后面再按需扩展增加吧。

  13. acevs acevs [路⼈]
    回复

    一看到音乐播放器,我就想起当年的qq空间了。哈哈。

    1. 王叨叨 王叨叨 [作者]
      回复

      之前那个时候各种找能外链的音乐,我记得当时我找的是水木年华的歌。

添加新评论