在Typecho嵌入视频/音乐/多媒体这篇文章中，我对现有的音频嵌入方法不甚满意，因此决定自己写一个自定义音乐播放器的插件，实现自己博客想要的封面音乐功能。
本插件基于Typecho插件编写标准实现，主要代码工作由Claude3.5 Sonnet模型完成，实现时的相关提示词已附在本项目首页。
NOTE：经测试该插件目前存在浏览器加载上的问题，目前已关闭预览，暂时待修复
[music url="https://music.163.com/song/media/outer/url?id=1348568908.mp3" name="蜂鸟" artist="吴青峰" cover="http://www.manueld.me/usr/uploads/2024/09/433331566.png"]
[CustomMusicPlayer audio="http://www.manueld.me/usr/uploads/2024/09/1409321363.mp3" cover="http://www.manueld.me/usr/uploads/2024/09/433331566.png" title="歌曲名称" artist="歌手名字"]
插件实现原理
[CustomMusicPlayer netease="1348568908"]
在开发这个自定义音乐播放器插件时，我主要关注了以下几个关键点：
- 内容解析：我使用正则表达式来解析文章内容中的特定标记（如
[music]或[netease]）。这样可以方便地提取出音乐相关的信息，为后续的播放器渲染做准备。 - APlayer集成：选择使用APlayer库来渲染播放器。这个库提供了美观且功能丰富的HTML5音乐播放器，可以很好地满足我的需求。
- 网易云音乐支持：为了增加插件的实用性，我决定加入对网易云音乐的支持。通过调用非官方API，可以获取到歌曲的详细信息，包括封面和歌词等。
- 缓存机制：考虑到性能问题，我实现了一个简单的文件缓存系统。这可以有效减少对外部API的请求次数，提高加载速度。
- PJAX兼容：为了确保在使用PJAX的主题中也能正常工作，我添加了对PJAX事件的监听，并使用MutationObserver来监测DOM变化，确保播放器能在页面动态加载时正确初始化。
功能特性
经过一番努力，这个自定义音乐播放器插件最终实现了以下功能：
- 支持插入自定义音乐文件和网易云音乐
- 自动获取并显示歌曲封面和歌词（如果可用）
- 可以自定义播放器的主题颜色
- 支持设置是否自动播放
- 实现了缓存机制，提高了加载速度
- 兼容PJAX，支持动态内容加载
使用指南
要在文章中使用这个音乐播放器，有设计了两种插入方式：
1. 插入自定义音乐
可以使用以下格式在文章中插入自定义音乐：
[music src="音乐文件URL" name="歌曲名" artist="艺术家" cover="封面图片URL" lrc="歌词URL"]各参数的含义如下：
src：音乐文件的URL（必填）name：歌曲名称（选填，默认为"未知歌曲"）artist：艺术家名称（选填，默认为"未知艺术家"）cover：封面图片URL（选填）lrc：歌词文件URL（选填）
2. 插入网易云音乐
对于网易云音乐，可以使用更简单的格式：
[netease id="音乐ID"]只需要填入网易云音乐的歌曲ID即可。这个ID可以在网易云音乐网页版的URL中找到。例如，如果歌曲页面的URL是https://music.163.com/#/song?id=1234567，那么ID就是1234567。
插件配置
在Typecho后台的插件配置页面，可以设置以下选项：
- 默认主题颜色：可以设置播放器的默认主题颜色，使用十六进制颜色代码。
- 缓存时间：可以设置音乐信息的缓存时间，单位是秒，默认为24小时。
- 自动播放：可以选择是否允许音乐自动播放（不过要注意，一些浏览器可能会阻止自动播放）。
注意事项
在使用这个插件时，有几点需要注意：
- 确保服务器支持cURL扩展，因为插件需要用它来获取网易云音乐的信息。
- 插件目录下的
cache文件夹需要有写入权限，用于存储缓存文件。 - 由于使用了非官方的网易云音乐API，如果遇到获取信息失败的情况，可能需要更新API地址。