準備
p5.jsをダウンロードしておきます。 公式サイトからComplete Libraryをダウンロードし、zipファイルを解凍して出来るファイル群の中にあるp5.jsとp5.sound.jsを使います。
HTMLで先ほどのファイルを読み込むようにしておきます。
<html><head><scriptsrc="libs/p5.js"></script><scriptsrc="libs/p5.sound.js"></script><scriptsrc="app.js"></script></head><body><main><h1>p5 drum</h1><p>b: kick</p><p>x: snare</p><p>z, c: highhat</p></main></body></html>
次にapp.jsの中身を作っていきます。
音声ファイルの読み込み
preload()内でloadSound()を使って音声ファイルを読み込みます。 preload()は外部ファイルの読み込みに使用する関数で、画面表示時に最初にコールされます。
let snare, highHat, kick;
function preload() {
// 音声ファイルのフォーマットを指定
soundFormats('wav');
const volume = 0.2;
snare = loadSound('assets/Snare');
snare.setVolume(volume);
highHat = loadSound('assets/CHH');
highHat.setVolume(volume);
kick = loadSound('assets/Kick');
kick.setVolume(volume);
}音声ファイルは手持ちの適当なドラム音源をassetsフォルダを作成して入れておきました。
音声ファイルの再生
loadSound()で作成したオブジェクトのplay()をすることで音声ファイルが再生されます。停止はstop()です。 キーボードの入力をトリガーにして音を鳴らすようにします。keyPressed()という関数を作っておくと何かキー入力があったときにコールされるようになります。 また、keyCodeという変数で入力したキーのキーコードが取得できます。入力したキーに応じて特定の音が鳴るようにしました。
function keyPressed() {
// X or V
if (keyCode == '88' || keyCode == '86') {
snare.play();
}
// Z
if (keyCode == '90') {
highHat.play();
}
// B
if (keyCode == '66') {
kick.play();
}
}鳴らしてみる
これで音を鳴らす準備ができたのでブラウザでページを表示します。 このとき、HTMLを直接ブラウザで開くと以下のようにエラーになります。
Access to XMLHttpRequest at 'file:///C:/Project/p5-sound-sample/assets/Kick.wav' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
サーバにファイルを置いてページを表示しないとダメみたいです。 今回はVSCode拡張機能のLive Serverを使ってローカルサーバを立ててページを表示するようにしました。
味気ない画面ですが実際に音を鳴らしている様子です。