読者です 読者をやめる 読者になる 読者になる

攻めは飛車角銀桂守りは金銀三枚

ITとアコースティックギター、そして日常のひとこま。

ギターコードダイアグラム(コード表)の画像を生成するJavascriptバージョンアップしました

音楽
スポンサーリンク

以前に作成したギターコードダイアグラム(コード表)の画像を生成するJavascriptですが少しだけバージョンアップしました。
www.fair-skinned-monster.com

バージョンアップ内容

  • ベース音は◎で表現されます(ベース音は先頭に「B」を付けて下さい)。
  • 出力した画像がInternet Explore(IE)でも保存できるようになりました。

これに伴い内部処理として「canvasタグ」を「imageタグ」に置き換えています。

画像の形式は「png」で出力されます。

使用法

使用方法はヘッダーで

<script src="http://tsugani.com/js/chord_maker.js" charset="Shift_JIS"></script>

と記述します。(JQueryも必要なんでロードしてない人はして下さい。)

次にギターコードダイアグラム(コード表)を表示したいところにcanvasタグを作ります。

<canvas class="gchord" width="128px" height="128px" chordwidth="128px" chordheight="128px" chord="0|1|0|2|B3|0" chordname="C"></canvas>

各パラメータは

  • class名は「gchord」にします(固定で必須)。
  • widthは「128px」にします(固定で必須)。
  • heightは「128px」にします(固定で必須)。
  • chordwidthは実際の表示される画像の横幅(指定なしの場合は「128px」)。
  • chordheightは実際の表示される画像の高さ(指定なしの場合は「128px」)。
  • chordはダイアグラムのポジションです左から1弦、2弦・・・と6弦まで指定。開放弦は「0」です。ミュートは「x」です。ベース音は先頭に「B」(必須)
  • chordnameは表示するコード名。

注意事項

現在なぜかInternet Explore(IE)で
acoustic-guitar.hatenablog.com
を開くと1回目だけ異常に表示までの時間がかかりマシンに負荷がかかります。(現在、原因調査中です。)

作成された画像はご自由にお使い下さい。
ご利用にあたってはいかなる損害が発生しようとも、当方では一切責任は負えませんのでご理解、ご承知の上でご利用ください。