サンプルページ
こちらになります。「？」マークをクリックしてもらえばきっと音がなるはずです！
きっかけ
ライブ配信システムに「TVでよく見かけるテストパターンのを出したら面白いかなぁ？」と思いJSでbeep音を出すのを調べたらAudioContextを使えばできるというのが分かました。
そして、そのパラメーターが「'triangle,'sine','square','sawtooth'」というファミコン世代にドンズバなものだったので、「だったらやろう！」と思ったのがきっかけです。
（JavaScriptでbeep音をちょっと検索するとmp3やm4aのバイナリをbase64化して〜っていう古めの記事が出てくるんですが、今回のはJSのAudioContextで音声を生成して流します。）
なぜファミコン世代にドンズバ？
令和のこの時代に、ファミコン（ここで言うファミコンは、Nintendoのファミリーコンピューターの事です)の話をしてもアレですが、ファミコンは仕様上4つの音しか出せません。
まぁ、細かいことを言うと矩形波の割合を変更したものがあるので8種類ぐらいなんですけど、詳しくは、こちらのページが分かりやすく動画もあって親切なので是非覗いてみてください。
| 音色 | 詳細 |
|---|---|
| 矩形波(square) | 主にメロディ用、矩形波だけ2つ同時出せる |
| 三角波(triangle) | ベース 効果音 |
| noise | ドラムやリズム、効果音 |
| DPCM | 肉声っぽいの |
で、上記の通り「矩形波、三角波」って見たらアラフォー以上の人は「ファミコンじゃん」ってなったり、むしろ、コナミ矩形波倶楽部を思い出す方も多いかもしれません。
技術的なこと
まぁ、ソースを見て貰えば特に難しいことはしていない（いつものように殴り書きだし…）のでコインであれば「♪シミー」という音を鳴らせばできるわけです。
const AudioContext = window.AudioContext || window.webkitAudioContext
const audioContext = new AudioContext()
const gainNode = audioContext.createGain()
gainNode.connect(audioContext.destination)
gainNode.gain.value = 0.1
const oscillator = audioContext.createOscillator()
oscillator.connect(gainNode)
oscillator.type = "square"
oscillator.frequency.setValueAtTime(987.766, audioContext.currentTime)//シの音
oscillator.frequency.setValueAtTime(1318.51, audioContext.currentTime + 0.08)//ミの音
oscillator.start()
oscillator.stop(.5)
↑こんな感じですね。
気を付けることは、gain.valueを指定しないと耳が死にます…（超絶うるさい）
あと、私の音感がついていかなくてパワーアップの音と土管に入る音は、どうやっても聞き取れず10%ぐらいのスピードにして解析しました。（というか、あれ正確に聞き取れる人いるの？っていう感じです）
他にも、土管の音の最低音にBフラットが入ってるはずなんですが、低すぎておかしな感じになっていて本当はvolume調整すべきなんだろうなとか、WebAudio-PulseOscillatorを見て色々やろうとはしたんですが、とりあえず「デフォルトで用意されたものでやる！」って感じでやりました。
極めると、本当にシンセサイザー作れちゃうと思うので、midiやMMLを読ませることで本格的なものも作れるでしょうし、それをelectronでアプリ化したら面白いでしょうね。
注意点
ボタンだけじゃぁ、味気ないと思って、ドット絵をtableタグで再現してみましたが、「オマケ」として考えてください。
色々ツッコミどころがあるので場合によっては削除します。
もっと技術的に極めたい方へ
分かりやすい記事として
ファミコンの音が気になった方は
などを見てみると、和音の作り方、フィルターなども簡単に実装できるはずなので是非楽しんでみてください。
自分用のメモとして作った周波数表も置いておきます。
| note | Hz | etc |
|---|---|---|
| A | 6.875 | |
| A# | 7.283 | |
| B | 7.716 | |
| C | 8.175 | MIDI LOW |
| C# | 8.661 | |
| D | 9.177 | |
| D# | 9.722 | |
| E | 10.3 | |
| F | 10.913 | |
| F# | 11.562 | |
| G | 12.249 | |
| G# | 12.978 | |
| A | 13.75 | |
| A# | 14.567 | |
| B | 15.433 | |
| C | 16.351 | |
| C# | 17.323 | |
| D | 18.354 | |
| D# | 19.445 | |
| E | 20.601 | |
| F | 21.826 | |
| F# | 23.124 | |
| G | 24.499 | |
| G# | 25.956 | |
| A | 27.5 | Piano Low |
| A# | 29.135 | |
| B | 30.867 | |
| C | 32.703 | |
| C# | 34.647 | |
| D | 36.708 | |
| D# | 38.89 | |
| E | 41.203 | |
| F | 43.653 | |
| F# | 46.249 | |
| G | 48.999 | |
| G# | 51.913 | |
| A | 55.0 | |
| A# | 58.27 | |
| B | 61.735 | |
| C | 65.406 | |
| C# | 69.295 | |
| D | 73.416 | |
| D# | 77.781 | |
| E | 82.406 | |
| F | 87.307 | |
| F# | 92.498 | |
| G | 97.998 | |
| G# | 103.826 | |
| A | 110.0 | |
| A# | 116.54 | |
| B | 123.47 | |
| C | 130.812 | |
| C# | 138.591 | |
| D | 146.832 | |
| D# | 155.563 | |
| E | 164.813 | |
| F | 174.614 | |
| F# | 184.997 | |
| G | 195.997 | |
| G# | 207.652 | |
| A | 220.0 | |
| A# | 233.081 | |
| B | 246.941 | |
| C | 261.625 | |
| C# | 277.182 | |
| D | 293.664 | |
| D# | 311.126 | |
| E | 329.627 | |
| F | 349.228 | |
| F# | 369.994 | |
| G | 391.995 | |
| G# | 415.304 | |
| A | 440.0 | |
| A# | 466.163 | |
| B | 493.883 | |
| C | 523.251 | |
| C# | 554.365 | |
| D | 587.329 | |
| D# | 622.253 | |
| E | 659.255 | |
| F | 698.456 | |
| F# | 739.988 | |
| G | 783.99 | |
| G# | 830.609 | |
| A | 880.0 | |
| A# | 932.327 | |
| B | 987.766 | |
| C | 1046.502 | |
| C# | 1108.73 | |
| D | 1174.659 | |
| D# | 1244.507 | |
| E | 1318.51 | |
| F | 1396.912 | |
| F# | 1479.977 | |
| G | 1567.981 | |
| G# | 1661.218 | |
| A | 1760.0 | |
| A# | 1864.655 | |
| B | 1975.533 | |
| C | 2093.004 | |
| C# | 2217.461 | |
| D | 2349.318 | |
| D# | 2489.015 | |
| E | 2637.02 | |
| F | 2793.825 | |
| F# | 2959.955 | |
| G | 3135.963 | |
| G# | 3322.437 | |
| A | 3520.0 | |
| A# | 3729.31 | |
| B | 3951.066 | |
| C | 4186.009 | Piano HIGH |
| C# | 4434.922 | |
| D | 4698.636 | |
| D# | 4978.031 | |
| E | 5274.04 | |
| F | 5587.651 | |
| F# | 5919.91 | |
| G | 6271.926 | |
| G# | 6644.875 | |
| A | 7040.0 | |
| A# | 7458.62 | |
| B | 7902.132 | |
| C | 8372.018 | |
| C# | 8869.844 | |
| D | 9397.272 | |
| D# | 9956.063 | |
| E | 10548.081 | |
| F | 11175.303 | |
| F# | 11839.821 | |
| G | 12543.853 | MIDI HIGH |
| G# | 13289.75 | |
| A | 14080.0 | |
| A# | 14917.24 | |
| B | 15804.265 | |
| C | 16744.036 | |
| C# | 17739.688 | |
| D | 18794.545 | |
| D# | 19912.126 | HUMAN HIGH |
| E | 21096.163 | |
| F | 22350.606 | |
| F# | 23679.643 | |
| G | 25087.707 | |
| G# | 26579.5 |