jQuery.pdWave.js

概要

指定された Canvas 要素に波形が表示されます。
結構バグがあります。

※canvas 要素に id を割り当てないと動きません。

波形の計算式はこちらを丸パクリしました。

ライセンス

MITライセンス (English / 日本語) です。

ダウンロード

v1.0.0
20170324 初版

使い方1・波形を表示

波形種類 {wave: xx}
周波数 {freq: (1 <-> n <-> 100)}
音量 {vol: (1 <-> n <-> 100)}
初期位置 {phase: (1 <-> n <-> inf)}
描画線太さ {line_w: (0 <-> n <-> inf)}
描画線色 {color: "rbg()" or "rbga()"}
コールバック(頂点・最下部)

この要素は、波形が頂点に達した時(on_top:function(){})に赤に、
最下部に達した時(on_btm_function(){})に緑に変わります。

コールバック(波形連動)

下のテキストボックスには、波形の右端部分が波形の高さのうち何パーセントかが入力されます。

使い方2・キャンバス幅に依存せずに波形を表示する

まずは下の二つの波形を見てください。

どちらも与えているパラメタは同じですが、キャンバスの大きさが違うために、右側の波形の表示がおかしくなっています。

この様な場合は、{is_keep_rate: true} と {keep_rate_w: 横幅(px) } を設定し解消してください。

取り敢えず、波形はちゃんと表示されます。(波形の速度が変わります。直し方はわかりません。)