(第6回)にて「SoundJSを使って音を見えるものへ」というテーマでライトニングトークをしました。発表時に使用したスライドと時間の都合上紹介できなかったことを記事として公開します。音をビジュアライズしているコンテンツ今回のテーマである音は目に見えません。DAYから3つピックアップしました。この他にもFWAではさまざまなコンテンツが紹介されているのですが、音をビジュアライズする手法は楽曲のプロモーションサイトに多く使われていました。DAYに選ばれたコンテンツ「YARA’N’YARED」。3D空間にある山の上に白いバリアのようなものがあり、それが音のテンポに合わせてフェードイン・アウトして幻想的な雰囲気を出しています。DAYに選ばれたコンテンツ「Dope」。背景で動画を表示しつつ、画面をクリックするとライン状に広がったカラフルな光を重ねることで、コンテンツのポップな演出をさらに引き立てています。こちらも音のテンポに合わせて変化することは先ほどと同じですが、背景や顔の3Dオブジェクトを「ぐにゃぐにゃ」と変形させています。先ほど紹介したコンテンツのソースコードを読んでみると、ある手法が共通で使われていました。音楽などのサウンドデータは複数の波形が合わさって1つの波形になっています。フーリエ変換を使うと、その合わさった波形を周波数ごとに分割できます。わかりやすくいうと「音を音の高さで分割する」ということです。その分割した周波数(音の高さ)ごとに振幅(音の大きさ)が取得できるので、その値をビジュアライズするロジックに渡してあげることで音に連動したコンテンツを作成できます。SoundJSの再生方式SoundJSではさまざまな環境でも再生できるように、以下の3つの再生方式がサポートされています。フーリエ変換では波形の解析を行うのでWebAudioPluginを使用します。HTMLAudioPluginHTML5のaudioタグを使用した方式。簡単に再生できますが、音にエフェクトを加えるなどの複雑なことはできません。APIを使用した方式。音の再生・編集・解析はもちろんのこと、音を生成することもできます。Playerを使用した方式。ブラウザごとの挙動の差を吸収するために使用されます。(GitHub)フーリエ変換を使って簡易的なサウンドビジュアライザーを作成しました。APIで行い、ビジュアライズ部分ではThree.jsを使って3Dで表現しています。音の高さごとに音の大きさを取得し、3D空間(Three.js)に配置されている立方体の上下方向の座標に用いることで波を表現しています。下記のように数行でサウンドデータの読み込み〜再生できます。フーリエ変換で音の波形を何分割にするのかを指定し、音の高さごとの音の大きさを数値の入った配列で取得できます。その値をビジュアライズするロジックに渡します。フーリエ変換を行う分割数。それぞれの周波数の振幅を取得analyserNode.getByteFrequencyData(freqByteData);フーリエ変換で取得した値でビジュアライズフーリエ変換で取得した数値は配列で返ってくるので、1つずつ抽出し3D空間の表示要素の座標に反映します。1000;}SoundJSでハマったところ音を手軽に扱えるSoundJSですが、いくつかハマったところがあったので共有します。サウンドループ時に途切れるMP3形式で書き出されたループ音源を再生すると、ループするタイミングで一瞬途切れてしまいます。ファイル形式として「wav」「ogg」「m4a」(AAC)のいずれかを選択することでこの現象は解消されました。コンテンツの仕様などでどうしてもMP3形式を使用したいという場合は、ループの前後にフェードイン・アウトを加える必要があります。Chromeで音声の右チャンネルが聴こえないバージョン0.6.0・0.6.1のSoundJSでWebAudioPluginを使用すると発生します。GitHubでの開発版ではすでに修正されているので次期バージョンでは解消されることでしょう。公開までにSoundJSを使用する場合は、CDNで公開されているものではなくGitHubからzipファイルをダウンロードしてその中の「soundjs-NEXT.min.js」を使用するなど注意してください。サウンドビジュアライズの小ネタこちらは発表で紹介できなかったことなのですが、実際に音をビジュアライズして見つけた小ネタです。ループ音源をつくるならGarageBandがオススメ今回使用したループ音源は自作しています。使用したのはMacに搭載されているGarageBandというアプリケーションで、楽器を弾いたことのない私でも簡単に作成することができました。作った音源は商用利用も可能となっています(素材音をそのまま書き出すことは禁止)。サポート」にてご確認ください。音源作りも試行錯誤したのですが、低音と高音の音を組み合わせることでメリハリがつき、よりインパクトのある表現になります。フレームレートよりもユーザーの体験を最優先に考える今回作成したビジュアライザーは60fpsを基本に実装していますが、立方体の描画スピードはその半分の30fpsまで落としています。60fpsで実装すると立方体の動きが速すぎて砂嵐のような見え方になってしまったのですが、思い切って半分の30fpsにすることでイメージしていた表現を実現できました。演出を作成する際、実現できる最大のフレームレートで実装することが多いですが、場合によってはあえて落とすことも有効です。まとめ今回紹介したことをまとめると下記のようになります。APIで手軽に扱える私もサウンドビジュアライズの仕組みを知るまでは「わからないことがわからない」状態で苦手意識がありました。今回紹介した手法を使うと手軽に音をビジュアライズすることができるので、ぜひみなさんもかっこいいサウンドビジュアライザーに挑戦してみてください!最後に話が脱線してしまうのですが、今回紹介したフーリエ変換をWikipediaで調べると複雑な数式が山のようにでてきます。このような取っつきにくい部分に対して初心者はハードルを感じてしまうこともあるかと思います。そのようなときはSoundJSなどのライブラリを使うことで、ビジュアライズなどの時間をかけたい部分に注力することができ、コンテンツのクオリティをもう一層上にあげられるのではないかと私は考えます。平成29年11月8日に内容をメンテナンスしています。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。