アコースティックギター超入門

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

アコースティックギター超入門

アコースティックギター超初心者のための入門ブログ

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

ギターコードダイアグラム

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



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

不具合修正です。

バージョンアップ内容

下記のサンプルにあるようにベース音が開放弦で押さえるフレットが5フレットのようなギターコード表を指定すると押さえる位置がずれてました。

  • フレットの開始位置を指定できるようにしました(フレットの開始位置を指定する場合は先頭に「S」を付けて下さい)。

使用法

使用方法はヘッダーで

<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>
<canvas class="gchord" width="128px" height="128px" chordwidth="128px" chordheight="128px" chord="7|S5|6|7|B0|x" chordname="Aadd9"></canvas>
<canvas class="gchord" width="128px" height="128px" chordwidth="128px" chordheight="128px" chord="7|S6|6|7|B0|x" chordname="Aaug"></canvas>
<canvas class="gchord" width="128px" height="128px" chordwidth="128px" chordheight="128px" chord="9|S7|7|B0|x|x" chordname="D"></canvas>
<canvas class="gchord" width="128px" height="128px" chordwidth="128px" chordheight="128px" chord="7|S6|7|B0|x|x" chordname="Dm"></canvas>







各パラメータは

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

注意事項

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