Hatsune miku is a Vocaloid Voice library that can be used by software VOCALOID.
Vocaloid imports library voicebank to sing a song with user-provided inputs, including lyrics, melody, and various parameters to modify them.
About a couple of years ago, simple electronic instrument was introduced in a magazine called "Adult science Magazine". It's called Pocket miku, which can make Miku's singing voice with simple keyboard.
My Inspiration came here, which was implementing this instrument on the web.
Since I own legit VOCALOID V3 Program with Hatsune miku V3 software, I extracted every single pronounciation as short wav file.
The problem was that, not every pronounciation had same Attack timing, so I carefully cut the front part of wav file as far as I could.
I also tried to load and connect the voice wav file to the AudioBuffer nodes, but HTML didn't allow use one xmlHttpRequest on multiple files. It might still be possible if I try to create xmlHttpRequest variable for few hundreds of files.
Then, I implemented input part, which is basically done only on keyboard. The singing voice only sounds when the key is pressed. If it is released, instantly the voice stops.
Therefore, it is possible to adjust singing duration with one note up to 3 seconds(maximum length of records)
HTML Button tags don't work as they are clicked; They are just there for input feedback. It responds to corresponding Key that is assigned, from 1 to 5 and Q to T for consonant, and A to G for vowel.
As this project is based on Japanese software and instrument, pronounciation range is limited.
Upper ten keys, 1~5 and Q~T, are for deciding consonant. Lower five keys, A to G are for deciding vowel. With combination of consonant and vowel, the pronounciation is decided.
User must press pronounciation control keys to determine pronounciation before pressing melody key(bottom row of keyboard from z to ,) unless the voice will not be played.
Also, unpressing any of keys required to play a voice will cause instant pause(stop) of voice playing.
With load button placed above the control pad, user can freely load one's favorite music to be played as background music.
At the bottom of control pads, currently pressed pronounciation is displayed in alphabet combination. It only appears when both consonant and vowel keys are pressed together.
For readability and unity, if the pronounciation is A,I,U,E, or O, which doesn't have consonant, ' character is displayed.
Currently trying to apply function that can at least adjust volume of loaded music.
There should be research about better interface for more convenient way to play this web-instrument. Due to complexity of pressing keys, even not all Japanese pronounciations are included. (GA,PA,BA sounds are missing)
I didn't do the lossy compression on voice data for maximum performance, but since this takes huge(about 260MB) amount of data, it takes much long time to be fully loaded on user's client.
(Even after loading gif fades out, on the background the wav files are still downloading on the browser's cache.)