音を鳴らそう

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

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

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

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

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

以下の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");

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

最後に、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(); } }
  • キーボードを押したときに、keySound を再生
  • リフレッシュするときに、 refreshSound を再生

というコードを追加しています。

無事にコードは書けましたでしょうか?
よくわからなくなってしまった方は、このページ下部にコード全文を掲載していますので、確認してみてください。

それではゲームを起動して、キーボードを叩いて音が鳴ることを確認してみましょう!

オンライン相談

つまづいたときは

ランダムキャンバス
レッスン一覧

はじめに

コース一覧

ゲーム開発コース

数学コース

アートコース

入門コース

このサイトについて


© 2022 ルートアイ All rights reserved.