1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

線を描くと音になる:ブラウザ上のビジュアル音楽ツール「Wiggly Music」を作ってみた

1
Posted at

独立開発者として、Wiggly Music という「描いた線や図形がそのまま音楽になる」ブラウザツールを公開しています。
AI生成ではなく、キャンバス上の位置・高さ・色を音にマッピングする ビジュアル楽器(visual music instrument) です。

SCR-20261028-mkyc.png

この記事では、コンセプトと仕組みの概要、触ってみてほしいポイントをまとめます。

なにができるか
キャンバスに線・形・ループを描く
横方向 = 時間、縦方向 = 音高、色 = 声部(音色)
キー / スケール / テンポ / スウィング / 量子化を後から調整
MIDI 入力(対応ブラウザ)や WAV / MIDI 書き出し
共有リンクで作品を開き直せる
楽譜が読めなくても、耳と形で始められます。理論グリッドは「必要になったとき」のためのオプションです。

なぜビジュアル楽器にしたか
従来のシーケンサーは「タイムラインにノートを置く」操作が中心です。
一方で、メロディの「上がり下がり」やリズムの「隙間」は、もともと絵として頭の中にあります。

Wiggly Music では、その絵をそのまま入力面にしました。

再生ヘッドが絵の上を横断する → 空間が時間になる
マークを上下に動かす → 音高が追従する
色やプログラム(Ink など)を重ねる → 声部が増える
つまり 描画サーフェスとシーケンサーが同じ画面 です。

技術的な要点(ざっくり)
絵の属性 音楽の属性
X(左→右) 時間(先→後)
Y(下→上) ピッチ(低→高)
色 / プログラム 声部・音色
ループ領域 フレーズの繰り返し

周辺機能:キー / スケール / オクターブ、クオンタイズ / スウィング、Web MIDI、WAV / MIDI エクスポート。Quick, Draw!(Google / CC BY 4.0)のサンプル線画も呼べます。

触ってみる流れ(おすすめ)
wigglymusic.com を開く
キャンバスに曲線を一本描く
再生して縦位置と音高の関係を確認
キーやスケールを変えて聴き比べ
共有リンク、または WAV / MIDI で保存
AI ではない、という一点
「絵から音楽」≠ 生成AI。Wiggly Music はプロンプトで曲を作るツールではなく、描いた軌跡そのものが演奏データです。

おわりに
独立開発の実験的な楽器です。フィードバック歓迎。

サイト:
wigglymusic.com

1
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?