前回で矩形波のwavを作成しました。音声ファイルなので当然再生すれば音は出ますが自分の作成したファイルが思い通りになっているか判断するにあたり耳だけでなく眼でも確認したいところです。市販の波形表示のソフトを使えば実現できますが自分で簡単なものを作ってみたいと思います。
以下の前回までの記事です。

音を鳴らす：WAVファイルの再生
Javaのオーディオフォーマット
サンプルサイズに応じた最大値と最小値を取得する
Javaで矩形波のWavファイルを作成する（１）
wavファイルの波形を表示させる（２）

今回のゴール

一度に全部は作りきれないのでまず外側だけつくって波形の描画は次回にしたいと思います。以下のようなものを表示するコードを作ります。

上記はmacで実行したところですがwindowsであればwindowsの枠で表示されるはずです。以下のような処理をしています。

1. 横800ピクセル、縦600ピクセルのウインドウを表示
2. 背景を白く塗りつぶす
3. 外側から10ピクセル余白を取ってグラフの描画範囲として少し灰色がかった四角を描画
4. 無音を意味するX軸として上下からちょうど同じ距離に黒で横線を引く

コード

以下今回のコードです。使っているパッケージはjavax.swingです。このパッケージに含まれるJFrameはGUIのウィンドウを作成するときに使います。JPanelは描画する表示領域です。

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import javax.swing.JFrame;
import javax.swing.JPanel;

public class GraphTest extends JPanel {

  @Override
  public void paint(Graphics g) {
    Dimension d = getSize();

    g.setColor(Color.WHITE);
    g.fillRect(0, 0, (int) d.getWidth(), (int) d.getWidth());

    int width = (int) d.getWidth() - 20;
    int height = (int) d.getHeight() - 20;
    g.setColor(new Color(0xF0, 0xF0, 0xF0));
    g.fillRect(10, 10, width, height);
    g.setColor(new Color(0, 0, 0));
    g.drawLine(10, 10 + height / 2, width + 10, 10 + height / 2);
  }

  public static void main(String[] args) {
    JFrame frame = new JFrame();
    frame.getContentPane().add(new GraphTest());
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setSize(800, 600);
    frame.setVisible(true);
  }

}

コードの説明

今回はGraphTestというクラスにJPanelを継承させています。mainの関数の中でウィンドウとなるJFrameを作成して表示させています。

JFrameのインスタンスを作ってGraphTestパネルを配置します。

JFrame frame = new JFrame();
frame.getContentPane().add(new GraphTest());

ウインドウの端のxを押したときにJavaのプロセスを同時に終わらせる設定をします。

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

ウインドウのサイズを指定します。横800ピクセル、縦600ピクセルです。

frame.setSize(800, 600);

作成したJFrameを表示させます。この処理をしないと表示されません。

frame.setVisible(true);

ここから下はJPanelに関わるものです。JPanelクラスの継承元クラスJComponentで定義されているメソッドです。これをオーバーライドすることによって描画ができます。実際に描画をするには引数で指定されているGraphicsクラス対する処理を記述していきます。このメソッドは描画するたびに呼ばれます。例えばサイズを変更したりウィンドウのフォーカスが変更された時などです。

@Override
public void paint(Graphics g) {

まず描画する領域のサイズを取得します。Dimensionは二次元の横と縦の長さをピクセル数で持っています。

Dimension d = getSize();

色を白に設定し描画領域全てを白で塗りつぶします。

g.setColor(Color.WHITE);
g.fillRect(0, 0, (int)d.getWidth(), (int)d.getWidth());

グラフの領域の横と縦のピクセル数を求めます。両端に10ピクセルの余白を入れるので20を引いておきます。

int width = (int)d.getWidth() - 20;
int height = (int)d.getHeight() - 20;

グラフの領域の色を明るいグレーで塗りつぶします。Colorのインスタンスに入れる3つの数字は順に赤、緑、青の明るさになります。ここでは16進数で指定しています。最大は0xFFです。

g.setColor(new Color(0xF0, 0xF0, 0xF0));
g.fillRect(10, 10, width, height);

最後に無音を意味する音量0の位置を示す横線をグラフの領域に書きます。

g.setColor(new Color(0, 0, 0));
g.drawLine(10, 10 + height / 2, width + 10, 10 + height / 2);

wavファイルの波形を表示させる（２）