Aplayer

Href: https://github.com/DIYgod/APlayer
Document: https://aplayer.js.org/#/zh-Hans/
Hexo-Aplayer: https://github.com/MoePlayer/hexo-tag-aplayer

Install hexo-tag-aplayer

npm install hexo-tag-aplayer --save

Import CDN

cdn:
  css:
    aplayer: https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css
  js:
    aplayer: https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js
    meting: https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js

Use

.md

{% meting "2800911035" "netease" "playlist" "autoplay" "mutex:true" "listmaxheight:340px" "preload:auto" "theme:#00c4b6"%}

具体参数详见官方文档

.pug

Pug Document

Href: https://pug.bootcss.com/

aplayer.pug

doctype html
link(rel='stylesheet', type='text/css', href='https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css')
script(type='text/javascript', src='https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js')
#aplayer
script(type='text/javascript').
  const ap = new APlayer({
  container: document.getElementById('aplayer'),
  fixed: false,
  mini: false,
  autoplay: false,
  theme: '#00c4b6',
  loop: 'all',
  order: 'list',
  preload: 'none',
  volume: 0.7,
  mutex: true,
  listFolded: false,
  listMaxHeight: 90,
  lrcType: 1,
  audio: [
	  {
		  name: 'xxx',
		  artist: 'xxx',
		  url: 'xxx.mp3',
		  cover: 'xxx.jpg?param=300x300',
		  lrc: 'string',
		  theme: '#00c4b6'
	  },
  ]
  });
  // ap.init();

在需要展示的地方包含：

include ./includes/aplayer.pug

Personal Configure

根据官方文档参数指南个性化配置