网站插入 Aplayer/网易云 音乐播放器
安装插件
插件需要在Hexo中使用
安装hexo-tag-aplayer
插件:
1 | $ npm install --save hexo-tag-aplayer |
为了方便操作,直接使用Aplayer插件中的MetingJS
(基于Meting API
的 APlayer 衍生播放器)
在 Hexo 配置文件 _config.yml 中设置:
1 | aplayer: |
不安装插件
同样也是使用的Aplayer中的MetingJS
直接在界面中引入alplayer和meting需要的css文件和js文件
1 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css"> |
配置使用
引入完Aplayer中和MetingJS后,就可以在界面中中使用 MetingJS
播放器了;
单曲:
1 | {% meting "1405349492" "netease" "song" "theme:#555" "mutex:true" "listmaxheight:321px" "preload:auto" %} |
预览:
歌单:
1 | {% meting "5068325488" "netease" "playlist" "theme:#555" "mutex:true" "listmaxheight:321px" "preload:auto" %} |
预览:
相关配置:
列1 | 列2 | 列3 |
---|---|---|
选项 | 默认值 | 描述 |
id | 必须值 | 歌曲 id / 播放列表 id / 相册 id / 搜索关键字 |
server | 必须值 | 音乐平台: netease, tencent, kugou, xiami, baidu |
type | 必须值 | song, playlist, album, search, artist |
fixed | false | 开启固定模式 |
mini | false | 开启迷你模式 |
loop | all | 列表循环模式:all, one,none |
order | 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播放器;
以网易云为例,网页端点击生成外链播放器即可生成外链代码,如我的某个歌单生成外链。
可以在自己博客页面中嵌入插件:
1 | <iframe |
效果:
后记
toc
点击后点击后无法跳转问题,原因是aplayer播放器与toc
不兼容;
解决方法:
引入此js,替换掉aplayer原本的js:
1 | https://cdn.jsdelivr.net/gh/ooahz/source@latest/Aplayer/APlayer.min.js |
评论