【HTML5】マリオのコインの音をブラウザで出そう【ファミコン】

## サンプルページ
[こちら](https://bu-kurokky.github.io/mytest/beep/nes.html)になります。「？」マークをクリックしてもらえばきっと音がなるはずです！

## きっかけ
ライブ配信システムに「**TVでよく見かける[テストパターン](https://bu-kurokky.github.io/mytest/beep/tv_test1.html)のを出したら面白いかなぁ？**」と思いJSでbeep音を出すのを調べたら**AudioContextを使えばできる**というのが分かました。

そして、そのパラメーターが「'triangle,'sine','square','sawtooth'」というファミコン世代にドンズバなものだったので、「だったらやろう！」と思ったのがきっかけです。  
（JavaScriptでbeep音をちょっと検索するとmp3やm4aのバイナリをbase64化して〜っていう古めの記事が出てくるんですが、今回のはJSのAudioContextで音声を生成して流します。）


## なぜファミコン世代にドンズバ？

令和のこの時代に、ファミコン（ここで言うファミコンは、Nintendoのファミリーコンピューターの事です)の話をしてもアレですが、ファミコンは仕様上4つの音しか出せません。  
まぁ、細かいことを言うと矩形波の割合を変更したものがあるので8種類ぐらいなんですけど、詳しくは、[こちらのページ](https://qdadino.net/about-square-triangle-pulse-wave-and-noise-on-nes-sound)が分かりやすく動画もあって親切なので是非覗いてみてください。

|音色|詳細|
|-|-|
|矩形波(square)|主にメロディ用、矩形波だけ2つ同時出せる|
|三角波(triangle)|ベース 効果音|
|noise|ドラムやリズム、効果音|
|DPCM|肉声っぽいの|

で、上記の通り「矩形波、三角波」って見たらアラフォー以上の人は「ファミコンじゃん」ってなったり、むしろ、[コナミ矩形波倶楽部](https://ja.wikipedia.org/wiki/%E3%82%B3%E3%83%8A%E3%83%9F%E7%9F%A9%E5%BD%A2%E6%B3%A2%E5%80%B6%E6%A5%BD%E9%83%A8)を思い出す方も多いかもしれません。  

## 技術的なこと

まぁ、ソースを見て貰えば特に難しいことはしていない（いつものように殴り書きだし…）のでコインであれば「♪シミー」という音を鳴らせばできるわけです。  

```Javascript
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](https://github.com/pendragon-andyh/WebAudio-PulseOscillator)を見て色々やろうとはしたんですが、とりあえず「デフォルトで用意されたものでやる！」って感じでやりました。


極めると、本当にシンセサイザー作れちゃうと思うので、midiや[MML](https://ja.wikipedia.org/wiki/Music_Macro_Language)を読ませることで本格的なものも作れるでしょうし、それをelectronでアプリ化したら面白いでしょうね。

## 注意点
ボタンだけじゃぁ、味気ないと思って、ドット絵をtableタグで再現してみましたが、「オマケ」として考えてください。  
色々ツッコミどころがあるので場合によっては削除します。

## もっと技術的に極めたい方へ

分かりやすい記事として

- [音を操るWeb技術 - Web Audio API入門](https://ics.media/entry/200427/)
- [Web Audio API の基礎](https://www.html5rocks.com/ja/tutorials/webaudio/intro/)や

ファミコンの音が気になった方は

- [8bit(ファミコン風)ゲーム音楽の作り方。仕様を理解し正しく打ち込みましょう。](http://wingless-seraph.net/wp/2017/09/09/%E6%AD%A3%E3%81%97%E3%81%848bit%EF%BC%88%E3%83%95%E3%82%A1%E3%83%9F%E3%82%B3%E3%83%B3%E9%A2%A8%EF%BC%89%E9%9F%B3%E6%BA%90%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9%E3%80%82%E4%BB%95%E6%A7%98%E3%82%92/)
- [ファミコン音源のスペック](https://wikiwiki.jp/mck/%E3%83%95%E3%82%A1%E3%83%9F%E3%82%B3%E3%83%B3%E9%9F%B3%E6%BA%90%E3%81%AE%E3%82%B9%E3%83%9A%E3%83%83%E3%82%AF)

などを見てみると、和音の作り方、フィルターなども簡単に実装できるはずなので是非楽しんでみてください。

自分用のメモとして作った周波数表も置いておきます。

|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|