[{"data":1,"prerenderedAt":19},["ShallowReactive",2],{"tag-articles-web audio":3},[4,10,14],{"title":5,"description":6,"path":7,"publishedAt":8,"updatedAt":9},"Synthesia風「降ってくる音符」のピアノアプリをWeb Audio + Canvasで作った——実装の詳細メモ","音符バーが上から降ってきて鍵盤に届くと音が鳴るピアノビジュアライザー /piano-roll の実装記録。曲データの持ち方、88鍵レイアウト計算、落下バーの座標系、Web Audioによるピアノ音合成、運指番号表示、楽譜データの入手方法やMIDIキーボード対応の展望まで。","/piano-roll-implementation","2026-06-11T00:00:00.000Z",null,{"title":11,"description":12,"path":13,"publishedAt":8,"updatedAt":9},"スクショ1枚からSynthesia風ピアノロールWebアプリを作ってもらった日——88鍵Canvas＋Web Audio合成＋運指表示","「ピアノアプリ作ってもらいたいんですけど」と画像1枚を見せたところから、Synthesia風ピアノロール /piano-roll が完成するまでの記録。再生時計が止まる謎、devサーバーの古いコード配信、公開化で見つかったOGメタタグ不足14件の一括修正まで。","/piano-roll-web-app",{"title":15,"description":16,"path":17,"publishedAt":18,"updatedAt":9},"自分の声を複製して、BPM120のビートに乗せる — TTSで講義音声を作る実験","話速も文と文の間も数値で固定すれば、TTSのナレーションは音楽のグリッドに乗る。自分の声のクローンで実験し、波形で検証したときに見つかった3つの落とし穴","/tts-narration-bpm120","2026-08-18T00:00:00.000Z",1787123744209]