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

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

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

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

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

功能特点

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

演示

支持的链接格式

网易云音乐

歌曲链接

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

歌单链接

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

专辑链接

https://music.163.com/#/album?id=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>

技术实现

工作原理

插件通过 Typecho 的内容过滤钩子（contentEx 和 excerptEx）在文章内容渲染时进行正则匹配，识别音乐链接并替换为相应的 iframe 嵌入代码。同时通过 header 钩子加载自定义 CSS 样式文件。

正则表达式

插件使用以下正则表达式匹配不同类型的链接：

// 网易云音乐歌曲链接
$neteaseSongPattern = '/<a\s+[^>]*href=["\']https:\/\/music\.163\.com\/#\/song\?id=(\d+)["\'][^>]*>.*?<\/a>/i';

// 网易云音乐歌单链接
$neteasePlaylistPattern = '/<a\s+[^>]*href=["\']https:\/\/music\.163\.com\/#\/playlist\?id=(\d+)["\'][^>]*>.*?<\/a>/i';

// 网易云音乐专辑链接
$neteaseAlbumPattern = '/<a\s+[^>]*href=["\']https:\/\/music\.163\.com\/#\/album\?id=(\d+)["\'][^>]*>.*?<\/a>/i';

// QQ 音乐歌曲链接
$qqSongPattern = '/<a\s+[^>]*href=["\']https:\/\/i\.y\.qq\.com\/v8\/playsong\.html\?[\s\S]*?songid=(\d+)[\s\S]*?["\'][^>]*>.*?<\/a>/i';

播放器参数

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

网易云音乐

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

QQ 音乐

• 歌曲：高度 65px

样式自定义

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

下载

TypechoPlugins

Owner：wangdaodao

Updated：2025-12-23 13:00

Watch：4

Star：4

Fork：1

Typecho plugins