S.F. Page

Programming,Music,etc...

WebAudioModular

Web Audio APIのモジュラー接続デモを作ってみる(20) - 範囲選択機能の実装

ますます実装スピードが遅くなっている。今週は範囲選択機能を実装中。 シーケンスデータを実装するのにジェネレータをコルーチン代わりに使用しているが、関数の実行途中でyieldできる利点を生かした実装とは言い難いものがあったのだが、ちょっとだけ利点…

Web Audio APIのモジュラー接続デモを作ってみる(19) - 小節単位の移動機能を実装する

小節管理部分と、小節単位の移動機能を実装した。これで小節管理は一段落だ。 次に任意選択&カット・コピペを作ろうかなと。おっとコマンド機能を実装するのを忘れているな。全体として2割程度の実装状況だから、まだまだ作らねばならない部分がたくさんあ…

Web Audio APIのモジュラー接続デモを作ってみる(18) - 小節管理部分を作り直す

引き続きエディタを作成中である。少し前に入力や上下カーソルを移動すると音が鳴るようにしてみた。これでかなりMC-4っぽくなってきた。 ただ小節管理がちょっとこのままではまずい気がした。例えばリピートやセームメジャーの処理をするときとかね。なので…

Web Audio APIのモジュラー接続デモを作ってみる(17) - localStorageを使ってデータ保存・読み込みを作る

コードを改良するたびにテスト用のモジュラー接続を作ったりデータ入力をするのが面倒なのでlocalStorageに保存するようにしてみた。Bugはあるがとりあえず保存・読み込みができるようになった。データ形式はJSONである。例によってChromeのみで動作する。 h…

Web Audio APIのモジュラー接続デモを作ってみる(16) - シーケンスエディタ作成中

ぼちぼち作っていますよ。 現状の動くバージョンはこれ。Chromeでのみ動作する。 https://sfpgmr.github.io/webaudiomoduler/dist/20151205/ どの程度実装できたのは以下の通り。まだまだ全然である。この一覧はSTED2のHTMLマニュアルを元にしている。 キー …

Web Audio APIのモジュラー接続デモを作ってみる(15) - シーケンスエディタ引き続き作成中

カーソルの動き、イベントの追加・削除が動くようになってきた。Undo/Redoも。画面は変わりないように見えるが。さらにメジャーエンドで小節のステップ合計を表示できるようにしてみた。徐々にSTED2のエディタっぽくなってきている。 しかしこのSTED2のエデ…

Web Audio APIのモジュラー接続デモを作ってみる(14) - STED2風のシーケンス・エディタを実装、あとはSTED2のこととか

STED2を実際に動かし、その動きをまねるコードを書いている。非常にゆっくりとしているが。コードを書いている途中得た知見はQiitaにもぼちぼち書いてみている。 私が書いているものは、トラックはモノトラックだし、コマンド列というものを追加しているから…

Web Audio APIのモジュラー接続デモを作ってみる(13)

ぼちぼちとシーケンスエディタを実装している。d3.js・イベントドリブン・ジェネレータによるコルーチン、の折衷方式というなんともいえないゲテモノ感漂う実装となってきている。すごいことはないのだが普通こんな作り方をしないよなーという。要するに汚い…

Web Audio APIのモジュラー接続デモを作ってみる(12)

シーケンス・エディタ部分をぼちぼち作っている。3連休で形を作りたかったんだけど、無理だった。。 エディタの動きに関してはSTED2のヘルプを観たり、アプリを動かして参考にしている。実装は汚い感じになってきた。これはあとで手を入れたくなくなるような…

Web Audio APIのモジュラー接続デモを作ってみる(11)

シーケンス・エディタ部分を実装中だが、苦手なところなので遅々として進まない。しかしスクリーンショットを撮ってみるとなかなかアプリっぽい体裁になっている。ちょっとモチベーションが上がる。 4CHを同時に編集できるような画面構成にするつもりである…

Object.observe()は使えなくなる

今作っているWeb Audio APIデモのシーケンス・エディタのデータ・バインディング部分をどうしようかなと検討していたところ、衝撃の情報が。 tech.nitoyon.com ちょうどオブジェクトの更新とUIからの反映をどうしようかと考えていたところだった。knockoutや…

MC-4のマニュアルを読む

今作っているシーケンサーの参考にするためにMC-4のマニュアルをまず読んだ。 MC-4のマニュアルはローランドのサイトでダウンロードすることができる。 www.roland.co.jp こんな古いシーケンサーのマニュアルがダウンロードできるなんて、なんてすごいんだ。…

Web Audio APIのモジュラー接続デモを作ってみる(10)

シーケンサーの実装を進めている。ようやく音が鳴るようになったところ。まだ編集画面はないし、考慮不足の部分もあるだろう。これから機能追加を進めていく。画面はJasmineのテスト画面にUIを表示してみているところ。 シーケンサーはMC-4に敬意を表して4CH…

Web Audio APIのモジュラー接続デモを作ってみる(9)

モジュラー接続デモもぼちぼち作っている。昨日今日とEGとシーケンサーを作っている。まだハリボテレベルだが作成中の画面。 シーケンサーは単音の16トラックで、ゲート情報(CV/GATEのGATEと意味合いは似ているが内容は違う)とピッチ情報(間違ってVとして…

Web Audio APIのモジュラー接続デモを作ってみる(8)

EGはサクッと作ってしまおうと思っていたが、モジュラー・グラフを考えると結構やることが多いことが分かった。 EGは他のオーディオ・ノードと見た目は同じに見える。しかしオーディオ・グラフ(いわゆるconnect()で結んでいくやつ)上のノードに含むことは…

Web Audio APIのモジュラー接続デモを作ってみる(7)

今日はエンベロープ・ジェネレータ(EG)を作ろうと、少し設計を考えて軽く実装し始めたところ。 EGはアナログシンセではほぼ必須の機能である。これがないと楽音のシミュレーションができない。 上図は典型的なADSRタイプのEGのパラメータを説明するもので…

Web Audio APIのモジュラー接続デモを作ってみる(6)

ここいらでシーケンサーを実装してみようと思う。あ、EGも一緒に作ろうと思っている。シーケンサーはステップシーケンサーで、周波数・ゲート・ベロシティを接続先ノードに送る役割を担う。ST/GT方式で実装するつもりである。その2つがあれば演奏できるから…

Web Audio APIのモジュラー接続デモを作ってみる(5)

今までgistでちょこちょこ作ってきたが、githubにレポジトリを作って管理することにした。 github.com そしてgh-pagesでサンプルを公開することにした。 https://sfpgmr.github.io/webaudiomoduler/dist/20151028/ ソースコード的にはES6モジュールを使って…

Web Audio APIのモジュラー接続デモを作ってみる(4)

いい加減な実装だが、ようやく音が鳴らせるようになり、AudioNodeの追加・削除、ノード間の接続・切断ができるようになった。だけどAudioBufferSourceNodeとかはまだ実装できていないし、エディターズ・ドラフトレベルの機能も使っている(任意のコネクショ…

Web Audio APIのモジュラー接続デモを作ってみる(3)

現在の状況は下記。相変わらずノードが動くだけだが。ようやく複数Output/Inputに対応した。 動くデモ bl.ocks.org 次にノードを追加したり、ノード間をコネクトできたりする機能をつけようと思う。音が中心のデモなのに音がなかなか鳴らないという。 これを…

Web Audio APIのモジュラー接続デモを作ってみる(2)

今日は土日に書いたコードの書き直しを行っていた。まだ書き直しは完了していない。 複数Output・Inputの対応がまだできていなかったのでその対応がメインであるが、合わせてコードが汚いのでちょっとでもきれいにしようとしている。まあきれいといっても人…

Web Audio APIのモジュラー接続デモを作ってみる(1)

ぼちぼちと作ってみている。ようやく画面が表示できるようになった。 現時点の成果物はGistに上げている。ノードをドラッグして動かせる程度であるが。 Web Audio モジュラー接続画面デモ - bl.ocks.org 今のところChrome,Firefox,Edgeで動作を確認している…

Web Audio APIのモジュラー接続デモを作ってみようと思う。

ちょっと横道にそれるが、表題の通りWeb Audio APIのモジュラー接続デモのようなものを作ってみようと思う。その成果をYMO Giga Sample Viewerに反映させようかなと思っている。 すでにそのようなデモは存在している。 Web Audio Playground このサイトすご…