So-net無料ブログ作成
» スポンサーリンク

JavaScriptでチップチューン風サウンドエフェクトを生成するライブラリ : jsfx
» 音楽コンテンツ(作曲/演奏) 

JavaScript でチップチューン風のシンセサウンド波形を生成して再生できる効果音ジェネレータライブラリ jsfx を紹介。

ソースファイルは GitHub で公開されています。
MIT ライセンスなので再利用・改変の際は著作権表示が必要。



 HTML5 の Audio オブジェクトで WAV 形式の再生をサポートしているブラウザ(Firefox 3.6、Chrome 9、Safari 5 など)で実行可能です。

 IE9 beta は HTML5 の Audio タグには対応していますが、JavaScript から Audio オブジェクトが生成できないため利用できません。(IE6~8 は HTML5 非対応なので利用不可)

デモページ

» デモはこちら (Firefox 3.6~、Chrome 9~、Safari 5~ 推奨)


 スタンドアローンのチップチューン効果音作成アプリ sfxr がベースになっていて、JavaScript で音色パラメータを元に動的に波形を生成して WAV 形式の生データに変換したものを HTML5 の Audio オブジェクトで再生するようになっています。

 参考までに、同じコンセプトで ActionScript3 で書かれた Flash ベースの as3sfxr というのもあったりしますが今回は説明省略。

ライブラリの構成

ライブラリのソースコードは以下の4つのファイルで構成されています。

 js ファイル機能の概要
 jsfx.js 音色パラメータから音声波形データを生成
 audio.js 波形を WAV 形式データに変換して Audio オブジェクトに準備
 jsfxlib.js 複数の音色のシンセパラメータを渡して Audio オブジェクトを生成
 jsfxgui.js デモページと同じ GUI が使えるフロントエンド

 パラメータを内部でセットして再生する場合は、GUI の jsfxgui.js は必要なく、以下のような手順で利用することができます。

<script src="../lib/audio.js"></script>
<script src="../lib/jsfx.js"></script>
<script src="../lib/jsfxlib.js"></script>
<script>
// 注: 全てのパラメータを含んでいません
audioLibParams = {
  test : ["saw",0.0000,0.4000,0.5810,0.2640,2.1270......],
  explosion : ["noise",0.0000,0.4000,0.0000,0.2040......]
};

samples = jsfxlib.createWaves(audioLibParams);
samples.test.play();
samples.explosion.play();
</script>

 上の例は test と explosion の2つの音色をセットアップして再生する単純なサンプルで、音色に対応したオブジェクトの samples.test と samples.explosion は play() の他にも HTML5 の Audio オブジェクトの関数やプロパティが利用できるようになっています。

 2年ほど前に「JavaScript で動的に WAV データを生成して Data URI スキームに変換したものを embed 要素で再生させる方法」というのを紹介したことがあったのですが、こちらのほうがより複雑な音色が作成できて簡単に利用できるので、アイディア次第でいろいろ使えそう?

そのうちもっと本格的な JavaScript シンセ を作る人が出てきたりして。
自分はそこまでノウハウないから今は無理ですけど…

[関連サイト]
 jsfx
 sfxr
 as3sfxr


JavaScriptパターン ―優れたアプリケーションのための作法

JavaScriptパターン ―優れたアプリケーションのための作法

  • 作者: Stoyan Stefanov
  • 出版社/メーカー: オライリージャパン
  • 発売日: 2011/02/16
  • メディア: 大型本
nice!(1)  コメント(0)  トラックバック(0)   » カテゴリー:音楽コンテンツ(作曲/演奏)
permalink
trackback


» スポンサーリンク


nice! 1

コメント 0

コメントを書く

名前:[必須]
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

Facebook コメント

トラックバック 0

トラックバックの受付は締め切りました

iTunes Store 音楽アプリベストセラー
for iPad





for iPhone/iPod touch





for Mac