foobar2000のレイアウト編集が柔軟に可能な「Columns UI」を用いてクールで実用的なコンポーネントを配置する

foobar2000はカスタマイズ性に優れており、自分の好みで機能を充実させることが可能です。

今回は、楽曲の再生に合わせてリアルタイムにグラフ表示が行われる「Peakmeter spectrum」と、楽曲を波形表示し、曲の途中からの再生が簡単に行える「Waveform Seekbar」を追加し、実用的でありながら、見た目もより自分好みにしてみたいと思います。

併せて、レイアウトを柔軟に変更できるようになる「Columns UI」というコンポーネントを用いて、アプリ内に配置する手順を見ていきたいと思います。

この記事の内容

「Columns UI」のダウンロード&インストール

まずは、foobar2000のレイアウト変更を柔軟に行えるようになるコンポーネント(追加部品)を下記アドレスからダウンロードします。

https://yuo.be/columns_ui

ダウンロードしたら、ダブルクリックします。

foobar2000が起動し、インストールの確認画面が出るので「はい」をクリックします。

Componentsの一覧の中に項目として加わるので「適用」をクリック。

続いて「OK」をクリックすると、foobar2000が再起動し、次の画面が現れます。

「Columns UI」を選択して「OK」をクリック。

「Layout」の一覧の中からどれか一つを選びます。

選択したレイアウトでfoobar2000が起動したら「View」>「Layout」から「Live editing」にチェックを入れます。

これにより”ライブ”でのレイアウト編集ができるようになります。

”コラム=枠”を追加したい部分を右クリックすると、その枠部分の背景がブルーになり、メニューが現れます。

「Add panel」>「Splitters」>「Horizontal splitter」で”水平に分割”されることになり、横に新しい”枠=コラム”を追加します。

新しくできた枠に、ビジュアライゼーションのコンポーネントを追加してみたいと思います。

Peakmeter spectrumの追加

以下のアドレスからコンポーネットをダウンロードしておきます。

https://hydrogenaud.io/index.php/topic,61145.0.html#entry546448

foobar2000の「File」>「Components」を開きます。

「Install…」をクリックし、ダウンロードしておいたコンポーネントを開きます。

「Apply」をクリックするとコンポーネントが追加されます。

foobar2000が再起動されると追加されたコンポーネントが有効となります。

以上でPeakmeter spectrumが追加され有効となりました。

あらかじめ作っておいた空き枠(コラム)部分で右クリック

「Add panel」>「Visualizations」>「Peakmeter Spectrum」を選ぶと追加しておいたコンポーネントがfoobar2000の画面内に追加されます。

#あとは枠(コラム)のサイズを、マウスドラッグで調整します。

音楽の再生に合わせてリアルタイムにグラフ表示されるようになります。

Waveform Seekbarの追加

楽曲を波形表示し、再生させたい部分が見つけやすく、見た目も実用性でも優れる”シークバー”を追加してみます。

以下からコンポーネントをダウンロードして追加しておきます。

http://www.foobar2000.org/components/view/foo_wave_seekbar

「View」>「Layout」>「Live editing」にチェックを入れてレイアウト編集作業を行えるようにします。

#もしも追加したい場所に不要なものがあったら「右クリック」>「Close panel」で、その場所に配置されているコンポーネントをいったん閉じておきます。

新たなコンポーネントを配置したい枠部分で「右クリック」>「Add panel」>「Toolbars」>「Waveform seekbar」を選びます。

ここで、楽曲ファイルを再生をしてみて、しばらくするとその楽曲の波形が表示されます。

Waveform seekbarの配色の変更

波形部分の配色が地味なので変更してみます。

改めて「View」>「Layout」>「Live editing」にチェックを入れて、レイアウト編集を可能にします。

「Waveform seekbar」の枠内で「右クリック」>「Configure」をクリック。

編集画面が出たら、背景、波形、ハイライト部分、選択部分のそれぞれのカラーを変更することができます。

全体的な枠内の配色も変更する

「File」>「Preferences」を開いて「Display]>「Columns UI」>「Colors and Fonts」で、「Mode:」を「Custom」にすると、全体的な枠内の配色を変更できます。

一例として、次のようにカスタマイズすることができました。

#上の画像の最下段中央にあるアナログの「VUメーター」コンポーネントの追加方法については次回ご紹介したいと思います。

  • URLをコピーしました!
  • URLをコピーしました!
この記事の内容