はじめに
ブラウザ上で、昔懐かしいゲームボーイ風のチップチューン音楽を手軽に作成・保存できるWebアプリ「ピコピコ音楽エディタ（レトロピコピコ・シーケンサー）」を開発しました！
専用のソフトをインストールすることなく、ブラウザを開くだけで誰でもすぐにピコピコ音を鳴らして遊べます。
👉 実際に遊んでみる
主な機能と特徴
1. 4つの音色（波形）を重ねて作る本格チップチューン
レトロゲームの音源に欠かせない4つの波形を再現しました。
- 🟩 メロディ（矩形波）: いわゆるピコピコ音の主役。
- 🟦 ベース（三角波）: ファミコンなどのベースラインでおなじみの丸い音。
- 🟥 リズム（ノイズ）: ドラムやパーカッションの代わりになるザザッという音。
- 🟫 サブ（ノコギリ波）: 少しとがった音色で、アルペジオやバッキングに最適。
2. 「✨ 自動で作成」ボタンが超便利！
音楽理論がわからなくても大丈夫です。キー（調）と曲調を選ぶだけで、1クリックでランダムなフレーズを生成してくれます。
選べる曲調のバリエーションとして、「明るい」「切ない」だけでなく**「和風（ヨナ抜き音階）」や「ボス戦（フリジアン・ドミナント）」**なども用意しました。これらをポチポチ押しているだけでも無限に遊べます。
3. フレーズを作って、曲を組み立てる
作成したフレーズは最大8つまで「お気に入り」としてパレットに保存できます。
「🧩 曲を組み立てる」タブに切り替えると、保存したフレーズをグリッド上に並べて、1曲の長いソング構成を組み上げることができます。
4. ローカル保存 ＆ WAV書き出し対応
ブラウザのLocalStorageを使った一時保存や、JSONファイルとしてのプロジェクト書き出しに対応しています。さらに、WAVファイルとしての音声書き出し機能も実装しているため、作った曲を動画のBGMとして実際に使うことも可能です！
技術スタック・実装の工夫点
今回はフレームワーク（ReactやVueなど）は使わず、HTML / CSS / Vanilla JavaScriptのみで構築しています。
-
UI・描画: HTML5 Canvas (
requestAnimationFrameを用いた描画ループ) - 音声合成: Web Audio API
- フォント: Google Fonts ('Press Start 2P', 'DotGothic16')
特に実装面でこだわったポイントをいくつか紹介します。
① Web Audio APIによる波形合成とノイズ生成
音声ファイル（mp3など）を鳴らすのではなく、AudioContextのOscillatorNodeを使ってブラウザ上でリアルタイムに波形を合成しています。
ドラム代わりのノイズ音は、ランダムな値を詰めたAudioBufferに対して、トーン（音色）スライダーの値に応じてBiquadFilterNode（ローパス / バンドパス / ハイパス）を動的に切り替えてそれらしい打楽器音を表現しています。
② Uint32Arrayを用いたビット演算による状態管理
パフォーマンスとメモリ効率（および過去のロマン）を意識し、ノート（音符）のデータ構造はオブジェクトの配列ではなく、Uint32Arrayを用いて1つの32bit整数にパックして管理しています。
// ピッチ、ステップ、波形、アクティブフラグ、長さを1つの数値にパック
pack(pitch, step, waveType, isActive, duration = 1) {
let packed = 0;
packed |= (pitch & 0xFF);
packed |= (step & 0xFF) << 8;
packed |= (waveType & 0x03) << 16;
packed |= (isActive & 0x01) << 18;
packed |= (duration & 0xFF) << 19;
return packed;
}
③ OfflineAudioContextを使った高速WAVレンダリング
WAV書き出し機能には OfflineAudioContext を活用しています。
通常の AudioContext がリアルタイムで音を鳴らすのに対し、オフラインコンテキストを使うことで、数分ある曲でもバックグラウンドで一瞬のうちに音声バッファとしてレンダリングし、Blob化してWAVファイルとしてダウンロードさせることができます。
④ UIの操作感（マウスドラッグ対応）
ピアノロールの操作では、マス目をクリックして音を置くだけでなく、そのまま右にドラッグすることで音の長さ（duration）をシームレスに伸ばせるようにしました。Canvas上の座標計算とイベントリスナーを組み合わせて、直感的なエディタ体験を実現しています。
おわりに
「ブラウザだけで完結する音楽制作ツール」を作ってみたいと思い、Web Audio APIとCanvasの勉強を兼ねて開発しました。
ゲームボーイ風のカラーパレット（4色の緑色系）でまとめたUIも個人的に気に入っています！
ぜひ、リンクから適当に音を鳴らして遊んでみてください。バグ報告や「こういう機能が欲しい！」などのフィードバックもお待ちしています！