音を鳴らそう
最後の仕上げとして、音を鳴らしていきましょう。
好きな音源ファイルをアップロードして鳴らす方法を解説します。
今回は、以下のように音を鳴らしたいと思います。
- キーボードを叩く度に、「カチッ」と鳴らす
- リフレッシュする度に、「バシューン」とカッコいい音を鳴らす
まず、オンラインエディタに音源ファイルをアップロードしましょう。
以下の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(); } }
- キーボードを押したときに、
keySound
を再生 - リフレッシュするときに、
refreshSound
を再生
というコードを追加しています。
無事にコードは書けましたでしょうか?
よくわからなくなってしまった方は、このページ下部にコード全文を掲載していますので、確認してみてください。
それではゲームを起動して、キーボードを叩いて音が鳴ることを確認してみましょう!