Scratch拡張「波形sprite製造機」音を“視える化”するOSSツール
こんにちは、菊（@kikukick）です。
今回は、自作のScratch拡張ツール「波形sprite製造機」を紹介します。
このツールは 音声の波形をScratch用のスプライトに変換 するWebアプリで、HTMLとJavaScriptで構築し、GitHub Pagesで無料公開しています。完全なOSSとして誰でも利用・改変可能です。
公開URL
このページでは以下の操作が可能です：
- 任意の波形棒本数を指定（例：35）
- 任意の音声ファイル（mp3など）をアップロード
- ボタンを押すだけで 音声波形をリアルタイム解析
- 解析結果を基にした
.sprite3ファイルの自動生成とダウンロード
(⚠️音声の解析中にタブを移動するとその部分だけ情報が取れず値が0になります。
このツールを作った背景
Scratchはビジュアルプログラミングの中でもとても教育効果が高く、拡張性もある素晴らしいツールです。しかしながら「音声波形を視覚的に表示する仕組み」は標準で存在しません。
そこで私は、以下の目的からこの拡張ツールを作りました：
- 音楽作品やボイス作品に“波形の視覚要素”を加えたい
- 小学生や中学生が 音とデータの関係 を可視的に学べる教材として使えるようにしたい
- Scratchの世界に“音声解析”というちょっと尖った拡張性を持たせたい
結果として、 音声ファイルを読み込み、棒グラフ風の波形スプライトを自動生成する シンプルかつ汎用性のあるツールに仕上がりました。
技術スタックとアーキテクチャ概要
| 機能 | 使用技術 |
|---|---|
| 音声読み込み・解析 | Web Audio API（JavaScript） |
| UI構築 | HTML + CSS（素のDOM操作） |
| 波形描画 |
<canvas> API |
.sprite3生成 |
JSON構造による手動構築 |
| アップロード／DL処理 | Blob生成 + download属性 |
| 公開・ホスティング | GitHub Pages |
特筆すべき実装ポイント：
- 棒の本数を動的に分割し、音声のピーク値からサンプルポイントを自動抽出
-
Canvasでスプライト用画像を描画し、それをScratch仕様の
.sprite3形式（zip構造JSON）で生成 - ファイル生成は完全クライアントサイドで行い、サーバーへのアップロードは一切不要
GitHub PagesでのOSS配信
このツールは完全静的なWebアプリとして作っているため、GitHub Pagesとの相性が非常に良いです。以下の流れで公開しました：
-
kikukick_program_pageというGitHubリポジトリを作成 - HTML/JS/CSSを
pages/フォルダに配置 -
settings > Pagesからmainブランチの/docsまたはrootを選択し公開 - 自動で
https://kikukick.github.io/kikukick_program_page/pages/page4.htmlが発行されました
誰でも再現可能な方法であり、OSSを広く届ける手段として非常に有効です。
利用方法（ステップバイステップ）
-
サイトにアクセス：
https://kikukick.github.io/kikukick_program_page/pages/page4.html -
棒の数を指定（例：30本）
-
任意の
.mp3などの音声ファイルを選択 -
「再生＆解析開始」ボタンをクリック
-
解析された波形が画面上に表示され、同時に
.sprite3ファイルが自動生成されます -
生成されたスプライトをScratch 3.0にインポートすれば、プロジェクトでそのまま使用可能！
リポジトリ・ライセンス情報
- GitHub: kikukick/kikukick_program_page
- ライセンス: MIT License（商用利用OK、改変OK、再配布OK）
自由に使って、学んで、改善して、派生ツールを作ってもらって構いません！
最後に：OSSとしての意義と今後の展望
このような「音を視覚化するScratchツール」はまだほとんど存在しておらず、教育現場や創作活動において新しい表現手段を提供するポテンシャルを秘めています。
もしこの拡張が「面白そう」「役に立ちそう」と思ったら、ぜひGitHubのスターやQiitaのいいねをお願いします！
お問い合わせ・フィードバック
バグ報告・機能要望・コラボの相談など、GitHubの Issueからお気軽にどうぞ！
ScratchとWeb技術の架け橋として、少しでも誰かの創作の手助けになれば嬉しいです。
開発者: kikukick
高校生プログラマー / Scratcher支援ツール開発 / GitHubユーザー
GitHub / 公開ページ