わしの家

浅はかで裏を取ってない知識と意見を惜しげもなく展開したい

web audio api 初心者向けハンズオンに行ってきたよ

connpass.com

 

Web AudioについてHello Worldから勉強がしたくなり、
入門者向けの勉強会に行ってきました。

Web Audioとは

・Webで音を鳴らす→わかる
・Webでwavファイルを扱える→わかる
TwitterやFirebaseなどWebにある巨人的仕組みを活用することができる。→!
・Webでシンセがいとも簡単に扱える→!?
・Webでエフェクターがいとも簡単に扱える→!?
・Webでビジュアライザーが簡単に作れる→!?

 

私が見た中で一番驚きのデモは、Web Musicハッカソンで体験した
DJがURLを案内し、オーディエンスがURLにアクセスすると
スマホをチャンネルごとの音源にしてしまうパフォーマンスで、
それぞれがMaciPhoneなどでURLにアクセスするだけで、
立体的な音響効果が実に簡単に生み出され
DJのコントロールによってそれぞれのチャンネルごとの音が縦横無尽に変わる、
非常に魅力的であった。過去記事はこちらから。

tj-maruzo.hatenablog.com

 

今回は、音源の仕組みに関して基礎知識はわかるものの
Web Audioについては無知のため1から学習しようということで
レバレジーズ社にお邪魔しました。

 

こういう勉強会の最も良いところは、いけてるオフィスに入れることであろう。
あるいは程度の低いセミナーみたいな明らかに本一冊買えば済む内容を
万単位のお金を支払って学ぶような羽目にもならない。
(注:セミナーも人件費とかを考えれば妥当だとは思うので
もしかしたら勉強会が安価なため脳内で価格破壊が起きてるかもしれないがw)
今回もKDDIやLINEのオフィスもあるヒカリエのオフィスにお邪魔したので、
休日の多くの人がつどう渋谷の町を一望できて、とてもテンションがあがった。
オフィスや設備のつくりも洗練されている。

 

挨拶から始まり、Chrome Dev Editorを用いた
Web Audioでサイン波を鳴らし、
wavファイルを鳴らし、
エフェクトをかけ、
FFT解析してアナライザを作り、
コンボリューションリバーブを扱うことまでの実装(コピペ)を行なった。

 

その後1時間程度各々作りたいものを実装する流れになり、
個人的には色々なWEBサービスで流れている音をストリームとして扱い、
エフェクトやビジュアライザを適応したら無限の可能性があってよいなと思って
すぐ質問したが、ストリームとして扱うようなAPIを提供しているなんて
まずなくて、一から何やるかの練り直しに。。

少ない時間でできることとして他に思いついたのが、
ライフゲームでの生死の変化量にあわせて音が変わったら面白いなということで、
ライフゲームにあわせて音程を上下させる

ランダムピッチシフター(ビジュアル付き)を必死に作り終了!

懇親会では、色々な立場の人とお話することができて、大変興味深く、楽しい内容になった。

 

 

写真オッケーなのに基本必死だったためヒカリエからの

誰に見せるんでもない夜景だけを撮っていた。

f:id:tjsurume:20161107110915j:image

 

関連イベントとして

都心でもWebAudio.tokyoがちょくちょく実施されておりますが

都下郊外のわたしは辿り着けない模様・・。