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

音の鳴るブログ

鳴らないこともある

音楽用CoffeeScriptを作ろう (2) 実行環境の構成


2013/10/09 追記: この話は古いです。構成を再見直しました。


実際に実行できる環境を作った。でもホワイトノイズを聴くしかできない。

CoffeeCollider - GitHub Pages

実行環境はこういう構成になっている。

f:id:mohayonao:20131008112822p:plain

  • window がコード(通常使用のJavaScript)を実行する場所
  • iframe は言語ライブラリの実装場所、CoffeeColliderのコードはここで実行される
  • worker は信号処理を行う場所

わざわざ iframe を経由するのはライブラリでグローバル変数やプロトタイプ拡張を行いたいから。iframe は sandbox でセキュリティ的な効果も得られるかと思ったけど、iframeやスクリプトタグを動的に挿入するやりかた(こういうの)だと allow-same-origin を付けないと動かないっぽい。どうにか改善したい。信号処理は WebWorker でやる必要はないと思うけど、こうしたほうが格好良い気がする。デモページのホワイトノイズもWebWorker産の貴重なホワイトノイズなのであった。

使い方は難しくならないようにした。以下のような感じ。

<script src="coffee-script.js"></script>
<script src="coffee-collider.js"></script>
var cc = new CoffeeCollider();
cc.exec("10pi", function(res) {
  console.log(res); // <-- 31.41592
});
cc.play();

スクリプトは機能ごとに3種類に分けたほうがよさそうだけど使い方の説明とか面倒になるので、1つのスクリプトを使いまわしてコンテキストによって動作を切り替えるようにした(こういう感じで)。

コードは amd で、ビルドしたりするのは grunt を使っている。次はそのことを書きます。