hexo-tag-abcjs

Helps you to render standard music notation with abcjs on your blog posts

Install

npm install --save hexo-tag-abcjs

Configuration

You can configure this plugin in _config.yml.

abcjs:
  js: '/js/abcjs_midi_5.9.1-min.js',
  css: '/css/abcjs-midi.css',
  midi: true,
  animation: true,
  animationColors: ['#000000', '#3d9afc']
  options: {
    startingTune: 0,
    print: false,
    visualTranspose: 0,
    scale: 1,
    responsive: 'resize',
    inlineControls: {
      loopToggle: true,
      standard: true,
      tooltipLoop: 'Click to toggle play once/repeat.',
      tooltipReset: 'Click to go to beginning.',
      tooltipPlay: 'Click to play/pause.',
      tooltipProgress: 'Click to change the playback position.'
    }
  },
  scriptId: 'hexo-tag-abcjs'

• js - The abcjs library url. default: /js/abcjs_midi_5.9.1-min.js
• css - The abcjs style url. default: /css/abcjs-midi.css
• midi - Whether enable midi audio. default: true
• animation - Whether enable absjs animation. When true, highlights the current notation. default: true
• animationColors - The animated notation color. default: ['#000000', '#3d9afc']
• options - The abcjs Configuration. default as above
• scriptId - The id of inserted script tag. default: hexo-tag-abcjs

Usage

{% abcjs [autoplay] [no-midi] [no-animation] %}
here is your abcString
{% endabcjs %}

• autoplay - Enable autoplay
• no-midi - Disabled midi audio
• no-animation - Disabled audio animation

Example

The following is a simple demo:

{% abcjs autoplay %}
X: 22
T:Money Lost
M:3/4
L:1/8
Q:1/4=100
C:Paul Rosen
S:Copyright 2007, Paul Rosen
R:Klezmer
K:Dm
Ade|:"Dm"(f2d)e gf|"A7"e2^c4|"Gm"B>>^c BA BG|"A"A3Ade|"Dm"(f2d)e gf|"A7"e2^c4|
"Gm"A>>B "A7"AG FE|1"Dm"D3Ade:|2"Dm"D3DEF||:"Gm"(G2D)E FG|"Dm"A2F4|"Gm"B>>c "A7"BA BG|
"Dm"A3 DEF|"Gm"(G2D)EFG|"Dm"A2F4|"E°"E>>Fy "(A7)"ED^C2|1"Dm"D3DEF:|2"Dm"D6||
{% endabcjs %}