html/Javascriptで大型ピアノをレンダリングする

Question

私は、新しいWebオーディオAPIを使用してhtml5オーディオアプリケーションを開発しています。これは、ほとんどの音楽で使用されているノートを描画できるキーボードグリッド「pianoroll」です私はこれを作成する2つの方法について考えていました。私たちは、html要素で作業しているし、そのイベントとメソッドを使用することができますので、

1. ノートを描画するために大規模なHTMLテーブルを作成し、細胞内のタグを作成
   • PROノート操作が簡単です。
   • CON私は巨大なテーブルを使っていくつかのプロジェクトを行いました。私の経験のブラウザは、その多くの要素を扱うときに遅くなる傾向があります。
2. グリッドをレンダリングするためにキャンバスを作成し、作るために多くの努力を必要とするいくつかのスマートキャッシュ
3. CONで巨大なテーブルと比べた場合
   • PROをレンダリングするために速いだろノートノート操作
   • CONまだ巨大な画像をスクロールしています。

私はオーディオのレンダリングが遅い応答インタフェースによって影響されるべきではないので、ユーザーが任意のグリッチなしでピアノロールの内側にスクロールすることができるはずで最も資源に優しい方法を使用する必要があります。

私は、ビューポートのサイズでキャンバスを作成し、ユーザーがスクロールするときにレンダリングさせることができました。これがもっと速くなるかどうかわかりませんが、キャンバスは小さくなりましたが、 テーブルの場合、ノートが表示されなければならないときにメモを入れられる固定セルを使用できますが、グリッドサイズだけでスクロールすることができるためスムーズなスクロールはありません（本当に大きな問題ではありませんそれは十分速い）、静的なテーブルよりも多くの再レンダリングが必要になります。

私は見落とされていますが、どのソリューションが最もリソースに優しいのですか？

Answer 1

あなたが言及した理由の両方のためにここにテーブルに触れることはありませんし、また、黒いキーをきちんと差し込みます。

私はキャンバスに傾いています。なぜなら、本当に速く、リソースの使用量が固定されているからです。ピアノロールのピクセルだけです。ピアノ・キーも長方形であるため、ピッキング・ロジックはそれほど悪くないでしょう。

しかし、イベントのオブジェクトとしてキーを使用することをお勧めする場合は、前述のように、ベクターグラフィックスを使用する方法があります。 d3.js mbostock.github.com/d3/は、ロールの作成、イベントのキーへの割り当て、スムーズなアニメーションスクロールに役立つ、DOMベースのビジュアライゼーション用の優れたJSライブラリです。あなたはHTML（DIVs、say）やSVGをレンダリングするのに使うことができます。