以前少しこのAPIが必要になったのですが、色々と癖が強い印象。普段の案件で音を扱う場合、howler.jsでやりたいことが済んでしまうことが多いです。スマホでネックになるユーザーの挙動起点でのロードも勝手に解消してくれ、サウンドスプライトにも対応しているので、よほどのことがない限りこれで充分。APIのことを知る機会がないのですが、ふと「そういえばイコライザーってjsできるんだよね。やるんだろ?」と今更ながら思ったのが、今回の記事のきっかけ。APIについて調べてみましょう。基本的なことは、この2つのサイトを参照してみます。MDNふむふむまず普段のAudioタグと違うのはXMLHttpRequestをつかって、ファイルをバイナリデータで取得する必要があるのですね。・・・・この時点で来た道を引き返したくなりますが、進んでみましょう。AudioContextなるものを作成します。様々なNodeをつなげていく形になるようです。ここからは、すべての処理がAudioContextのインスタンスが起点になります。XMLHttpRequestで取得したデータをAudioContextのdecodeAudioDataメソッドでデコードします。この処理は非同期で行われる点に注意。デコードしたバッファをcreateBufferSourceメソッドで生成したAudioBufferNodeのbufferプロパティにセット。このAudioBufferNodeをコンテキストのdestinationに接続すれば、最低限の音を再生する環境が整います。APIは設計されています。各Nodeを生成するメソッドを保持しているのですね。ContextからcreateGainメソッドでGainNodeを生成し、GainNodeとBufferNodeを接続し、GainNodeをdestinationに接続します。これで、入力と出力の間にGainNodeが挟まった形になりました。音量の調整自体はGainNodeのgainプロパティをいじればOKです。本題のイコライザーですが、解析担当のNodeが用意されています。その名もAnalyserNode!これにもGainNodeと同様、生成するメソッド"createAnalyser"メソッドがcontextに用意されているので、これを使います。BufferNodeを生成したAnalyserNodeに接続し、AnalyserNodeはGainNodeに接続します。先程のGainとBufferの間にAnalyserが挟まった形になりました。下準備はこんな感じのコードになりました。this._ctx.createGain();//AnalyserNodeをGainNodeに接続this._analyser.connect(this._gain);//GainNodeを出力に接続this._gain.connect(this._ctx.destination);ちなみに以前僕がハマった罠があり、BufferNodeは使い捨てになっています。いちどstartメソッドが呼ばれたBufferNodeインスタンスは、再度startメソッドを呼び出すことが出来ません。その都度createBufferSourceメソッドでインスタンスを生成する必要があります。あとは再生を開始し、毎フレームAnalyserNodeに仕事をさせます。波形を可視化したければ、getByte(Float)TimeDomainData,周波数データの場合はgetByte(Float)FrequencyDataを使用してデータを取り出します。1に近ければ近いほどスムーズに。2048;//周波数データをuintで配列にコピーthis._analyser.getByteFrequencyData(this._times);せっかくなので、しばらくご無沙汰しているWebGLを使って作ってみました。工夫しても良かったですが、意外と綺麗でだらだら見てられるのでこのまま放出します。余談ですが、ビジュアライゼーションってなぜか、テクノとかラウドな音をサンプルに使ってるのが多い気がします。全ての周波数がいい感じに出力されているので、見た目が派手なのもあるのでしょうかね。ピアノ曲だと、シンプルで綺麗な周波数データを見ることが出来て、これはこれで味わいがあると思います。Yaga」と「キエフの大門」をどうぞ。本当は息子が作った曲にしようとしたけど自重。Co.,Ltd.MEMBERABOUTCONTACT。