はてなブックマーク

Web Audio APIのBiquadFilterNodeで設定するQの効きが悪いと思ったことがある。もしくは、Max/MSPのパッチを渡されてJavaScriptで再現しないといけないっ！！となった時に、音の雰囲気がどうも違ってて悩むというウェブオーディオあるあるの噂を聞いたことがあるかも知れない。 そういう諸兄のために、いくつかのフィルタレスポンスを比較して視聴できるページを作った。 https://mohayonao.github.io/biquad-coeffs/ 係数計算の部分はそれぞれ npm package として使える。 デモページでは以下の4種類を比較できる。 Audio-EQ-Cookbook.txt - フィルタ係数計算式の定番。他のやつもこれがベースになっている。 Max/MSP filtergraph~ - Max/MSPで使われるやつ。 Web Audio A

Web Music Hackathon で ＠aike1000 さんが作っていた 3Dシーケンサー を一人ハッカソンがてら自分でも作ってみた。いちおう出来たといえるレベルにはなっていて優しい感じの音が聴けます。 https://mohayonao.github.io/cubic-sequencer/ アイデア 8x8x8の3次元配列をシーケンスデータのコンテナとして使い、それをピアノロールにみたてた8x8の行列(行が音程、列が時間を表す)と8つのシーン(切り替えできるパターン)とみなす。これはXYZ軸のそれぞれの視点から取り出すことができるので、それをピアノ、パッド、ビープの3つのトラックとする。 使い方 右側の操作パネルを使います。 メインコントローラ アプリケーション全体の設定 PLY: 再生のON/OFF RND: パラメータを適当に設定 CLR: パラメータのクリア BPM: テン

ひょんなきっかけでIAMASでウェブオーディオの使い方をレクチャーすることになったので、それに合わせて用意したものです。 初学者向けということで、基礎の部分を中心にできるだけ興味をもってもらうことを目的にしています。 主に次の内容を扱っています。 オーディオコンテキスト オーディオノード ライフタイム オーディオパラメーター OscillatorNode GainNode AudioBufferSourceNode システム構成 僕の興味のせいか内容がかなり偏っている気がするのですが、これからウェブオーディオを始めたい！という人のガイドになれば良いかと思います。 肝心の講義については、普段全然しゃべらない人がいきなりたくさん喋ったみたいな状態になってしまった。アットホーム？な雰囲気だったのでまぁどうにかなったのかなという感じでした。なんでもそうだけど普段から練習するしかないですね。 書くと

コマンドラインからピロピロ鳴らせると良い。バックグラウンドにあったりして見えないターミナルの状態を音を聴くことで判断できるかもしれないし、判断できなかったとしても単純に音が鳴ると楽しい。 前回の記事では既存のコマンドの組み合わせでテキストファイルから音を取り出しました。 とはいうものの、この方法ではデータの内容がそのまま音となるため欲しい情報を欲しい音で得ることができません。そこで、今回の記事では自分でプログラムを書いて音を生成する方法について説明します。プログラムは Node.js で書いていますが、特別なパッケージは使わないので他の言語への移植/実行も難しくないはずです。 復習: KEN_ALL.CSV を聴く 前回の復習がてら KEN_ALL.CSV の音を聴いてみましょう。ここでは改行以外の文字を "x" に変換してインパルスを出力しています。("x" を 0、改行を 1 とみなし

コマンドラインからピロピロ鳴らせると良い。バックグラウンドにあったりして見えないターミナルの状態を音を聴くことで判断できるかもしれないし、判断できなかったとしても単純に音が鳴ると楽しい。 そこで、この記事では Mac/Linux でコマンドラインから音を出すための方法について説明します。ただし、Windows については調査不足のため言及しません。 play コマンドをインストールする sox という音をあれこれするためのツールがあります。 ffmpeg の音声ファイル限定版みたいなものですが、これをインストールすれば play という再生コマンドがついてくるのでこれを利用します。 SoX - Sound eXchange | HomePage ダウンロードのページ 今更聞けない目的別soxの使い方 - Qiita Linux を使っていて ALSA aplay コマンドがある場合は so

% npm install -g mimi-grep これで mimi-grep コマンドがインストールされる。 使い方は % mimi-grep <filename> と、するだけでデフォルトだとファイルの各文字の文字コードをMIDIノート番号として高速に再生する。 -c オプションで作曲アルゴリズムを切り替えられる。 池田亮司っぽいのとか % mimi-grep -c beep <filename> ドローン。 % mimi-grep -c drone <filename> 他にはリズムマシンがある。 % mimi-grep -c drum <filename> 音を出す部分は node-speaker というライブラリを使っているのだけど、インストールに失敗するとか使いたくない場合は、 # mac の場合 SoX play コマンドでも再生できる % mimi-grep --stdo

github.com 以前から Web Audio API に興味があって暇なときには仕様を読んだりしていたのですが、だいたい分かったぞ！！と思って勢いで書きました。すべて JavaScript で書いてあるのでブラウザはもちろん Node.js でも動作します。Node.js で動かす場合はレンダリング結果をストリームとして出力するかwav形式でエクスポートできます。 オンラインのデモ (web-audio-engine と native Web Audio API の比較ができます) web-audio-engine :: demo 先行する事例の node-web-audio-api WAAPISim : Web Audio API Simulator と比較すると、 チャネルの動的適応 (入力のチャネル構成によって下流のチャネル構成が変化する) や AudioNode のライフサイ

年末なので今年書いた npm モジュールをまとめてみます。 OscMsg v0.3.0 OSC のメッセージを JSON にデコード/エンコードするライブラリ。去年からちょくちょく OSC を使って Node.js と openFrameworks や Max/MSP と連携する案件を手伝ったりしていたので非常に重宝した。似たようなライブラリに node-osc-min というのがあるのだけど、壊れたデータを渡したときに例外が出るのとかブラウザ対応がいまいち気に入らなかったので自分で作った。とはいえブラウザで使うことはないなーという印象。 WebAudioScheduler v1.0.0 Web Audio API を使うときに必読の この記事 をベースに作ったスケジューリングライブラリ。時間と関数とパラメータを登録しておくと良いタイミングで呼び出してくれる。Web Audio API を

Google Chrome の右上に本名が表示され続けてだるい。前は簡単に消せたけど今回のは黒い画面で何か入力しないといけないとか意味不明で困っていたのだけど、名前のところをクリックすると編集可能っぽいので、できるだけだるくない名前にした。

Web Music ハッカソン で WebSocket で演奏情報を分散配信して複数のブラウザでひとつの音楽を演奏するシーケンサを作って、頑張った賞みたいなので LittleBits のTシャツをもらいました。 コンセプト的なやつ サーバーがある サーバーは音楽の演奏情報を持っている MIDIコントローラー等でサーバーの演奏情報を操作できる たくさんのクライアントがある (10-50台くらいを想定), WebSocket で接続 それぞれのクライアントにバラバラに演奏情報 (JSON) を送信する 空間全体でひとつの音楽になる 経緯 去年からちょくちょくウェブオーディオを使ったインスタレーションとかライブを手伝っているのですが、そこで得られたノウハウが全然形として残っていなかったので整理したかったのと、あと今後のために試しておきたかったこととか React とか flux とかの最新のトレ

7月25日に WebMusicハッカソン #4 @kyoto というのがあるのですが、ちょうど良い機会なので僕が作ったウェブ音楽用簡単超絶便利ライブラリを紹介したいと思います。 WEB AUDIO SCHEDULER 2 つの時計のお話 - Web Audio の正確なスケジューリングについて - HTML5 Rocks Web Audio で必須な割に難しいのがスケジュール管理で、いちおう上の記事のやり方が推奨なのですが、そのままやるとかなり面倒くさい。のだけど、このライブラリを使うと面倒な部分は気にせず、いつ何をしたいのかを書くだけで良くなる。以下は簡単なメトロノームの例。 var gcguard = []; var audioContext = new AudioContext(); var scheduler = new WebAudioScheduler({ context: a

./index.html を読み込んで index.html でアクセスできるようにする。 var fs = require("fs"); var index = { html: fs.readFileSync("index.html", "utf-8") }; console.log(index.html); 以上です。

リテラルとは コンピュータプログラムのソースコードなどで、特定のデータ型による値を直接表記する際の書式。また、そのような書式に従って記載された値。 JavaScriptにも数値や文字列、オブジェクト、正規表現などのリテラル表現があるのだけど、意外と知られていないものに 小銭リテラル がある。小銭リテラルはその名のとおり小銭を表現する書式で仕様では以下のように定義されている。 KozeniLiteral :: DecimalIntegerLiteral KozeniParts(opt) KozeniParts :: KozeniPart KozeniParts KozeniPart KozeniPart :: KozeniDelimiter KozeniDigits KozeniDigits :: DecimalDigit DecimalDigit DecimalDigit KozeniDe

function coin(x) { return Math.random() < x; } こういう関数があったとして、どうテストを書くのか。 ぱっと思いつくのはこういう感じで、Math.random 自体を上書きするやり方。 describe("coin(x)", function() { it("works", sinon.test(function() { this.stub(Math, "random", function() { return 0.5; }); assert(coin(0.4) === false); assert(coin(0.5) === false); assert(coin(0.6) === true); })); }); このやり方、たしかに間違っていないんだけど、関数のインターフェース自体を変更した方が良いと思う。 function coin(x,

openFrameworks や Max/MSP, SuperCollider などで良く使われるメッセージングプロトコルに OSC (Open Sound Control) というのがあって、どんなものかについては この辺 を参照して欲しいのだけど、通信プロトコルにUDPが使われていて、基本的には A -> B というように一対一でしかメッセージを送信できない*1。 そこでOSCを中継するハブのようなものがあれば、複数端末にメッセージ送信ができて便利そうなので作ってみた。頑張って作った構成図とGIFアニメが以下。 使い方 具体的なコマンド等は README を参照してもらうとして、大雑把な流れを示す。 あらかじめ OscHubServer を立ち上げる 各クライアントで OscHubClient を立ち上げて OscHubServer に接続 Max/MSP とかで OscHubClie

今、奈良で 町家の芸術祭 はならぁと というイベントが開催されていて、そこで展示されているインスタレーション作品にウェブオーディオが使われているので様子を見に行った。SjQの魚住勇太さんの作品で詳しくはここに書いてある。 http://yutauozumi.com/cell/details/ 時計仕掛けの生命をイメージして設置された装置。装置は部屋の気温や光といった環境と反応しながら、音を紡ぎ、空間を満たして行く。その動きや音は、刻々と変化していく。装置の内部にはいくつかのアームが設置されている。それらのひとつひとつが、単なる部品ではなく、個体として、互いに反応する動きを見せる。その様子は、分ごと、時間ごと、日ごとに、変化する。それは常時、音に変換されることで、一つの流れをもったサウンドスケープとしてリアルタイムで奏でられる。 会場: 日+月+星 会場は複数の人工生命デバイスがカチャカチャ

Web Audio API の AudioParam の値を可視化できるやつを作った。 AudioParam Viewer コードを書いて実行(eval)すると30秒分の値の遷移を記録してグラフ表示します。param というのが操作する AudioParam のインスタンスで、Ctrl+O か Ctrl+Space で操作関数を補完できます。 仕組み Web Audio API はリアルタイムでオーディオ処理をするためのAPIだと思われがちだけど、OfflineAudioContext というのを使えば静的なオーディオ処理もできます。以下は簡単な使い方。レンダリング用のインターフェースがあるだけで基本的には AudioContext と同じように使えます。これを使うと30秒の処理を一瞬で行うことができるので、それを使って常に 1 を出力する AudioBufferSource とパラメータ

openFrameworks や Max/MSP, SuperCollider などで良く使われるメッセージングプロトコルに OSC (Open Sound Control) というのがあって、どんなものかについては この辺 を参照して欲しいのだけど、node-osc-min というライブラリを使えば OSC のメッセージを JavaScript でも解釈できるのでそれで遊ぶ話です。 名前に node と付いているけどバージョン 0.2.0 からブラウザにも対応していて、以下のコマンドでブラウザバージョンをビルドできます。 $ git clone https://github.com/russellmcc/node-osc-min.git $ cd node-osc-min $ npm install --dev $ npm run-script browserify $ ls build

またか。と言われてしまいそうだけど、またウェブ楽器プログラミング用のライブラリを作った。 以前に timbre.js というライブラリを作ったのだけど、それの刷新版という感じです。 デモ ドキュメント 名前の由来 特徴1: 機能性よりパフォーマンスを重視 以前は多くの動作環境をサポートするためにすべての信号処理を JavaScript で書いていたのですが、それゆえにパフォーマンスに問題があって(Issueでよく指摘された)、neume.js では IE や node.js での動作を諦めて Web Audio API の機能を大活用することでパフォーマンス問題を解決しました。デモでは three.js や gretro と一緒に動作する様子が確認できます。 特徴2: Web Audio API の面倒な部分を抽象化 Web Audio API は多機能なんだけど、部品が細かすぎて使いこな

開発中に node.js でもテストできるように Web Audio API のテスト用APIを書いた。 最終的なオーディオ処理の結果については耳で確認するしかないのだけど、音を聞くまでもない段階のときに AudioNode(音を出す部品) がどう接続されているのかを調べたりできる。便利だと思うけど、これがあって嬉しい人は少ないと思う。あるのはインターフェースと型のチェックくらいで、信号処理的なのは一切していません。こういう事ができます。 グラフの確認 JSON化すると接続状態が返ってくるのでテストできる。 var ctx = new AudioContext(); var osc = ctx.createOscillator(); var amp = ctx.createGain(); osc.type = "sawtooth"; osc.frequency.value = 220; o

2014.08.20 名前を変更しました。 wamml => MMLEmitter Web Audio API用のMMLイベントシーケンサーを作りました。 MMLEmitter- GitHub MMLEmitter - online playground 概要 音楽プログラムを大雑把に説明すると 楽器 (音色) 譜面 (音程とタイミング) の二つの要素を解決するプログラムと言えます。MMLEmitter はこの 譜面 の部分のみを解決するライブラリです。AudioContext と MML を引数にシーケンサーを生成して起動すると、MML に記述したタイミングでイベントが発火するので、そこで音を出す処理を行います。Web Audio API 依存なので今のところ(サポートされないかぎり) IE では動作しません。あ、MML というのは楽譜を文字列で表現するための記法です。 MML - Mu

GIFアニメというのがあって、普通の動かない画像よりもジフギフ動くGIFアニメのほうが格好良いぞということで、みんな頑張ってGIFアニメを作っている。じゃあ、逆にGIFアニメを普通の動かない画像にしたら最高に格好悪いのではないかと思って試した。 GIFアニメをドラッグ＆ドロップするとアニメーションの各フレームを合成して静止画をつくる。 zanzo - the.mohayonao.com GIFのデコードにはこのライブラリを使った。 deanm/omggif 作例 こんな感じとか。 こんな感じになる。

chai というアサーションライブラリがあって、テストフレームワークの Mocha と合わせてよく使われていると思うのだけど、その chai のプラグインを書いた。 chai-deep-closeto このプラグインを使うと配列にも closeTo が使えるようになる。 expect([ 1.5, [ 2.5, 3.5 ], 4.5 ]).to.be.deep.closeTo([ 1, [ 2, 3 ], 4 ], 0.5); chai のプラグイン chai はプラグインで便利機能を拡張する前提で設計されていて、各種プラグインが公開されている。たとえば有名なのではテストスパイとかスタブを扱う Sinon.JS を chai のインターフェースで使える sinon-chai とかがある。他にもある → Chai Plugins chai のプラグインの書きかた 簡単に書ける。プラグインを適

使い所皆無なんだけど、このプログラムは JavaScript だと "JavaScript" と評価されて CoffeeScript だと "CoffeeScript" と評価される。 { JavaScript: ["CoffeeScript"] }["JavaScript"][0] 検証用コード code = '{ JavaScript: ["CoffeeScript"] }["JavaScript"][0]'; // "CoffeeScript" と評価される eval(CoffeeScript.compile(code, {bare:true})); // "JavaScript" と評価される eval(code); こうしてしまうと、観察者効果でどちらでも "CoffeeScript" と評価されてしまう。 a = { JavaScript: ["CoffeeScript"] }

去年は CoffeeScript で 書ける SuperCollider で CoffeeScript だ！！とか言っていたけど、コンセプト以外はさっぱり考えていなくて、実際やってみると色々問題点が多くて、ぶっちゃけ失敗したなと思う。 そこで SuperCollider のコードをそのままブラウザで実行してみようと取り敢えずの一念発起でパーサーとコードジェネレーターを書いた。クラスの構文以外は大体サポートできたけど、実行できないという欠点がある。 SuperCollider のコードを JavaScript に変換する。 // SuperCollider 69.midicps // JavaScript $SC('midicps', 69) 二項演算子だと色々書き方があるけど解釈はひとつ。 // SuperCollider 1 max: 2 1.max(2) max(1, 2) $SC('