レッスン16 音を鳴らそう | ランダムキャンバス | ゲーム開発で学ぶプログラミング

音を鳴らそう

最後の仕上げとして、音を鳴らしていきましょう。

好きな音源ファイルをアップロードして鳴らす方法を解説します。

今回は、以下のように音を鳴らしたいと思います。

キーボードを叩く度に、「カチッ」と鳴らす
リフレッシュする度に、「バシューン」とカッコいい音を鳴らす

まず、オンラインエディタに音源ファイルをアップロードしましょう。

以下の2つの音源ファイルをダウンロードしてください。
（右クリックして「名前を付けてリンク先を保存」または「リンク先を別名で保存」でダウンロードできます）

keySound.mp3（カチッ）
refreshSound.mp3（バシューン）

次に、オンラインエディタ上で、次のボタンをクリックしてください。

ファイルエクスプローラーアイコン

このボタンは青い四角で囲った位置にあります。

ファイルエクスプローラーアイコンの位置

「スケッチファイル」 と書かれている文字の右側のアイコンをクリックして、
「ファイルアップロード」 をクリックしてください。

ファイルアップロード

ファイルをアップロードできる画面が出てくるので、先ほどダウンロードした2つの音源ファイルをアップロードしてください。

アップロードが完了すると、以下のように 「keySound.mp3」「refreshSound.mp3」 が表示されていると思います。

ファイルエクスプローラー

以上で音源ファイルのアップロードは完了です。
続いてコードを変更していきます。

音の変数を用意します。
コードの一番上の行に、次のコードを追加してください。

let keySound;
let refreshSound;

次に、 setup 関数を次のように変更してください。

function setup() {
  createCanvas(W, H);
  noStroke();
  keySound = loadSound("keySound.mp3");
  refreshSound = loadSound("refreshSound.mp3");
}

以下のコードを追加しています。

keySound = loadSound("keySound.mp3");
refreshSound = loadSound("refreshSound.mp3");

これで、変数 keySound と refreshSound にそれぞれ音源がセットされました。

最後に、keyPressed 関数を次のように変更してください。

function keyPressed() {
  let randomX = random(W);
  let randomY = random(H);

  let randomW = random(W / 4);
  let randomH = random(H / 4);

  let randomR = random(255);
  let randomG = random(255);
  let randomB = random(255);

  fill(randomR, randomG, randomB);

  let r = random(0, 1);
  if (r < 0.5) {
    rect(randomX, randomY, randomW, randomH);
  } else {
    ellipse(randomX, randomY, randomW, randomH);
  }
  
  keySound.play();

  count++;
  if (count > 50) {
    count = 0;
    background(randomR, randomG, randomB);
    refreshSound.play();
  }
}