WebAudioこんにちわ。teratailチームDevRel担当の木下(@afroscript)です。2016の5日目です。初心者向けハンズオンで教えてもらった内容をもとに、「音声ファイルを3Dで表現する」というのに挑戦してみました。(僕は職業的にはエンジニアではない(仕事上はほぼコードを書かない)ので、コードの汚さや効率の悪さもろもろは大目に見ていただけるとうれしいです)今回やることベースは先ほど話に出たハンズオンの際に用いた下記資料の7番目のレッスンです。APIのAnalyserというNodeを使って、読み込んだ音声ファイルデータを取得し、音声を可視化するというものです。資料↓webmusicdevelopers.appspot.com※上記ページの下のほうに「start」ボタンがあるので、それを押して一旦音声の可視化(平面)を確認してみてください。Three.jsのrevisionはr81を使ってます。APIについてWebAudioに関する詳しい説明はここでは省略しますが、先ほど挙げた下記資料(作成は@ryoyakawaiさん)を読み進めると、ハンズオン形式で進めながらWebAudioの使い方を学ぶことができるので順にやってみることをオススメします。webmusicdevelopers.appspot.comThree.jsについてThree.jsに関する説明も詳しくは省略しますが、@yomotsuさんの下記記事が一番分かりやすいかと思います。下記URLから見ることができます。※【注意】音声がなります!左上にある「start」ボタンをクリックすると、サンプルの音が鳴り出すとともに、白い線がウネウネと音に合わせて動き出します。http://usaqwako.sakura.ne.jp/3dAudio/3dLineAudio.html一応gifも載せておきます。解説はコードの中のコメントで、だいたい入れちゃってますが、今回3D空間で線描画をするのにTHREE.Lineを使用してます。THREE.Lineについては下記ブログが分かりやすいです。gupuru.hatenablog.jpOrbitControls.jsまた、マウスでグリグリ動くように、OrbitControls.js使ってます。これ使うとちゃんと物体やもろもろが3Dで表示されているか確認することができます。OrbitControls.jsの使い方に関しては、下記を参考にされるといいかと思います。gupuru.hatenablog.jpあとは事前準備に提示した2つのリンク先を見ると詳しい解説が載ってます。3dLineAudio.htmlHTMLファイルはこんな感じです。src="3dLineAudio.js"></script></body></html>3dLineAudio.js続いてJavaScriptのファイルの全体像はこんな感じです。AudioContext();//サンプルの音をXMLHttpRequestで読み込む。//OrbitControlsを更新する。requestAnimationFrame(rendererRender);}rendererRender();応用編:3Dオブジェクトで表現してみた。線だけでは寂しいので、音声データを3Dオブジェクトで表現してみました。今回はTorusKnotというちょっと変わった形状の3Dオブジェクトを、音に合わせて変化させてみました。下記からご覧になれます。http://usaqwako.sakura.ne.jp/3dAudio/3dTorusKnotAudio.html一応gifも。応用編のコードhtmlはほぼそのままなので、jsファイルのみ掲載します。AudioContext();//サンプルの音をXMLHttpRequesで読み込む。//OrbitControlsを更新する。DOMを速習するこんにちは。blog引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。