読者です 読者をやめる 読者になる 読者になる

大福未来研究所

大福フューチャーラボのなんか色々なアレ。プログラミング(C++/DirectX/Unity/UE4あたりやりたい)とか音楽とかの。

【UE4】Sound Visualizations Pluginと描画ターゲットを使ってサウンドの波形を表示する

はじめに

年度が明けました。今年度からは自分を取り巻く環境も大きく変わるため、ブログの更新頻度も落ちるかもしれませんがご了承ください。

さて、いろいろな音楽系のサービスや、UE4でサウンドを読み込んだときなど、音声ファイルの「波形」が表示されるのを見たことがある方も多いかと思います。
f:id:dfk_ohnuma:20170408181712p:plain
↑こんなやつのことです。


今回の記事では、読み込んだサウンドの波形をSound Visualizations Plugin経由で取得し、描画ターゲットへ書き込む仕組みを作ります。




今回のプロジェクトについて

今回のプロジェクトの動作の流れは、次のようになります。


1.レベル上でGキーを押す
2.ブループリントAサウンドBから波形データを読み込み、描画ターゲットCへ描画する
3.レベル上にはウィジェットDが描画ターゲットCを表示するようになっており、処理が成功すれば画面上にはサウンドBの波形が可視化される
4.描画ターゲットCの描画内容はCキーを押すとクリアされる


というわけなので、
・ブループリントA
・サウンドB
・描画ターゲットC
ウィジェットD

の4つを用意する必要があります。
その中のサウンドについては、適当にwavファイルを突っ込めばいいだけなので省略します。

それでは、新規プロジェクトを立ち上げましょう。
立ち上がったらすぐに「編集」→「Plugins」へ入り、
「Sound Visualizations Plugin」にチェックを入れてエディタを再起動しましょう。
f:id:dfk_ohnuma:20170408183441p:plain

描画ターゲットを用意しよう

コンテンツブラウザ上で右クリック→「マテリアル・テクスチャ」→「描画ターゲット」で描画ターゲットを作成します。
f:id:dfk_ohnuma:20170408183126p:plain
パラメータは適当にいじっておきます。これは一例です。
f:id:dfk_ohnuma:20170408183143p:plain
これはブループリント等から書き込むことが出来、それをテクスチャとしてウィジェットなどに利用することも出来るオブジェクトです。

ウィジェットを用意しよう

先程の描画ターゲットを表示するだけのウィジェットを作ります。
f:id:dfk_ohnuma:20170408183712p:plain
imageをこのように配置し、テクスチャとして先程の描画ターゲットを指定します。

いざブループリント

それではここからが本丸です。
新しいActor Blueprintを作成し、開きます。
用意する変数は2つです。
f:id:dfk_ohnuma:20170408184349p:plain
Divide…サウンドの波形データをいくつ分に分割するか。描画ターゲットのXサイズと同じにしておくことを推奨します。int型。
SoundWave…読み込みたいサウンドをデフォルト値のところに入れておきます。SoundWave型へのリファレンス。


まずはウィジェット表示の部分を作りましょう。


f:id:dfk_ohnuma:20170408183949p:plain


次に、Cキーを押したときのクリア機能を付けます。


f:id:dfk_ohnuma:20170408184614p:plain


では、Gキーを押したときの処理を作っていきましょう。
全体図はこのようになります。


f:id:dfk_ohnuma:20170408185602p:plain


それでは細かい部分を見ていきましょう。


f:id:dfk_ohnuma:20170408190115p:plain


「描画ターゲットクリア」は先ほどもありましたね。
次にBegin Draw Canvas To Render Targetノードで描画開始の手続きをします。
「Size」ピンには指定した描画ターゲットの縦横サイズが入るので、右クリックで「ピンを分割」することで画像のようにfloatピンが2つ用意されるようになります。
Get AmplitudeノードはSound Visualizations Plugin付属のノードです。


Sound Wave…取得対象とするサウンドファイル。
Channel…どのチャンネルから取得するか。ステレオwavなら0と1チャンネルに左右それぞれの音が入っています。
Start Time…サウンドファイルの何秒のところからを対象にするか。
Time Length…Start Timeから何秒分の長さを対象にするか
Amplitude Buckets…取得したデータを入れる配列の長さ。多いほど出力されるデータが細かくなる


SoundwaveからGet Durationで音の長さを取得し、Time Lengthへ代入しましょう。
Divideの値をAmplitude Bucketsへ代入します。これでOut Amplitudeから取得したデータが配列となって出てきます。


ここからはそのデータを使って描画ターゲットに線を引きます。
f:id:dfk_ohnuma:20170408190551p:plain
描画ターゲットのXサイズ=Divide=配列の長さ、となっているので、描画ターゲットのX座標を1ずつずらしながらデータの数値の長さだけY方向へ線を引きます。
この時、全配列の中で一番大きな値(=一番音量が大きいところ)を1として、それと比べた比率で描画するため、小さな音のファイルでも縦幅が1になる部分が必ず生ずる事になります。
これが納得いかん!という場合は基準値を何らかの形で取って、処理するほうが良いと思います(なお私も納得行かないかもしれないw)
そして、配列を回し終わったら「描画終了手続き」を経て一連の流れは終了です。

実際に動かすとこうなる

それでは実際に動かし、Gキーを押してみますと……
f:id:dfk_ohnuma:20170408190950p:plain
このように波形が書き込まれれば成功です。


最後に

Sound Visualizations Pluginはまだまだ色々使えそうなのですが、
私自身も勉強中なので、また新しい記事が書けるよう精進します。
また、Sound Visualizations Pluginについて詳しい方がいらっしゃったら是非ブログ記事を書いていただけると大福さんが喜びますのでお願い致します。
というか色々と教えてください(土下座)

以上でこの記事は終わりです。
お疲れ様でした。