以前にも何度かここで紹介したブラウザから利用できるオーディオワークスペース Audiotool の HTML5/Web Audio 対応化のプロジェクトが進行しているようです。
現在 Audiotool にラインナップしている2つのシンセ Heisenberg と Pulverisateur とドラムマシン Machiniste の HTML5/Web Audio 版が試験的にプレビュー公開されています。
Web Audio 対応ブラウザならどれでもおそらく動くと思われますが、Chrome の最新版(v.43)を使うことを推奨します。
Internet Explorer 11 は Web Audio に対応していないので動きません。
![]()
![]()
![]()
HTML5 + Web Audio 対応の Heisenberg、Pulverisateur、Machiniste
(詳細は過去記事を参照↓)
![]()
現在の Flash 版 Audiotool
2010年後半になると主要ブラウザは HTML5 Audio/Video に対応し始めていて、当時このブログでもブラウザの対応状況を調べた記事を書いています。
HTML5 Audio/Video はオーディオやビデオのプレイヤー的機能を主に扱うもので、楽器のような音響をリアルタイムに生成する処理にはあまり向いていません。
そこで 、より細かくプリミティブにオーディオデータを JavaScript から扱う Web Audio API が発案されました。
2010年時点はまだ Web Audio API は HTML5 の標準仕様にはなっていません。最初に Web Audio API に対応したブラウザは Chrome で、2011年のバージョン10から実験的に実装され、同年バージョン14から正式に利用可能になっています。
ここ数年、ブラウザ上で特定コンテンツを表示・再生するためにサードパーティ製プラグインを利用する方法は、バージョンの分散化によるセキュリティホール発生の危険性などを理由に、ブラウザ側が徐々にサポートしなくなりつつあります。
上記理由も含めて、爆発的に増えつつあるモバイルデバイス環境では Flash がサポートされなくなったこともあって、従来 Flash で構築していた部分を可能な限り HTML5 + JavaScript に置き換えて動くようにしようという流れが加速しています。
![]()
Heisenberg は、49種類の波形をもつ4つのオシレーターとフェイズモジュレーション (PM) の組み合わせにより複雑な波形を生成できるポリフォニック・シンセサイザーです。
モジュレーションマトリクス、3系統のエンベロープとピッチエンベロープ、2系統の LFO、12～48dB/oct 対応の XY フィルターを搭載。
他に、エフェクターはパラメーター固定のリバーブとディレイ、固定パターンのアルペジエイターが利用可能です。
» Web MIDI API で外部 MIDI デバイスから制御可能
Chrome 43 以降では標準で実装された Web MIDI API を利用して、外部 MIDI デバイスを接続してコントロールすることができます。
![]()
Chrome 43 の「設定」→「プライバシー」→「コンテンツの設定」
試しに PC(Windows 7) と Mac(OS X 10.9) に、USB-MIDI 対応の MIDI キーボードを USB ケーブルで接続してみたら、どちらも MIDI キーボードの鍵盤から演奏することができました。
さらに iPad Air に入れてある OSC コントローラーアプリ touchOSC から CoreMIDI で出力して、 ネットワーク MIDI (Mac は CoreMIDI、PC は rtpMIDI)を設定して LAN 経由でも演奏するとこができました。
マシンスペックが足りなかったり、レイテンシーで Best を選択するとクリックノイズが出るときがあるかもしれません。(Core i5 2400S 2.5GHz では問題なかったが、Core 2 Duo E8400 3.0GHz ではやはり少々荷が重かった)
![]()
Pulverisateur はセミモジュラーのアナログタイプのシンセサイザーで、4種類の波形をもつ3つのオシレーターとノイズのほか、外部音声入力にフィルタリングすることもできます。(外部入力の反応は未確認)
レゾナンス付フィルターはローパスとハイパスの組み合わせで、LFO と2系統のエンベロープを搭載しています。
グライド機能の他、エフェクターにはパラメーター固定のリバーブとディレイ、固定パターンのアルペジエイターが利用可能です。
Heisenberg と同じく Web MIDI API に対応しているので、Chrome 43 以降なら外部 MIDI デバイスからコントロール可能です。
![]()
Machiniste は4つのバンクと8つのパターン(最大128ステップ)の再生機能を持ち、9パートで構成されるサンプルベースのドラムマシンです。
各パートサウンドのサンプルの再生開始と終了ポイント、ピッチ、フィルター、エンベロープ、パン、レベルなどが調整可能なほか、エフェクターにはパラメーター固定のリバーブとディレイが利用可能です。
こちらも Heisenberg、Pulverisateur と同じく Web MIDI API に対応しているので、Chrome 43 以降なら外部 MIDI デバイスからコントロール可能です。
単体ではかなりイイ感じのところまで移植できている印象を受けましたが、これを現在の Audiotool のように複数同時に動かすとなると、現状の Web Audio API の仕様では少々キビシイような気もしたのですが、本当のところはどうなんでしょう。
当時 Audiotool の見たときはかなり衝撃的だったので、また驚かせてくれることを期待したいですね。
[関連サイト]
Audiotool
現在 Audiotool にラインナップしている2つのシンセ Heisenberg と Pulverisateur とドラムマシン Machiniste の HTML5/Web Audio 版が試験的にプレビュー公開されています。
Web Audio 対応ブラウザならどれでもおそらく動くと思われますが、Chrome の最新版(v.43)を使うことを推奨します。
Internet Explorer 11 は Web Audio に対応していないので動きません。
HTML5 + Web Audio 対応の Heisenberg、Pulverisateur、Machiniste
現行の Audiotool は Flash ベース
Audiotool はブラウザ上に仮想の電子楽器を配置・結線して音楽を制作できる画期的な Web アプリで、元々システムは Flash Player で動くように作られています。(詳細は過去記事を参照↓)
現在の Flash 版 Audiotool
10/03/26 - Hobnox Audiotoolが「Audiotool 1.0 Firestarter」として正式公開
09/05/01 - オンラインオーディオワークスペースHobnox Audiotoolがオープンソースに
08/10/17 - オンラインオーディオワークスペースhobnox Audiotoolにレコーディング機能が追加
08/05/10 - TR-909、TB-303をオンラインで再現したHobnox Audiotoolに新たにTR-808が追加
08/03/06 - TR-909と2台のTB-303と7種類のエフェクターをオンラインで再現した Hobnox Audiotool
09/05/01 - オンラインオーディオワークスペースHobnox Audiotoolがオープンソースに
08/10/17 - オンラインオーディオワークスペースhobnox Audiotoolにレコーディング機能が追加
08/05/10 - TR-909、TB-303をオンラインで再現したHobnox Audiotoolに新たにTR-808が追加
08/03/06 - TR-909と2台のTB-303と7種類のエフェクターをオンラインで再現した Hobnox Audiotool
Flash から HTML5 Audio、Web Audio API へ
Audiotool が最初に登場した2008年3月頃、HTML5 はまだ W3C の草案段階 (Working Draft) で、各主要ブラウザは段階的に仕様をサポートし始めたばかりで、当時はまだ Flash コンテンツが一般的でした。2010年後半になると主要ブラウザは HTML5 Audio/Video に対応し始めていて、当時このブログでもブラウザの対応状況を調べた記事を書いています。
HTML5 Audio/Video はオーディオやビデオのプレイヤー的機能を主に扱うもので、楽器のような音響をリアルタイムに生成する処理にはあまり向いていません。
そこで 、より細かくプリミティブにオーディオデータを JavaScript から扱う Web Audio API が発案されました。
2010年時点はまだ Web Audio API は HTML5 の標準仕様にはなっていません。最初に Web Audio API に対応したブラウザは Chrome で、2011年のバージョン10から実験的に実装され、同年バージョン14から正式に利用可能になっています。
ここ数年、ブラウザ上で特定コンテンツを表示・再生するためにサードパーティ製プラグインを利用する方法は、バージョンの分散化によるセキュリティホール発生の危険性などを理由に、ブラウザ側が徐々にサポートしなくなりつつあります。
上記理由も含めて、爆発的に増えつつあるモバイルデバイス環境では Flash がサポートされなくなったこともあって、従来 Flash で構築していた部分を可能な限り HTML5 + JavaScript に置き換えて動くようにしようという流れが加速しています。
Heisenberg
Heisenberg は、49種類の波形をもつ4つのオシレーターとフェイズモジュレーション (PM) の組み合わせにより複雑な波形を生成できるポリフォニック・シンセサイザーです。
モジュレーションマトリクス、3系統のエンベロープとピッチエンベロープ、2系統の LFO、12～48dB/oct 対応の XY フィルターを搭載。
他に、エフェクターはパラメーター固定のリバーブとディレイ、固定パターンのアルペジエイターが利用可能です。
» Web MIDI API で外部 MIDI デバイスから制御可能
Chrome 43 以降では標準で実装された Web MIDI API を利用して、外部 MIDI デバイスを接続してコントロールすることができます。
Chrome 43 の「設定」→「プライバシー」→「コンテンツの設定」
試しに PC(Windows 7) と Mac(OS X 10.9) に、USB-MIDI 対応の MIDI キーボードを USB ケーブルで接続してみたら、どちらも MIDI キーボードの鍵盤から演奏することができました。
さらに iPad Air に入れてある OSC コントローラーアプリ touchOSC から CoreMIDI で出力して、 ネットワーク MIDI (Mac は CoreMIDI、PC は rtpMIDI)を設定して LAN 経由でも演奏するとこができました。
マシンスペックが足りなかったり、レイテンシーで Best を選択するとクリックノイズが出るときがあるかもしれません。(Core i5 2400S 2.5GHz では問題なかったが、Core 2 Duo E8400 3.0GHz ではやはり少々荷が重かった)
Pulverisateur
Pulverisateur はセミモジュラーのアナログタイプのシンセサイザーで、4種類の波形をもつ3つのオシレーターとノイズのほか、外部音声入力にフィルタリングすることもできます。(外部入力の反応は未確認)
レゾナンス付フィルターはローパスとハイパスの組み合わせで、LFO と2系統のエンベロープを搭載しています。
グライド機能の他、エフェクターにはパラメーター固定のリバーブとディレイ、固定パターンのアルペジエイターが利用可能です。
Heisenberg と同じく Web MIDI API に対応しているので、Chrome 43 以降なら外部 MIDI デバイスからコントロール可能です。
Machiniste
Machiniste は4つのバンクと8つのパターン(最大128ステップ)の再生機能を持ち、9パートで構成されるサンプルベースのドラムマシンです。
各パートサウンドのサンプルの再生開始と終了ポイント、ピッチ、フィルター、エンベロープ、パン、レベルなどが調整可能なほか、エフェクターにはパラメーター固定のリバーブとディレイが利用可能です。
こちらも Heisenberg、Pulverisateur と同じく Web MIDI API に対応しているので、Chrome 43 以降なら外部 MIDI デバイスからコントロール可能です。
単体ではかなりイイ感じのところまで移植できている印象を受けましたが、これを現在の Audiotool のように複数同時に動かすとなると、現状の Web Audio API の仕様では少々キビシイような気もしたのですが、本当のところはどうなんでしょう。
当時 Audiotool の見たときはかなり衝撃的だったので、また驚かせてくれることを期待したいですね。
[関連サイト]
Audiotool