Otamatone | Devpost

Inspiration

The otamatone is a popular instrument in internet culture, be it a video of toothless dancing or rick roll, there will be an otamatone cover. It has a very unique sound but is not very accessible to most on the internet where it is popular. Therefore, we decided to create an otamatone web app to allow everyone to experience playing otamatone on any of their devices.

What it does

We have provided a musical instrument called otamatone. This is a progressive web app, which means that, you can access this on your web or even your phone! Now, you can always play your favourite otamatone from your computers or your mobile devices.

How we built it

We first search on how we can code to play the audio, and we created a frequency slider. Next, we merge both of them together to create our first otamatone prototype. Later, we design and add more features to this web app. We then convert it into pwa and finalise everything.

Challenges we ran into

There are buzzling digital noise when we first merge the audio player and the frequency slider. Eventually, we manage to resolve this problem. The tune of our otamatone app did not match the real otamatone. We found a way to solve this by implementing a custom sound wave using mathematical functions and it sounded much more similar.

Touch handlers were much more difficult than we expected as well. We thought the implementation will be similar to click handlers but it was not. This caused some minor bugs some of which we fixed.

Accomplishments that we're proud of

We are very happy to create an app of otamatone. This mean that everyone has the opportunity to play musical instruments, even in their home. And it is free! This also allows more people to explore their musical talents too!

What we learned

We have learned how we can create a musical instrument. Unlike piano, otamatone is a sliding musical instrument. We have found ways how to constantly pass in the current frequency of the value and play it. Most importantly, we have learned how to analyze the problem and design suitable solutions, as well as delegating the problem to the most suitable candidates.