第16章 音と画面を同じ時間に置く
音を鳴らすだけなら、再生ボタンを一つ置けば足ります。クリエイティブコーディングで面白いのは、音が鳴る時間と、画面が変わる時間を同じ値から作れることです。クリックで音を始め、再生位置や音量に合わせて形を変えます。
16.1 ブラウザは勝手な音を止める
多くのブラウザは、ページを開いただけで音が鳴る自動再生を制限します。驚かせる広告や不要な音を防ぐためです。そのため、音の開始にはクリックやキー入力など、利用者の操作が必要です。
音が鳴らないとき、コードだけが原因とは限りません。最初に次を確認します。
- 画面を 1 回クリックしたか
- タブがミュートされていないか
- 端末の音量が 0 ではないか
- 音声ファイルをエディタへ正しく取り込んだか
- ブラウザが音声形式を再生できるか
16.2 preload で音を用意する
この章には、練習用の短い音声 sound.wavが付属しています。リンク先を保存してエディタへドラッグ＆ドロップし、素材一覧へ sound.wav が現れたことを確認します。素材名が出ないときは、付録Aの画像や音が読み込めないを確認します。ドラッグ操作ができない端末では、この章は図と説明だけ見て第17章へ進めます。
preload は、絵を描き始める前に画像や音を読み込むためのメソッドです。loadSound("sound.wav") は、取り込んだ sound.wav を音声オブジェクトとして読み込みます。その音声オブジェクトを @sound へ入れておくと、別のメソッドからも再生や停止を指示できます。
def preload
@sound = loadSound("sound.wav")
end
def setup
createCanvas(500, 300)
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
@sound.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で停止中と再生中の違いを確認できれば次章へ進めます。