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

S.F. Page

Programming,Music,etc...

Web Audio API

Web Audioで作った波形メモリ風音源にドラム音を加えてみた。 -PCグラフィックスを懐かしむ。楽しむ。(13)

4bit/8Khzのサンプリングドラム音を加えてみた。かなりローファイな音がする。 デモページへのリンク: http://github.sfpgmr.net/graphics/devver/20160418/index.html ソースコード: GitHub - sfpgmr/graphics at f5d09ee938bf9f32afae30161edf7207e04a170…

WebGL + GLSLで作ったグラフィックス画面に、Web Audioで作成した波形メモリ風音源を加えた。 - PCグラフィックスを懐かしむ。楽しむ。(12)

少し時間がかかったが、音源を加えることができた。まだとりあえずのバージョンで、ドラム音はまだ鳴らない。 デモページ: http://github.sfpgmr.net/graphics/devver/20160417/index.html ソースコード: GitHub - sfpgmr/graphics at fffaeab29fb72ccd4d1…

WebGL + GLSLで作ったレトロPCグラフィックス画面に、Web Audioで音源を加えることにする。 - PCグラフィックスを懐かしむ。楽しむ。(11)

ちっともプリミティブの描画に移らないところが私らしいというか。 MZ-700フォントを表示してキャラグラ的なものに少し目覚め、ちょっとしたデモを行き当たりばったりに作ってみようとしている。 下は作りかけ。 デモページへのリンク: http://github.sfpgm…

HTML909

Web AudioによるTR909のクローン。懐かしいねぇ。といっても実物を触ったのは中古楽器屋の店頭以来だが。20年以上前だろうか。 icon.jp html909.com 大阪の昭和町に中古楽器屋さんがあって、そこによく通ってた。そこでYAMAHA C-1の中古とか買った。ある時…

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を同時に編集できるような画面構成にするつもりである…

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モジュールを使って…

Windows 10 Insider Preview Build 10565のEdgeのWeb Audio API

今朝起きるとPCが自動アップデートされており、ビルド番号が「10565」に上がっていた。10/12に告知されていたのだが、Web Audioに勤しんでいたせいで追っかけてなかった。 blogs.windows.com 内容はまあ小幅な修正だと思うけどね。オーディオ・ビデオ関連で…

Web Audio APIのモジュラー・インターフェースとかMODミュージシャンとかの話

Web Audio APIの仕様はファットではあるのものの、非常に面白いインターフェースだ。 しかし振り返ると、PCのソフトウェア・オーディオ・シンセシスって気が付くともう30年くらいの歴史があるんだよね。このモジュラー接続するというアイデアも、1990年代に…

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 モジュラー接続画面デモ 今のところChrome,Firefox,Edgeで動作を確認している。 ES6をの機能…

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

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

three.js + WebAudio + socket.io で作った2Dシューティングゲームを久しぶりにいじる。

久しぶりに作りかけの2Dシューティングゲームをいじる とりあえずブログカスタマイズも一段落したので、VPSサーバー内のコンテンツを整理しようとしている。以前作りかけていたシューティングゲームが動作するのかチェックしてみたところ、Chromeでは今のと…

three.js + WebAudio + socket.io – ゲーム作り(4)

socket.ioとnode.jsでTop10スコアを管理・共有する 今週はsocket.ioを使いTop10スコアをサーバーで管理・プレイヤー間で共有する仕組みを作っていた。ノーコン・キッドを観て、ゲームのTop10エントリとか結構うれしかったことを思い出したので、作ってみたく…

WebGL + three.js + Web Audio API – ゲーム作り(3)

何とかゲームの体裁に なんとかゲームとしてプレイできるようになった。まだギャラガもどきの状態のままであるが、自機をバックショットできるようにしてみたり敵を背後に配置してみたりしている。xキーでバックショットできる。 ギャラガ的な面クリアタイ…

WebGL + three.js + Web Audio API いじり – ゲーム作り(2)

今の状態 自機や自機弾、敵の動きを作っているところ。でもまだまだ。一応自機弾と敵とのあたり判定も入れてみた。 動くバージョンはこちら(要PC版Chrome) けっこう「らしく」なってきた。でも今のままだとギャラガの劣化版コピーゲームになってしまうので…

WebGL + three.js + Web Audio API いじり – ゲーム作り

自機や敵の動きを作っている 簡易シーケンサーはだいたいできたかなということで、ゲーム本体を作っている。ギャラガのようなシューティングゲームを作るべく、まずは自機の動きを作り、今は敵の動きを作っている。あの編隊飛行しながら出現して、大編隊を組…

WebGL + three.js + Web Audio API いじり - 簡易シーケンサーの改良とか

簡易シーケンサーの改良 いやもうすっかりWeb Audio APIにハマっているわけですよ。大したことしてないけど。WebGLのことなどすっかり忘れてしまっている。。。大したものを見たい場合はg200kgさんのブログを見てください。 それはさておき、簡易シーケンサ…

WebGL + three.js + Web Audio API をいじる - 簡易シーケンサーを作る

簡易シーケンサーを作る なんとなくナムコ風の波形メモリ音源を作ってみている。8音同時発音できるようになったところで、MMLっぽいシーケンサーを作って鳴らしてみた。かなりいい加減なつくりだが、まあまあいい音が鳴るように思う。4ビットで32サンプルと…

WebGL + three.js + Web Audio API をいじって音を鳴らす。

Web Audio APIで波形メモリ音源をエミュレートする ゲームを作るうえで避けて通れないのがサウンドであり、私にとってかなり興味のある部分でもある。Web Audio APIの出現によって貧弱であったブラウザのサウンド機能も強力になりつつある。波形メモリ音源な…

WebGL + Three.jsをいじる - テキストとプログレスバー表示 - Web Audio API

テキスト表示 スコアやTOP10スコアなどの情報表示用にテキスト表示オブジェクトを作成した。これはレトロなゲームでよく使われていそうな8×8キャラクタービットマップを使い文字列を表示するものである。点滅とフォントの切り換えができるようになっている…