🐱 cat-oscilloscope 簡易デモ

📘 このデモについて

このページは、cat-oscilloscopeをnpmライブラリとして使用する方法を示す最小限の実装例です。 GitHubリポジトリからインストールしたライブラリを使って、BufferSourceで波形データを可視化しています。

📊 ステータス

💻 実装コード

このデモのコアとなる実装は以下の通りです：

// install from github でライブラリをインポート
// npm install git+https://github.com/cat2151/cat-oscilloscope.git
import { Oscilloscope, BufferSource } from 'cat-oscilloscope';

// Oscilloscopeインスタンスを作成
const canvas = document.getElementById('oscilloscope');
const previousWaveformCanvas = document.getElementById('previousWaveformCanvas');
const currentWaveformCanvas = document.getElementById('currentWaveformCanvas');
const similarityPlotCanvas = document.getElementById('similarityPlotCanvas');
const frameBufferCanvas = document.getElementById('frameBufferCanvas');

const oscilloscope = new Oscilloscope(
  canvas,
  previousWaveformCanvas,  // previousWaveformCanvas
  currentWaveformCanvas,   // currentWaveformCanvas
  similarityPlotCanvas,    // similarityPlotCanvas
  frameBufferCanvas        // frameBufferCanvas
);

// 440Hz サイン波データを生成
const sampleRate = 44100;
const duration = 1; // 秒
const frequency = 440; // Hz
const audioData = new Float32Array(sampleRate * duration);

for (let i = 0; i < audioData.length; i++) {
  audioData[i] = Math.sin(2 * Math.PI * frequency * i / sampleRate);
}

// BufferSourceを作成してループ再生
const bufferSource = new BufferSource(audioData, sampleRate, { 
  loop: true 
});

// 可視化を開始
await oscilloscope.startFromBuffer(bufferSource);

// 推定周波数を取得
const estimatedFreq = oscilloscope.getEstimatedFrequency();
console.log(\`推定周波数: \${estimatedFreq} Hz\`);

🔗 詳細なドキュメント

• ライブラリ利用方法（LIBRARY_USAGE.md）
• プロジェクト説明（README.ja.md）
• GitHubリポジトリ
• フルバージョンのデモ

📦 インストール方法

GitHubリポジトリからインストール（推奨）：

npm install git+https://github.com/cat2151/cat-oscilloscope.git

import { Oscilloscope, BufferSource } from 'cat-oscilloscope';