[JS]PCのキーボードを鍵盤にして、オルガンやギターの演奏が楽しめるスクリプト -Audio Synth

シンセサイザー、オルガン、アコースティックギターなどの演奏を手元のPCのキーボードで楽しめる単体で動作するスクリプトを紹介します。

Audio Synth
Audio Synth -GitHub

• Audio Synthのデモ
• Audio Synthの使い方

Audio Synthのデモ

HTML5のAudio要素を使用しているため、デモはChromeでご覧ください。

デモページ

演奏は、ブラウザ上のキーボードをクリックでも、キーボードでもできます。

白鍵はキーボードの「QWERTY...」、黒鍵は「234567...」に対応しています。

デフォルトはシンセサイザーで、他にオルガン、ギターなどの演奏も楽しめます。

Audio Synthの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<script src="audiosynth.js"></script>
<script src="audiosynth.view.js"></script>

Step 2: HTML

キーボードを配置します。

<div class="keyboard-options">
<select ID="sound">
  <option value="0" selected>Keyboard</option>
  <option value="1">Organ</option>
    <option value="2">Acoustic Guitar</option>
    <option value="3">EDM, bro!</option>
</select>
<div ID="keyboard" class="keyboard-holder"></div>
<div class="keyboard-options">
Range [C<span ID="OCTAVE_LOWER">3</span>-B<span ID="OCTAVE_UPPER">5</span>]
<input type="button" ID="-_OCTAVE" value="-" />
<input type="button" ID="+_OCTAVE" value="+" /><br />
</div>
</div>

Step 3: JavaScript

</body>の上（コンテンツの下）あたりにスクリプトを記述して、初期化します。

<script type="text/javascript">
var a = new AudioSynthView();
a.draw();
</script>