オタマトーンをWebアプリで再現してみた

概要

指をスライドし音色を奏でる電子楽器「オタマトーン」を
Webアプリとして再現を試みたお話です。

つくったきっかけ

僕には大好きな楽器があります。
それは、「オタマトーン」。
https://otamatone.jp/

かわいい見た目からかわいい音色を奏でる、
ちょっとくせがある楽器です。

ひとによっては玩具とみなすかもしれませんが、
僕はれっきとした電子楽器だと思っています。

この子をいろんなところに連れて行き、どこでも音色を奏でたい。
しかし、この子、意外と大きいんです。
なかなか持ち運ぶのは難しい………

そこで、この子のように演奏できるアプリが作れれば………と思い立ち、
つくろうとしてみました。

つくる道のり

AudioContext が使えるかと思い、これを用いて任意の周波数の音が鳴るプログラムをさくっと書いてみました。

これを「オタマトーン」のように演奏できるようにしていきます。
書き進めるのにつかれたので chatGPT を召喚。

途中まで書いていたコードと
「スマホでタッチ操作で演奏したい」
のような要望を伝えるといい感じに続きを書いてくれました。
できたものの細部を手修正して、完成！

できたもの

黒いバーを指でタップ、スライドすることで演奏できるアプリが出来上がりました！

スマホで以下のリンクを開いていただくと、演奏できます！
指をスライドして奏でていただきたいのでマウスは非対応としています。
（Android、最新Chromeで動作確認済）

https://itanium-r.github.io/soundSlider/

ソースコード：
https://github.com/itanium-R/soundSlider

おわりに

演奏の操作感としては近いものができたかと思います。
とはいえ、やはり入力デバイスは仮想キーボードより物理キーボードの方が入力しやすいように、
演奏体験としては、本物の「オタマトーン」には勝てないなぁという感想です。

本記事を読んで気になった方は、ぜひ「オタマトーン」を手に入れていただき、
この「オタマ沼」に一緒に沈もうではありませんか。
オタマたちが奏でるかわいい音色を、この世界に轟かせましょう。

https://otamatone.jp/

留意事項

• 本記事は案件でなく、「オタマトーン」好きな１開発者が愛を込めて書いたものです。
• ただし、弊社の親会社 Hamee株式会社 <3134.T> は、米国で「オタマトーン」を販売しています。日本国内では株式会社キューブさんが販売されています。
• 「オタマトーン」は明和電機株式会社さんの登録商標です。