第16章 音と画面を同じ時間に置く

音を鳴らすだけなら、再生ボタンを一つ置けば足ります。クリエイティブコーディングでは、音が鳴っている時間を画面の変化にも使えます。クリックで音を始め、再生中かどうかに合わせて形の大きさや色を変えます。

16.1 ブラウザは勝手な音を止める

多くのブラウザは、ページを開いただけで音が鳴る自動再生を制限します。驚かせる広告や不要な音を防ぐためです。そのため、音の開始にはクリックやキー入力など、利用者の操作が必要です。

音が鳴らないとき、コードだけが原因とは限りません。最初に次を確認します。

• 画面を 1 回クリックしたか
• タブがミュートされていないか
• 端末の音量が 0 ではないか
• 音声ファイルをエディタへ正しく取り込んだか
• ブラウザが音声形式を再生できるか

16.2 setup で音を用意する

この章には、練習用の短い音声 sound.wav が付属しています。リンク先を保存してエディタへドラッグ＆ドロップし、素材一覧へ sound.wav が現れたことを確認します。素材名が出ないときは、画像や音が読み込めないを確認します。ドラッグ操作ができない端末では、この章は図と説明だけ見て第17章へ進めます。

loadSound（ロード・サウンド）は、取り込んだ sound.wav を音声オブジェクトとして読み込みます。rbCanvas/p5 0.5.1 では setup の中で読み込みます。その音声オブジェクトを @sound へ入れておくと、別のメソッドからも再生や停止を指示できます。

def setup
  createCanvas(500, 300)
  @sound = loadSound("sound.wav")
end

def draw
  background(25, 30, 48)
  fill(255)
  textAlign(CENTER, CENTER)
  textSize(24)

  if @sound.isPlaying
    message = "再生中"
  else
    message = "クリックで再生"
  end

  text(message, width / 2, height / 2)
end

def mousePressed
  if @sound.isPlaying
    @sound.stop
  else
    @sound.play
  end
end

isPlaying（イズ・プレイング）は、音が再生中なら true（真）、停止中なら false（偽）を返します。再生中なら「再生中」、停止中なら「クリックで再生」を変数 message に入れます。第5章で使った if と else を、表示する文字とクリック時の処理の切り替えに使っています。

mousePressed（マウス・プレスド）は、キャンバス上でマウスボタンを押したとき、またはタッチ操作をしたときに呼ばれるメソッドです。@sound.play は読み込んだ音を先頭から再生し、@sound.stop は再生を止めます。.play の前の点は、「@sound に再生を頼む」というつながりを表します。

rbCanvas/p5 の版、ブラウザ、音声形式によって読み込み方法や自動再生制限の挙動が変わることがあります。本書では付属の sound.wav を 0.5.1 Opal 版へ取り込み、Chrome でクリック再生と停止を確認しています。別の環境で音が鳴らない場合は、この節の確認項目を上から試すと原因を分けられます。

16.3 再生の状態を作品全体で共有する

16.2では、表示とクリック処理の両方が音声オブジェクトの状態を基準にしています。次は同じ isPlaying を、文字だけでなく円の大きさと色へ結び付けます。図 16-3、16-4 では変化を見やすく切り出すため、キャンバスを 420×220 へ小さくします。最初に setup の createCanvas(500, 300) を createCanvas(420, 220) へ置き換えます。

続く draw は変更部分です。16.2 の長いコードにある def draw から対応する end までと置き換えます。mousePressed は16.2のまま残します。

def draw
  background(25, 30, 48)

  if @sound.isPlaying
    size = 120 + sin(frameCount * 0.1) * 40
    fill(255, 200, 90)
  else
    size = 80
    fill(100, 120, 150)
  end

  noStroke
  ellipse(width / 2, height / 2, size, size)
end

このコードは、「再生中か」という状態を画面の動きへ対応させています。扱う状態が一つなので、音が始まったときと止まったときの画面をその場で確かめられます。

音が最後まで鳴り終わると、@sound.isPlaying は自動的に false へ戻ります。そのため、表示も小さな円へ戻り、次のクリックでは一度で再生が始まります。表示と操作で同じ状態を調べると、画面と音のずれを防げます。

16.4 音と画面を同じ状態で動かす

同じ映像へ曲を後から加える方法もあります。この節では、再生中と停止中で形の大きさや色を変え、音と画面が同じ状態を示すようにします。

音の再生と画面の変化を対応させるため、次の問いから一つ選びます。

• 音が始まるまで、形は待つか
• 音が止まると、画面は消えるか残るか
• 再生中の円を一定の速さで大きくするか、色を変えるか
• 無音の時間に何を見せるか

音声素材にも著作権があります。自分で録音した音、利用条件が明確な素材、生成条件を確認できる音を使います。公開しない実験と配布する作品を分けて考えてください。

付属音は 440 Hz の音をプログラムで合成した 1.2 秒の教材用素材です。第三者の演奏や録音を含まず、この章の練習や公開作品へ自由に利用、加工できます。

音を使えない環境では、図 16-1 から 16-4 で停止中と再生中の違いを確認できます。第17章では、3D 描画へ切り替え、奥行きのある箱を動かしましょう。

参考資料

• rbCanvas/p5 0.5.1 概要 — 音声機能を含む対応範囲と実行環境
• rbCanvas/p5 0.5.1 API リファレンス — loadSound、play、stop、isPlaying の仕様