Javascript を使ってブラウザの Chrome で鳴らせる簡易サンプラーを作ってみます。
DJブースの隅やイベント会場に置いてあるやつです。
爆発音を鳴らしてみたり、録音機能があったり、パターンを保存して再生する機能が付いてあったり、利用場面に合わせて様々な使われ方をされます。
ビートボックス、リズムマシンとも呼ばれたりします。
Tone.js
今回は、簡易版ということで、音が3つ鳴るだけのサンプラーです。
作成に当たっては、偉大なる Web Audio framework の Tone.js を利用します。
https://github.com/Tonejs/Tone.js/
動作デモ
まずは見ていただいた方が早いと思うので、 作ったものを netlify に上げておきました。
Chrome 以外では確認していません。
音が出るので注意。
PC、最近のスマートフォンなら動くと思いますが、環境によってはブラウザの「音声」を許可する必要あり。
やってること
主要部分はこんな感じになります。
!function(){
Tone.Transport.bpm.value = 80;
Tone.Transport.loop = false;
const sampler = new Tone.Sampler({
'C1' : '/bd.mp3',
'E1' : '/sd.mp3',
'F#1': '/hh.mp3'
}, ()=>{
console.log('initialized')
}).toMaster();
const sound = note => {
const cell = document.querySelector('[data-note="'+note+'"]');
sampler.triggerAttackRelease(note, .3);
cell.style.animationName = 'fade1';
setTimeout(()=>{
cell.style.animationName = '';
}, 300)
}
const beatbox = document.getElementById('petit-beatbox');
beatbox.querySelectorAll('div').forEach(div=>{
div.onclick = e => {
sound(e.currentTarget.dataset.note)
};
});
document.body.onkeypress = e => {
if (e.code === 'KeyA') {
sound('C1');
} else if (e.code === 'KeyS') {
sound('E1');
} else if (e.code === 'KeyD') {
sound('F#1')
}
}
}();赤、黄、緑の四角をクリックするか、キーボードのASDでそれぞれ鳴らしたい音が再生されるようイベントリスナーをセットします。
ほぼこれだけです。
ボタンを追加して効果音や音色を設定していけば色々遊べます。
Javascript なので、その気になれば、その場でソースコードごと変更してしまうことも可能です。
(ラグがある場合は音自体の軽量化までやらないと駄目かも…)
家で遊ぶ
Tone.js には様々な API が用意されているので、頑張ればエフェクターやシーケンサーとしての機能も追加できます。
Tone.js っょぃ。
逆に、Tone.js のない標準の Web Audio API は、かなりしんどいです。
「シンプルなサイン波を440Hzで3秒間ほどほどの音量にして鳴らす」だけでもう再起不能に陥り寝込んでしまいます。
おうちで自家生産、サンプラーを作って遊んでみるのはいかがでしょうか。