Make the sound of Mario's coins in your browser!

Let's take a quick look and Click "?" on this page!

The started

I wanted to sound in my browser. I did some research and found a way to convert mp3 and m4a files to base64 and play them, but that method was not what I wanted to do. A little more investigation revealed that it can be done with "AudioContext".

Moreover, the parameter was 'triangle, 'sine,' 'square,' 'sawtooth,' which were the very sounds used in the NES.

If this happens, I'll have to do it!

What made you think of NES?

No need to talk about the sound of NES in this day and age, right? Please bear with me for a moment.
If I talk in detail about the specifications of the NES sound, there are about eight different types of sounds, because some of them have changed the ratio of square waves, but basically only four sounds can be produced.

As mentioned above, when people see "square wave and triangle wave," people over the age of 40 definitely think it's the NES. Some NES geeks may have "Konami Sound Staff Club Kukeiha" in mind.

Technical

If you look at the source, there is nothing particularly difficult to do, so if you want to play the sound of a coin, you can do so by playing the "E" sound after the "B" sound.

It looks like this.

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)//B
oscillator.frequency.setValueAtTime(1318.51, audioContext.currentTime + 0.08)//E
oscillator.start()
oscillator.stop(.5)

Be careful not to specify gain.value or your ears will die...(super loud). My sense of sound was not up to par, and I couldn't make out the sound of the power-up and entering the clay pipe no matter how I tried, so I had to analyze it at about 10% speed.(I don't think it is possible for normal people.)

If you listen carefully, there are some strange things. but I tried to do a lot of things with WebAudio-PulseOscillator, but I just thought, "I'll just use the default sound." and "I'll do it with what I have!"

If you really work hard, you could probably make something serious by having it read midi and MML with the technology to make synthesizers, and it would be interesting to make an application for it in electron.

important point

I thought it would be tasteless to use only buttons, so I tried to reproduce the dots using table tags, but this is a "bonus" because of the rights issue.

Correspondence table

If you are interested in doing something similar, this might be useful.