RSS Twitter Facebook
DTM / シンセサイザー / VST / WebMusic 関係の技術情報を発信しています

Products : ユーロラックモジュラー「RedLine」販売中

ユーロラック・モジュラーシンセサイザー「RedLine」を販売開始しました!

ユーロラック「RedLine」



2017/04/16 (2017年04月 のアーカイブ)

Chrome57でAudioContextのwebkitプリフィックスが使えなくなりました

Twitter Google+ Facebook

正確なリリースの日付が良くわかっていませんが、3月中旬くらいにstableに来た Chrome 57 では AudioContext および OfflineAudioContext に webkit プリフィックスを付けるとエラーになります。
webkit 決め打ちで書いていた昔のアプリが動かなくなったりしているので、順次更新中です。

最近定番になっている書き方だと次のような感じですね。これなら大丈夫です。
  window.AudioContext = window.AudioContext || window.webkitAudioContext;
  audioctx=new AudioContext();

Posted by g200kg : 6:13 PM : PermaLink

2017/03/23 (2017年03月 のアーカイブ)

WebAudio.Tokyo #4

Twitter Google+ Facebook

既に参加枠は満員のようですが、来週28日(火)に六本木の WebAudio.tokyo でLTやります。
今回のテーマは「軽量GMシンセ webaudio-tinysynth」です。


WebAudio.tokyo #4

Posted by g200kg : 4:33 AM : PermaLink

2017/03/01 (2017年03月 のアーカイブ)

WebAudio API で簡単にノイズを作りたかったのに...

Twitter Google+ Facebook

この間こんな記事を書いたのですが... WebAudio API でノイズを作る小技

FM音源なんかでよく使われる、オシレータに自己フィードバックを掛けてノイズを作る方法なんですが、実はこれ、Chrome と Edge では快調に動くのですが Firefox では動かないのですよ。まあ、WebAudio API もまだまだ枯れたAPIではないし、こういうコーナーケース的な使い方ではよくある事くらいに思っていたのですけどね...

このようにノードの出力から入力ではなくパラメータに接続を戻すような場合の振る舞いについてWeb Audio APIの仕様書ではちゃんと明記されてはいないのだけど、Editor's Draft にあるノードの処理オーダーの説明などからの推察としては、これは「動かない」のが仕様として正しいと判断するのが妥当かな、という結論に至ってしまった。

という事でこの技が胸を張って使えなくなってしまった。これを確実に動作させるにはループ内にDelayNodeが入っていることが必要で、仕様に従うと下の図のような感じになります。出てくる音は基本的に同じなのだけど、簡単にノイズを作るはずなのにノード3つ使うのではうまみがないです。これならバッファに事前にレンダリングしておいて BufferSourceNode を使うほうが良さそう。

あー、残念だ。なお、本来の仕様ではこのような接続をした時点でエラーを吐くべき、となっているので、Firefox では今は音が出ないだけだけどその内エラーを吐いて止まるようになるかも知れません。あー残念だ。

DelayNode入り自己フィードバック

Posted by g200kg : 5:47 PM : PermaLink

2017/02/23 (2017年02月 のアーカイブ)

[Polymer] WebAudio APIで軽量GM対応シンセを作ってみた

Twitter Google+ Facebook

GitHubに置いてあります。
リポジトリ : https://github.com/g200kg/webaudio-tinysynth
デモページはこちら : https://g200kg.github.io/webaudio-tinysynth/soundedit.html

WebAudio APIのGM配列のシンセは以前も作ったことがあるんですけど、大抵はサンプルデータに頼る事になるのでサイズがどうしても大きくなりがちです。組み込みならともかくWebアプリ的にはかなり辛い状況なので、今回はサンプルデータは一切使わずにオシレータの組み合わせでアルゴリズミックにすべての波形を合成しています。という事で数十kB程度のサイズにGM音色セットとサウンドエンジン+MIDIシーケンサーを押し込めています。とは言ってもあまり凝ったことをやると今度はCPUが厳しくなりそうなので微妙なバランスを探っている感じですが。

音色セットは2種類あって切り替えられます。quality=0が1音1オシレータを割り振るモードでチップチューン的な音になります。またquality=1モードでは、1音に2オシレータを割り振ってFMベースでもう少しそれらしい音を作っています。同時発音数はCPUパフォーマンス次第で無制限です。GM音色セットくらいの規模になると1つ1つの音色の作り込み以上に全体のバランスを取るのが大変になってくるのですが、そのあたりは適当にやっているので取りあえずの状態です。

形式としては Polymer のモジュールになっていますので所定のインストールがされれば、HTMLタグ <webaudio-tinysynth> でページに組み込めます。テストページで鍵盤の下にある黒い四角の部分が本体で、このエレメントに対してMIDIメッセージを投げると音が出ます。コードとしては、

synth=document.getElementById("tinysynth");
synth.send([0x90,60,100],audioContext.currentTime);
のような感じになります。またMIDIシーケンサー機能も持っていますので、適当なMIDIファイルをtinysynthにドロップすると再生できます。

※そして問題点とか...

webaudio-tinysynth という名前のPolymerのモジュールで、HTMLタグだけでページに組み込めるようになっているのですが、Firefox / Edge では WebComponents が polyfill になるのでうまく動かなかったりせっかく軽量なのに起動が凄く遅くなったりします。WebAudioAPIとWebComponents polyfill との相性の悪さは前から気になっていたのだけど、ブラウザでネイティブ対応されるまでは実際に何かに使うならやっぱり普通の JS ライブラリにしておいた方が良いんかなぁ... と思わなくもないです。




Posted by g200kg : 5:53 AM : PermaLink

2017/02/17 (2017年02月 のアーカイブ)

WebAudio API でノイズを作る小技

Twitter Google+ Facebook

WebAudio API使ってますか? 今回はノイズの作り方についてちょっと小技の紹介です。

WebAudio APIには今のところホワイトノイズ等を発生するためのノイズジェネレータがありません。以前 GitHub のissueでノイズジェネレータが欲しいというリクエストを上げてみた事があるのですが、概ね好意的ではあったものの将来的な話という事ですぐには実現されなさそうです。

今のところノイズが欲しくなった時にどうやるかと言うとScriptProcessorノードを使ってリアルタイムに乱数で埋めるか、あらかじめ乱数で埋めたBufferを準備しておいてBufferSourceノードで再生する、というのが一般的です。

まあ、それで困る事もそれほど無いんですけどね。もう一つの小技としてこんなやり方があります。

WebAudioDesigner : 自己フィードバックノイズ

見ればわかると思いますが、Oscillatorノード1つとGainノード1つで、自己フィードバックを掛けているだけです。オシレータの現在値で周波数が決定されるループになっていますがパラメータの設定によってカオス挙動が発生してノイズになります。FM音源でノイズを作る時によくやる奴ですね。

純粋な実行時の処理の重さは、BufferSourceの方が軽いかも知れませんが、これならBufferもいらないし ScriptProcessorよりは軽いかなと思います。

ただ例によってFM音源的に予測しづらい挙動によるノイズなので精密なホワイトノイズが欲しい場合等には向いていません。逆にパラメータの選び方によってノイズがホワイトっぽいのやらピンクっぽい(あくまでぽい)感じに変化したり、一様なノイズでもない面白い音が出たりしますので、うまくやれば何かに応用できるかも知れません。

下の例はフィードバック量をゆっくり変化させた例です。

WebAudioDesigner : 自己フィードバックノイズ+LFO

○○ができないなぁと思っても、結構こういう小回りが利くのが WebAudio APIの良い所ですかね。

Posted by g200kg : 8:40 PM : PermaLink

g200kg