赤くなりました!ブラウザで、Youtube上の曲を元にしてGLSL(WebGL)でリアルタイムビジュアライズします。応用編としてitunesの曲や自分の声でもできるようになりました。APIのアナライザーノードというのは使ったことがなかったんですが、mdnのデモを見ていて、結構感度が良かったのでゴニョゴニョやってみる。その上にcanvasを置いて、WebGL経由でGLSLのシェーダーを置いていきます。最後に音域データを料理して、シェーダーに反応させます。ビートを刻んでいる感じになりました。何はともあれ、demoをご覧ください音量によって変わるので、各自のマスターの音量を調節してください。大きめで開発したので大きめがおすすめ。ちなみにミュートにして声を出すと声に反応します。光が良い感じになるようにボリュームを調整してください。API(HTML5)のcreateAnalyser()で分析します。・音域の総和を色に変換する。・リズムを刻むようにうまいことオフセットをかける。Crowe氏のビートボックス。この動画単体でもすごいhttps://www.youtube.com/watch?v=Onr12llWDGohttps://mdn.github.io/voice-change-o-matic/これをみていけるなと思ったんです。});//dataArrayに音域情報を入れる。「baserJSで埋め込んだYouTubeを背景動画にする」http://qiita.com/YusukeHirao/items/b99b591fa9765763d508$('.youtube').bcYoutube().bcBackground();その上に重ねたcanvasに、opacityをかけることで背景の動画と混ざり合うわけです。音はYoutubeから鳴っている音がWebAudioのInになります。テンプレート」http://qiita.com/doxas/items/000f2ad6f82c27bd389eさきほどの区切った音域ごとの値をもらってきます。1.0);}</script>シェーダーにオーディオの分析データを料理して送るいい感じの値になるようにさばきます。ここは最大のポイント。アルゴリズムやパラメータのチューニング次第で面白くなったりつまらなくなったりします。・青は全ての音域の総和を拾うようにします。することで曲の盛り上がり、盛り下がりを拾う効果を狙う。・赤は特定音域だけを広います。これで曲のブレーク中、ある音域だけが強調されて青とうまく混ざる。・◯の軌道、これはある値より低い時は戻るようにします。すると、ビートが強調される。プラス、ブレイクの時とかにシューンと戻っていくのでブレイク感が出ます。それと大きさは青に比例するようにします。0.002;//◯の軌道。vr;思わぬ副産物・・・こっちがメインか?!音量をMacのミュートボタンで切って、マイクに向かってボイスパーカッションとかをすると面白いです。いうかこういう用途の方がありかも。いうかitunesのビジュアライザーになるやん。いうことでこっちの方も作ってみました。https://hp0me.github.io/glsl_webaudio_visualizer/you.htmlとはいっても、このままだとマイクの音も入って、曲の大事な部分で邪魔をしたりしてしまいます。いう時は、環境設定でマイクのインプットを切ります。requestStockLike55@hp0meスマートフォンゲームがメインですが、最近は雑食になってきました。upLoginユーザーは見つかりませんでした。