三つ子の魂百まで? HTML5 + JavaScript でWebシンセを作りたい! 今年(2012 年)の初夏ごろから、WebAudioSynth や、WebModular など、HTML5 + JavaScript で作られたソフトシンセが次々と登場してびっくりさせられました。Web ブラウザ上でさくさく動く手軽さと、それでもしっかりした音が出る実用性に二度びっくり。その後すぐに発表された、WebMidiLink で Web シンセ達が連携して動く!と、三度もびっくりさせられました。 そんな勢いに触発されて、私も Web Audio API を使ったシンセを作り始めました。最初はスライダーと、鍵盤代わりの四角い画像が一つだけという、シンプルな UI の 4 オペレータ FM シンセサイザーでした。 初期のプロトタイプ。4オペレータ分の ADSR + Ratioと、鍵盤代わりの四角い画像
HTML5のAudioオブジェクトとJavaScriptで簡易ドラムマシンを作ってみた » 音楽ネタ全般 [編集] 前に書いた 主要ブラウザの HTML5 の Audio 要素の対応状況を調べた記事に続いて、HTML5 Audio ネタ第二弾です。 今回は audio タグで再生ファイルを指定するのではなく、JavaScript で Audio オブジェクトを複数生成したものを速いタイミングで鳴らしてどれくらい反応できるのか見てみようということで、簡単な16ステップのドラムマシンを作ってみました。 すで同じような記事を書かれている方が何人かいるので、二番煎じ(三番…いや五番煎じくらいか)ではありますが今回はとりあえず自力で。 グリッドの間に何かあるように見えるのは錯視です ↓テストページはこちら » HTML5のAudioオブジェクトとJavaScriptで作った簡易ドラムマシン Int
前のエントリでこんなことを書きました。 JavaScriptで波形データを読み書きすることができる。しかし再生するのは難しい。 HTML5のaudioタグとData URIを組み合わせればできないこともないが、コストが大きすぎる。 コストが大きいのは音声ファイルが大きいからです。50MBある波形をいちいち変換してられません。 でも小さい波形ならできるかもしれない! ということでやってみました。 基本的なアイディア 波形データをつくる(数値の配列) 波形をバイナリ列に変換する バイナリ列にWAVヘッダを付加する Base64エンコード audioタグのsrc属性に指定 audioを再生 つくったもの http://yanagiatool.appspot.com/jsaudio/mmltest.html シンプルなMMLプレイヤーです。JavaScript + HTML5。 ベロシティとかルー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く