最近のトラックバック

スポンサード リンク


  • Google
    Web sketch.txt-nifty.com

リンク

« GAE上のdjangoで日本語版truncateを作る | トップページ | あけましておめでとう2011 »

VexFlow使ってみた

 MOONGIFTさんで紹介されていたVexFlowが面白そうだったので試してみた。
 が、思いのほか面倒だったので軽くまとめてみる。

 まず判ったことは
  • VexFlowはJavaScriptのライブラリ。
  • VexFlowには楽譜のパーツを指定位置に描画する機能しかない。
  • VexTabはVexFlowを利用したライブラリ。
  • VexTabは、簡易言語からタブ譜(+通常の楽譜)を生成してくれる。
 ああ~VexTabのタブ譜じゃない普通の楽譜版が欲しかった…!

 仕方ないのでVexFlowのサンプルを覗いてみたのだけど、JavaScripterでない自分には分かりづらい! なにjqunitって!
 同じような人がいるかもしれないので、ガンガン削ってシンプルな状態にしたソースを公開してみる。

  1. まずはここからzipをダウンロード。
    gitをインストールしなきゃいけないのかと思ったけどそんなことはなかった。
  2. sconsを使ってライブラリを圧縮。
    sconsはmakeのようなビルドツール。python1.5.2以上の環境が必要らしい。
    うまくいけばhttp://www.vexflow.com/vexflow.jsにあるようなのが出来上がる。
  3. 以下のようなソースを書く。

test.html

<html>
  <head>
    <title>VexFlow Tests</title>
    <style type="text/css">
      div.testcanvas .vex-tabdiv {
      background: #eed;
      padding: 10px;
      border: 10px solid #ddc;
      }

      div.testcanvas .name {
      font-family: Arial, sans-serif;
      font-size: 18px;
      padding: 10px;
      color: #554;
      }
    </style>
    <!-- Compiled Source -->
    <script src="../vexflow.js"></script>
    <!-- Test Sources -->
    <script src="support/jquery.js"></script>
    <script src="test_helper.js"></script>
    <script src="test.js"></script>
    <script>
      $(function() {
      Vex.Flow.Test.StaveNote.Start();
      });
    </script>
  </head>
  <body>
    <div id="vexflow_testoutput"></div>
  </body>
</html>

test_helper.js

/**
 *  Simple VexFlow Test Support Library
 *  forked from "VexFlow Test Support Library" by Mohit Muthanna 2010
 */

Vex.Flow.Test = {}

Vex.Flow.Test.genID = function() {
  return Vex.Flow.Test.genID.ID++;
}
Vex.Flow.Test.genID.ID = 0;

Vex.Flow.Test.createTestCanvas = function(canvas_sel_name, test_name) {
  var sel = Vex.Flow.Test.createTestCanvas.sel;
  var test_div = $('<div></div>').addClass("testcanvas");
  test_div.append($('<div></div>').addClass("name").text(test_name));
  test_div.append($('<canvas></canvas>').addClass("vex-tabdiv").
      attr("id", canvas_sel_name).
      addClass("name").text(name));
  $(sel).append(test_div);
}
Vex.Flow.Test.createTestCanvas.sel = "#vexflow_testoutput";

/**
    Canvasを連番IDで作成し、登録された関数で譜面の描画を行う。

    name    譜面のタイトル
    func    登録する関数
    params  パラメータ
**/
Vex.Flow.Test.runTest = function(name, func, params) {
  test_canvas_sel = "canvas_" + Vex.Flow.Test.genID();
  test_canvas = Vex.Flow.Test.createTestCanvas(test_canvas_sel, name);
  func({ canvas_sel: test_canvas_sel, params: params },
  Vex.Flow.Renderer.getCanvasContext);
}

test.js

/**
 * VexFlow - Simple Score
 * forked from "Basic Tests" by Mohit Muthanna 2010
 */

Vex.Flow.Test.StaveNote = {}

Vex.Flow.Test.StaveNote.Start = function() {
  Vex.Flow.Test.runTest("Basic Score", Vex.Flow.Test.StaveNote.displacements);
}

Vex.Flow.Test.StaveNote.showNote = function(note_struct, stave, ctx, x) {
  var note = new Vex.Flow.StaveNote(note_struct);
  var tickContext = new Vex.Flow.TickContext();
  tickContext.addTickable(note).preFormat().setX(x).setPixelsUsed(20); // 左端からのオフセット座標
  note.setContext(ctx).setStave(stave);
  note.draw();
  return note;
}

Vex.Flow.Test.StaveNote.displacements = function(options, contextBuilder) {
  var ctx = new contextBuilder(options.canvas_sel, 600, 140);
  ctx.scale(0.9, 0.9);      // スケール
  ctx.fillStyle   = "#221"; // 色

  var stave = new Vex.Flow.Stave(10,   // X座標
                                 10,   // Y座標
                                 550); // 横幅
  stave.setContext(ctx);
  stave.draw();

  var showNote = Vex.Flow.Test.StaveNote.showNote;
  var notes = [
    { keys: ["c/4", "e/4", "a/4"], duration: "w"},
    { keys: ["c/4", "e/4", "a/4"], duration: "h"},
    { keys: ["c/4", "e/4", "a/4"], duration: "q"},
    { keys: ["c/4", "e/4", "a/4"], duration: "8"},
    { keys: ["c/4", "e/4", "a/4"], duration: "16"},
    { keys: ["c/4", "e/4", "a/4"], duration: "32"},
    { keys: ["c/4", "e/4", "a/4"], duration: "h", stem_direction: -1},
    { keys: ["c/4", "e/4", "a/4"], duration: "q", stem_direction: -1},
    { keys: ["c/4", "e/4", "a/4"], duration: "8", stem_direction: -1},
    { keys: ["c/4", "e/4", "a/4"], duration: "16", stem_direction: -1},
    { keys: ["c/4", "e/4", "a/4"], duration: "32", stem_direction: -1},
    { keys: ["c/4"], duration: "wr"},
    { keys: ["c/4"], duration: "hr"},
    { keys: ["c/4"], duration: "qr"},
    { keys: ["c/4"], duration: "8r"},
    { keys: ["c/4"], duration: "16r"},
    { keys: ["c/4"], duration: "32r"},
    { keys: ["x/4"], duration: "h"}
  ];

  // stave.drawVerticalBar(310); // 小節線

  for (var i = 0; i < notes.length; ++i) {
    var note = notes[i];
    var staveNote = showNote(note, stave, ctx, (i + 1) * 25);
  }
}

おしまい。
ここからどうしようかなー。

« GAE上のdjangoで日本語版truncateを作る | トップページ | あけましておめでとう2011 »

javascript」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/5373/49719606

この記事へのトラックバック一覧です: VexFlow使ってみた:

« GAE上のdjangoで日本語版truncateを作る | トップページ | あけましておめでとう2011 »

ブログパーツ



2015年5月
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
無料ブログはココログ