yoppa.org


多摩美 - サウンド&ネット 2014年度

第5回: Web応用2 – P5.jsでサウンドプログラミング

前回に引き続きp5.jsでWebブラウザ上でプログラミングしていきます。今回からは、p5.jsでサウンドを扱っていきます。最終目標のイメージとして、音と映像をインタラクティブに操作する作品、例えば、patatapのような作品をWebブラウザ上で発表します。

サンプルファイル

今回とりあげるプログラムのサンプルは、全て下記からダウンロード可能です。

サウンドファイルの準備

手元にサウンドファイルを準備します。もし、手元に適当なサウンドがない場合には、freesoundやsoundcloudからフリーのサウンド素材をダウンロードして使用しましょう。

最終的に作品で使用するサウンドは、金曜日のサウンドの授業で作成したもので作成します。

サウンドファイルを再生する

p5.sound.jsの読み込み

p5.jsでサウンド機能を使用するためには、まず始めにサウンド用のライブラリ「p5.sound.js」を有効にしなくてはいけません。「p5.sound.js」ライブラリを有効にするには、まずp5.jsのエディタを起動したら、index.htmlのタブを選択します。

screenshot_426

9行目に注目してください。色がグレーになっています。これは「コメントアウト」といって、前後にある という記号によって、その内側が無視されるようになっています。このコメントアウトを解除することで、p5.sund.jsが有効になります。

assetsフォルダの作成

次にサウンドファイルを格納するためのフォルダを準備します。今回は、プログラムの「資産」といった意味合いを込めて「assets」という名前のフォルダを作成します。フォルダは、index.htmlやsketch.jsがある階層に新規に作成します。

screenshot_427

この「assets」フォルダの中に使用するファイルを格納します。例えば、「mySound.mp3」という名前のサウンドを使用する場合には、以下のような階層構造となります。

screenshot_428

サウンドを再生

では、まずはシンプルに音をループ再生してみましょう。例えば、assetsフォルダに入れたサウンドファイルの名前が「se01.wav」だとすると、以下のようなプログラムをsketch.jsに記入します。

プログラムを実行すると、音がループ再生されればOKです。

インタラクティブにサウンドを再生

キーダウンで再生

次に、サウンドの再生をインラクティブにしてみましょう。キーボードを押すとサウンドが再生されるように改造します。

マウスクリックでサウンド再生

このプログラムは、keyPressed(k)をmousePressed()に変更すると、マウスを画面内でクリックすると再生するように変更可能です。

複数の音を再生する

次に復習の種類の音を読み込んでキーボードで切り替えながら演奏してみましょう。この例では、assetsフォルダに

  • se01.wav
  • se02.wav
  • se03.wav
  • se04.wav

と4種類の音がそれぞれ入っていると過程して説明します。

音を複数扱うには、サウンドを格納する配列(変数のロッカー)のようなものを用意すると便利です。p5.jsではJavaScriptの配列の生成方法と同じ文法となります。

こうすることで、

  • sample[0]
  • sample[1]
  • sample[2]

というように、連番でサウンドファイルを格納して再生することが可能となります。

サウンドは、タイプしたキーの種類によって変更するようにしてみましょう。その場合、keyPressed() ではなく keyTyped() を使用すると便利です。以下のようにして、キーの種類を識別します。キーの数だけ条件を指定することが可能です。

以上の方法をまとめて、以下のようなプログラムが作成されました。

このプログラムを実行してみましょう。キーの種類に応じて音が切り替わるはずです。

サウンドにアニメーションを追加する

いよいよ、それぞれのサウンドに対応するアニメーションを追加してみましょう。

ひとつひとつのサウンドは、独立したObjectとして作成して、それをメインのプログラム(sketch.js)から呼び出すという構造にしていきたいと思います。

個別のアニメーションを格納するための、animations.jsというファイルを新規に作成しましょう。メニューバーから「File > New File」を選択して、新規ファイルを「animations.js」という名前でプロジェクトに追加します。

その上で、index.htmlにanimations.jsを読み込む命令(12行目)を追加します。

index.htm

それぞれのアニメーションは、独立したオブジェクトとなります。例えば、各キーに対応するオブジェクトを以下のように名付けるとします。

  • aキー : Animation_a
  • sキー : Animation_s
  • dキー : Animation_d
  • fキー : Animation_f

それぞれのアニメーションは、新規に作成される際に初期化され、draw命令で描画するものとします。これを実現するために、animations.jsに下記のような雛形を作成します。

animations.js

この全てのアニメーションにそれぞれ別個の動きをデザインします。例えば、下記のように簡単な図形によるアニメーションを入れてみます。

animation.js

最後にいよいよsketch.jsからそれぞれのアニメーションをキーを押したタイミングで実行されるように組み込んでみます。

sketch.js

これで完成です!! a, s, d, fのキーを押すと、対応するアニメーションとそれに付随するサウンドが再生されます。

フルスクリーンで再生する

せっかくアニメーションを作成したので、ブラウザの画面いっぱいにcanvasを拡げて再生したいものです。p5.jsではcreateCanvasの引数の指定で、Webブラウザの画面全体を使うことが可能です。sketch.jsを以下のように変更します。6行目の「createCanvas(windowWidth, windowHeight);」がポイントです。

sketch.js

また、canvasの上と左に余白が生じないように、index.htmlも若干変更を加えます。12行目のbodyの開始要素に、余白を除去するCSSを直接書き込んでいます。

これで、Webブラウザの画面いっぱいで再生されるようになりました!!

実習

  • 金曜日のサウンドの授業で作成したサウンドを全て、プログラムに読み込む
  • キーボードを割り当て、全ての音を再生できるようにしてみる
  • それぞれの音にあてはまるアニメーションはどのようなものか、考えてみる