概要
Cadenzioは、ローカルの音声ファイルを読み込み、波形ビュー上で指定した区間を無限ループ再生できるブラウザ向けプレイヤーです。耳コピや楽器練習で同じフレーズを繰り返し確認したいケースを想定し、インストール不要のWebアプリとして提供されています。
主な特徴
学習効率に寄与する再生体験
- 任意区間ループ: 波形上でドラッグするだけでスタート・エンド位置を指定し、正確なループ再生が可能
- ショートカット操作: キーボードで再生／停止やループ微調整を素早く実行
- 音量コントロール: UIからミュートや音量調整が行え、練習環境に合わせやすい
利用シナリオに合わせた設計
- PWA対応: ホーム画面に追加してネイティブアプリのように利用でき、オフラインでもUIが即時起動
- プライバシー配慮: 音声ファイルはローカルで処理され、サーバーにアップロードされない
- レスポンシブUI: PC・タブレット・スマートフォンで使いやすい配置と操作性
技術スタック
- フレームワーク: Astro 5.x
- 言語: TypeScript
- オーディオ再生: Web Audio API
- UIコンポーネント: noUiSlider
- ビルド: Astro静的出力 + GitHub Pages自動デプロイ
実装のポイント
CadenzioではWeb Audio APIを直接操作し、音声バッファの一部だけを高速に再生し直せるよう工夫しています。ループ区間はnoUiSliderの2ハンドルスライダーで視覚的に操作でき、選択中の範囲をリアルタイムで反映します。また、Astroによる静的ホスティングとPWA対応を組み合わせることで、初回アクセス以降はキャッシュされたUIが即座に起動し、ネットワークが不安定な環境でも快適な練習体験を維持できます。