Skip to content
A hexo tag for rendering abc music notation on your blog posts.
JavaScript
Branch: master
Clone or download
maiwenan
Latest commit f045c42 Oct 31, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib add doc, add animation support Oct 31, 2019
.gitignore init Oct 30, 2019
README.md add doc, add animation support Oct 31, 2019
index.js add doc, add animation support Oct 31, 2019
package-lock.json add doc, add animation support Oct 31, 2019
package.json add doc, add animation support Oct 31, 2019

README.md

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 %}
You can’t perform that action at this time.